Görsellere Büyüteç ile Bakma

Görsellere Büyüteç ile Bakma

sola ok  Kaldırılan İçerikler

27.12.2015

1,862 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 ile Şifreli Sayfa Yapımı
28.01.2016
2,221 Gösterim

Php ile Şifreli Sayfa Yapımı

Php ile sahibi olunan bir web sitesinin herhangi bir sayfasına, basit bir şekilde şifre koymak mümkündür. Sayfaya giriş yapma izni bulunan, birden fazla kullanıcı adı ve kullanıcı şifresi tanımlanabilir.

Üzerine Gelince Büyüyen Resimler
13.12.2015
3,169 Gösterim

Üzerine Gelince Büyüyen Resimler

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

jQuery - Değişen Arka Plan Kodu
21.11.2015
2,364 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.

Tarihte Bugün Scripti Yapımı
06.06.2016
1,738 Gösterim

Tarihte Bugün Scripti Yapımı

Tarihte bugün scripti, asp, php gibi programlama dilleriyle, farklı şekillerde kodlanabilir. En basit haliyle php ile tarihte bugün kodları, scripti

Php ile IMDB ve Sinemalar.com Botu Yapımı
27.01.2016
3,002 Gösterim

Php ile IMDB ve Sinemalar.com Botu Yapımı

Php ile başka siteden veri çekme yöntemini kullanarak, imdb ve sinemalar.com sitelerinden film bilgilerini çekebilen php scripti yapımı


Genel Kültür İçerik Platformu | MasivaTurk.com]
X

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

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