jQuery ile Resimlere Otomatik Zoom Yaptırma

0

Bir çok kişinin işine yarayacak güzel bir eklenti. Resim üzerine gelindiğinde otomatik olarak bütüyor. Resimler çok büyük olduğunda sayfayı fazla taşırmadan büyütüyor buda ekstrası 🙂

jQuery arşivim gittikçe genişliyor siteye ekledikçe arşivimede ekliyorum ilerleyen zamanlarda bu dev arşivi sizlerle paylaşacağım inşallah.

https://3.bp.blogspot.com/-PBHZxmqBhmw/UPwBzSZmnyI/AAAAAAAAPVQ/RrkAu-q-UpE/s1600/photozoom-jquery.jpg

PhotoZoom jQuery Eklentisi

Eklenti tamamiyle ücretsiz ve resmi sitesinden detaylarıda inceleyebilrisiniz.

Demo / Download – indir

Temel Kurulum

PhotoZoom’un yapımcısı kurulumu alttaki gibi anlatmış.

HTML kodları aşağıdaki gibi;

<script src="jquery.js"></script>
<script  src="photoZoom.min.js"> </script>
<script>
$(document).ready(function()
{
$('body').photoZoom();
});
</script>
//HTML Code
<body>
<img src='one.jpg'/>
<img src='two.jpg'/>
......
......
</body>

CSS Stili aşağıdaki kodlardan değiştirerek daha güzel tasarımlar çıkarabilirsiniz.

$("body").photoZoom(
{
zoomStyle : {
"border":"1px solid #ccc",
"background-color":"#fff",
"box-shadow":"0 0 5px #888"
}
});

Son olarak Alttaki kod hangi alanda çalışmasını belirliyor. Fonksiyon kısmı yani altta body yazılmış body yerine kullanıcağınız div’ide yazabilirsiniz tüm resimlere etki etmesi mantıklı değil.

$("body").photoZoom(
{ 
onMouseOver : function(currentImage){
// do something
},
onMouseOut : function(currentImage){
// do something
}
});