Kotelnitskiy Evgeniy‘nin jQuery için geliştirdiği görsel olarak çok hoşuma giden birkaç eklentisinden biri olan İmageView eklentisi ile resimlerinizi tek tıklama ile resim çerçeve büyüklüğünde hiçbir değişiklik olmadan resimlerinizi büyütebilir tıklamadan sonra mouseyi basılı tutarak resmi aynı çerçeve içerisinde istediğiniz yöne doğru sürükleyebilirsiniz. jQuery Scrollview eklentisi ile benzer bir özellik tek fark scrollview eklentisinde resmi çerçeve içerisinde büyütmeden gezdiriyorduk. Scrollview’e göre daha kullanışlı bir eklenti.
Kullanım
- Head etiketleri arasına eklemeniz gereken bölümler.
Js dosya adresleri :
<script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.imageView.js"></script>
JavaScript :
<script type="text/javascript">
$(function() {
$('#imageView_container').imageView({width: 800, height:500});
});
</script>
Css :
<style type="text/css">
body {
background-color: #555;
color: #fff;
}
a {
color: #fff;
text-decoration: none;
outline: none;
}
a:hover {
color: #fff;
text-decoration: underline;
}
a img{
border: none;
}
#imageView_container {
border: 2px solid #000;
}
#imageView_container.iv-loading {
border: 2px solid #f00;
}
</style>
- Body etiketleri arasına eklemeniz gereken bölüm.
Html :
<div id="imageView_container">
<img id="imageView" src="photos/image-800x500.jpg" rel="photos/image-1680x1050.jpg" alt="" />
</div>
