Jquery Zoom Efekti Verme (elevatezoom plugin)
UstaDerslik Soru-Cevap Yararlı Araçlar
arama ikon
Diller
Türkçe Türkçe

bilgi UstaDerslik
Bu uyari kutusudur.
Tamam
Anasayfa
İletişim
Üyeler

Jquery Zoom Efekti Verme (elevatezoom plugin)

profil
cArleone
BEĞEN(1)
BEĞENME(0)
GÖRÜNTÜLENME(5041)
RAPOR ET
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ü :
http://ustaderslik.com/resim/ders/rw6pf.png

Ş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ü :
http://ustaderslik.com/resim/ders/rw6rt.png

2-Örnek
Şimdi de resmin pozisyonunu ayarlamayı görecez. 1-16 pozisyonlar bu pozisyonlara resim üzerinde bakalım.
http://ustaderslik.com/resim/ders/rw6su.png

$(function(){
$("#zoom").elevateZoom({
zoomWindowPosition: 6 //istediğiniz pozisyonu seçin ve verin
});
})


Görüntüsü :
http://ustaderslik.com/resim/ders/rw6up.png

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ü:
http://ustaderslik.com/resim/ders/rw6wn.png

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ü :
http://ustaderslik.com/resim/ders/rw6yb.png

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>



Kod
Kalın
Vurgu
Resim
Video
Url
CEVAPLA
Tüm Hakları Saklıdır. ©Arleone 2013-2014 UstaDerslik






Giriş
Şifremi Unuttum...
Şifre Talep
  Kuralları Kabul Ediyorum.
Kaydol