Günümüzde neredeyse çoğu grafik sitesi görselleri için büyüteç tekniğini kullanmakta. Hatta sık sık ziyaret ettiğimiz alışveriş siteleri bile ürünlerini daha iyi sunmak için bu tekniği kullanmakta.
Peki nasıl oluyorda imleci görsellerin üzerine getirince bir mercek içinden bakabiliyoruz? Bu makalemde bu soruyu birlikte cevap arayacağız.
Biraz CSS, biraz HTML ve biraz da jQuery… Hadi başlayalım!
Başlangıç
HTML ile yayınlayacağımız görseli biraz küçülteceğiz. JavaScript ile ise görselin orjinal boyutunu çekip CSS ile hazırladığımız mercek sayesinde listeleyeceğiz. Bu işlemi aktif ve ilgi çekici kılmak için ise jQuery kütüphanesine el atacağız.
Sayfanızın tagları arasına aşağıdaki jQuery linkini ekleyerek başlayın.
<script></script>
CSS kodları
Tasarımımızı oluşturmaya başlayalım. Ben büyüteç alanı için 400px değerini girdim. Buraya dikkat, bu alan aşağıdaki HTML kodundaki resmin width değeriyle aynı olmak zorunda.
.buyutec {
width: 400px;
margin: 50px auto;
position: relative;
cursor: none}
.mercek {
width: 175px;
height: 175px;
position: absolute;
border-radius: 100%;
box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.85),
0 0 7px 7px rgba(0, 0, 0, 0.25),
inset 0 0 40px 2px rgba(0, 0, 0, 0.25);
display: none;
}
.kucuk { display: block;}
Yukarıdaki CSS kodlarını da sayfanıza eklediyseniz sırada JS kodlarımız var.
JavaScript kodları
Buradaki kodları ise içerisinde, jQuery‘i eklediğiniz yerin hemen altına yazabilirsiniz.
<script>
$(document).ready(function(){
var gercek_uzunluk = 0;
var gercek_genislik = 0;
$(".mercek").css("background","url('" + $(".kucuk").attr("src") + "') no-repeat");
$(".buyutec").mousemove(function(e){
if(!gercek_uzunluk && !gercek_genislik)
{
var image_object = new Image();
image_object.src = $(".kucuk").attr("src");
gercek_uzunluk = image_object.width;
gercek_genislik = image_object.height;
}else{
var buyutec_offset = $(this).offset();
var mx = e.pageX - buyutec_offset.left;
var my = e.pageY - buyutec_offset.top;
if(mx < $(this).width() && my < $(this).height() && mx > 0 && my > 0)
{$(".mercek").fadeIn(100);}
else{$(".mercek").fadeOut(100);}
if($(".mercek").is(":visible"))
{
var rx = Math.round(mx/$(".kucuk").width()*gercek_uzunluk - $(".mercek").width()/2)*-1;
var ry = Math.round(my/$(".kucuk").height()*gercek_genislik - $(".mercek").height()/2)*-1;
var bgp = rx + "px " + ry + "px";
var px = mx - $(".mercek").width()/2;
var py = my - $(".mercek").height()/2;
$(".mercek").css({left: px, top: py, backgroundPosition: bgp});
}
}
})
})
</script>
HTML kodları
Sırada görselimizi eklemek var. Tekrar belirtiyorum. Buradaki görselin width değeri CSS kodumuzdaki buyutec classının width değeriyle aynı olmak durumunda. Aksi durumlarda görselinizin dışarıda kalan alanlarında büyüteç çalışmayacaktır.
Ve her şey hazır.
Kapanış
Günümüzde jQuery kullanmayan web uygulaması kalmadı sanırım. Dahili olarak ise eklediğimiz birkaç satır CSS ve JS. İşte bütün bu basitlik hazırladığımız bu büyüteç örneğini gayet pratik ve kullanılır kılıyor. Bir o kadar da hızlı.
Kaynak : http://www.adobewordpress.com/gorsellerinize-buyutec-ile-bakin/
