Görsellere Büyüteç ile Bakma

Görsellere Büyüteç ile Bakma

sola ok  Kaldırılan İçerikler

27.12.2015

2,256 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...

Php SMTP ile Mail Gönderme (İletişim Formu) Yapımı
29.01.2016
17,024 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

Görsellere Büyüteç ile Bakma
27.12.2015
2,256 Gösterim

Görsellere Büyüteç ile Bakma

Web sitenizde bulunan görsellerin üzerine gelindiğinde büyüteç efekti ile görseli görüntülemek için gereken HTML/CSS kodları.

Localhost .htaccess Ayarı
24.01.2016
2,131 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.

Web Sitesine Kısayol Tuşları Ekleme
27.12.2015
2,159 Gösterim

Web Sitesine Kısayol Tuşları Ekleme

Sahibi olduğunuz web sitesine gelen ziyaretçilerin daha hızlı gezinebilmesi için kısayol tuşları ekleyebilirsiniz.

CSS ile Scrollbar Ayarları
29.12.2015
2,009 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.

X

MasivaTurk.com içeriklerini
YouTube'dan takip edebilirsiniz.

YOUTUBE KANALIMA ÜCRETSİZ
ABONE OLMAK İÇİN TIKLA