Jquery de son zamanlarda baya kullanılan bir plugin olan zoom pluginini anlatacam.Bir ara kendim javascript ile kodlamıştım basit bir şey.
Bu plugin çok kullanışlı ve basit bir şey.Sitesinden örnekleri inceleyerek bakabilirsiniz.
Site : http://www.elevateweb.co.uk/image-zoom/examples
Şimdi pluginin işleyişine bakalım. Öncelikle sayfamıza jquery ve pluginin .js dosyalarını dahil etmelisiniz.
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="http://www.elevateweb.co.uk/wp-content/themes/radial/jquery.elevatezoom.min.js"></script>
Ardından resmin 1 küçük 1 de büyük resmini hazırlıyonuz ve img tagı ile sayfaya dahil ediyoruz.
<img src="küçük resim adresi" id="zoom" data-zoom-image="büyük resim adresi" />
Daha sonra resmimizi seçip zoom pluginini uyguluyoruz.
<script type="text/javascript">
$(function(){
$("#zoom").elevateZoom();
})
</script>
Bu kadarını yaptıysanız zoom olayı artık çalışıyor demektir.En basit zoom şekli budur.
Görüntüsü :
Şimdi paremetrelere geçelim.Hepsini anlatmayacam güzel olan bir kısmını anlatacam.Gerisini sitesinden bakabilirsiniz.
1-Örnek
ilk anlatacağım paremetre resmin arkasını renk atayıpşeffalığını azaltma.
$(function(){
$("#zoom").elevateZoom({
tint:true, //zoom olacak resmin arkasına renk atamayı açıyoruz
tintColour:'#d12c69', //rengi seçiuoruz
tintOpacity:0.4//şeffalılığını ayarlıyoruz
});
})
Görüntüsü :
2-Örnek
Şimdi de resmin pozisyonunu ayarlamayı görecez. 1-16 pozisyonlar bu pozisyonlara resim üzerinde bakalım.
$(function(){
$("#zoom").elevateZoom({
zoomWindowPosition: 6 //istediğiniz pozisyonu seçin ve verin
});
})
Görüntüsü :
3-Örnek
Bu örnekte zoomu ayrı pencerede değilde direk resmin üzerinde göstermeye bakacaz.
$(function(){
$("#zoom").elevateZoom({
zoomType : "inner", //zoom tipi dışta değil resim içinde diyoz.
cursor: "pointer" // mouse imleç tipini seçiyoruz.bunları css cursor type diye aratırsanız hepsini bulabilirsiniz.
});
})
Görüntüsü:
4-Örnek
Şimdiki örnekte şu resmin gösterilecek alanın boyutunu gösteren kareyi mouse tekerleği ile nasıl büyültecez ona bakacaz.
$(function(){
$("#zoom").elevateZoom({
scrollZoom : true //Gösterilecek alanın boyutunu mouse tekerleği ile büyütmeyi aç dedik.
});
})
Görüntüsü :
Zoom olayında benim anlatacaklarım bu kadar.Dahası için sitesine göz atın.
Genel Örnek :
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>cArleone</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="http://www.elevateweb.co.uk/wp-content/themes/radial/jquery.elevatezoom.min.js"></script>
<script type="text/javascript">
$(function(){
$("#zoom").elevateZoom({
tint:true,
tintColour:'#d12c69',
tintOpacity:0.2,
cursor: "crosshair",
scrollZoom : true
});
})
</script>
<style type="text/css">
</style>
</head>
<body>
<img src="kucuk/kucuk_resim.jpg" id="zoom" data-zoom-image="buyuk/buyuk_resim.jpg" />
</body>
</html>
UstaDerslik
