MENU

jQuery ile Resimlere Otomatik Zoom Yaptırma

Anasayfa » jQuery » jQuery ile Resimlere Otomatik Zoom Yaptırma
jQuery ile Resimlere Otomatik Zoom Yaptırma

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.

http://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
}
});
Rooteto Teknoloji Blogu

Rooteto WordPress, Sosyal Medya, Teknoloji, HD Resimler ve Video paylaşımında bulunan bağımsız olarak çalışan online haber teknoloji sitesidir.

Yaklaşık 1 Milyondan fazla tekil aylık ziyaretci ile Rooteto'yu büyük yapan teknoloji topluluklarıdır. 2009 yılında kurulan Rooteto'nun genel merkez ofisi İzmir / Bornova'dadır.