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.
PhotoZoom jQuery Eklentisi
Eklenti tamamiyle ücretsiz ve resmi sitesinden detaylarıda inceleyebilrisiniz.
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
}
});
