Görsellere Büyüteç ile Bakma

Görsellere Büyüteç ile Bakma

sola ok  Kaldırılan İçerikler

27.12.2015

4,358 Gösterim

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

Localhost .htaccess Ayarı
24.01.2016
4,494 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.

CSS ile Scrollbar Ayarları
29.12.2015
4,747 Gösterim

CSS ile Scrollbar Ayarları

Web sitelerinde bulunan scrollbar(kaydırma çubuğu) görünümünü kişiselleştirmek için gereken kodlar.

jQuery - Değişen Arka Plan Kodu
21.11.2015
4,915 Gösterim

jQuery - Değişen Arka Plan Kodu

Web sitenizin arka plan görselinin belirli aralıklarla sizin belirlediğiniz görseller arasında değişmesi için gerekli olan javascript kodu.

Kopyalanan Yazıya Otomatik Kaynak Adresi Ekleme
24.04.2016
3,160 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.

PHP ile TC Kimlik Numarası, Ad, Soyad, Doğum Tarihi Doğrulama
09.07.2016
12,233 Gösterim

PHP ile TC Kimlik Numarası, Ad, Soyad, Doğum Tarihi Doğrulama

Php ile tamamen yasal olarak tc kimlik numarası, isim, soyisim, doğum tarihi doğrulama