Kaldırılan İçerikler
Bu içeriği 2 dakikada okuyabilirsiniz.
Görsellere Büyüteç İle Bakma
Birçok sitede, görsellerin üzerine imleç ile gelindiğinde görsellerin büyüteç ile büyütülmüş halini görürüz. E-Ticaret sitelerinin neredeyse tamamı ürün görsellerinin üzerine gelindiğinde ürünün daha detaylı görünmesi için büyüteç tekniğini kullanmıştır. HTML/CSS ve jQuery ile büyüteç yapımı aşağıda ayrıntılı bir şekilde anlatılmıştır.
HTML ile görselin boyutunu biraz küçültüp, JavaScript ile görselin orjinal boyutunu çekip, CSS ile hazırladığımız mercek sayesinde listeleyeceğiz.
HTML Kodları
Sayfanın <head> </head> tagları arasına aşağıdaki jQuery linkini ekleyin:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
HTML kodlarının içine görseli ekliyoruz. Buradaki görselin "width" değeri CSS kodumuzdaki "buyutec" class'ının "width" değeriyle aynı olmalıdır. Aksi halde görselin dışarıda kalan alanlarında büyüteç çalışmaz.
<div class="buyutec">
<div class="mercek"></div>
<img class="kucuk" src="gorselin-adresi.jpg" width="300"/>
</div>
<div class="mercek"></div>
<img class="kucuk" src="gorselin-adresi.jpg" width="300"/>
</div>
CSS Kodları
Tasarımımı oluşturmaya başlıyoruz. Büyüteç alanı için 300px değerini giriyorum. Buradaki "width" değeri aşağıdaki HTML kodundaki resmin "width" değeriyle aynı olmalıdır.
.buyutec {
width: 300px;
margin: 0 auto;
position: relative;
cursor: none}
.mercek {
width: 175px;
height: 175px;
position: absolute;
border-radius: 100%;
box-shadow: 0 0 20px 5px #29a2d6;
display: none;
}
.kucuk { display: block;}
width: 300px;
margin: 0 auto;
position: relative;
cursor: none}
.mercek {
width: 175px;
height: 175px;
position: absolute;
border-radius: 100%;
box-shadow: 0 0 20px 5px #29a2d6;
display: none;
}
.kucuk { display: block;}
JavaScript Kodları
Buradaki kodları <head> </head> içerisine eklediğiniz jQuery kütüphanesinin 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>
$(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>
Önizleme
Bu içeriği MasivaTurk.com sitesini kaynak göstererek kullanabilirsiniz. İçeriklerin; MasivaTurk.com sitesi kaynak gösterilmeden herhangi bir web sayfasında, sosyal
medyada ve görsel basında yayınlanması yasaktır. Ayrıntılı bilgi için Kullanım Koşulları sayfasını okuyabilirsiniz.
27.12.2015
Büyüteç gibi gözükmesi hoş duruyor beğendim acaba mobilde de çalışıyor mu bu özellik?
Normalde böyle siteye eklenti, kod ekleme işlerini ilk seferinde beceremezdim. Bu kez ilk seferinde yaptım. Çokta güzel oldu. Elinize sağlık.
Merak ettiğim ve de basit ve güzel anlatımını bulamadığım, görsel büyütme kodlarını sayende kaptım admin sağol.