Görsellere Büyüteç ile Bakma

Görsellere Büyüteç ile Bakma

sola ok  Kaldırılan İçerikler

27.12.2015

1,401 Gösterim

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.
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>


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;}


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>


Ö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

İçerik hakkında soru sorabilir veya yorumda bulunabilirsiniz.

İsim
Web Site
E-Posta
Mesaj

Yorumlar (3)

  1. Burak

    Büyüteç gibi gözükmesi hoş duruyor beğendim acaba mobilde de çalışıyor mu bu özellik?

  2. Harun

    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.

  3. Gülsüm

    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.


Bu İçerikler de İlginizi Çekebilir...

Php SMTP ile Mail Gönderme (İletişim Formu) Yapımı
29.01.2016
11,497 Gösterim

Php SMTP ile Mail Gönderme (İletişim Formu) Yapımı

Php SMTP Sınıfı olan PHPMailer ile mail gönderme anlatımı - PHP İletişim Formu yapımı - PHP SMTP İletişim Formu

Üzerine Gelince Büyüyen Resimler
13.12.2015
2,027 Gösterim

Üzerine Gelince Büyüyen Resimler

Web siteleri için, mouse ile üzerine gelindiğinde büyüyen resim kodları

PHP ve jQuery ile Anında Önizlemeli Arama Formu
20.06.2016
1,317 Gösterim

PHP ve jQuery ile Anında Önizlemeli Arama Formu

Her webmaster, sahibi olduğu siteye, Google gibi anında önizlemeli site içi arama motoru eklemek ister. Bunu PHP, jQuery kullanarak yapmak mümkündür.

Localhost .htaccess Ayarı
24.01.2016
1,327 Gösterim

Localhost .htaccess Ayarı

Php ile kodlama yaparken herkesin kullandığı .htaccess dosyası localhostta aktif değildir. Kodlama esnasında birçok sorunu önlemek için .htaccess dosyasını localhostta aktif etmek gerekmektedir.

Kopyalanan Yazıya Otomatik Kaynak Adresi Ekleme
24.04.2016
1,430 Gösterim

Kopyalanan Yazıya Otomatik Kaynak Adresi Ekleme

Kaynak belirtilmeden kopyalanan yazılara otomatik kaynak adresi eklemek için küçük bir javascript kod blogunun siteye eklenmesi yeterli olacaktır.