Görsellerinize Büyüteç ile Bakın

CSS Büyüteç

Günümüzde neredeyse çoğu grafik sitesi görselleri için büyüteç tekniğini kullanmakta. Hatta sık sık ziyaret ettiğimiz alışveriş siteleri bile ürünlerini daha iyi sunmak için bu tekniği kullanmakta.

Peki nasıl oluyorda imleci görsellerin üzerine getirince bir mercek içinden bakabiliyoruz? Bu makalemde bu soruyu birlikte cevap arayacağız.

Biraz CSS, biraz HTML ve biraz da jQuery… Hadi başlayalım!

ÖRNEĞİ GÖRÜNTÜLE

Başlangıç

HTML ile yayınlayacağımız görseli biraz küçülteceğiz. JavaScript ile ise görselin orjinal boyutunu çekip CSS ile hazırladığımız mercek sayesinde listeleyeceğiz. Bu işlemi aktif ve ilgi çekici kılmak için ise jQuery kütüphanesine el atacağız.

Sayfanızın <head></head> tagları arasına aşağıdaki jQuery linkini ekleyerek başlayın.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

CSS kodları

Tasarımımızı oluşturmaya başlayalım. Ben büyüteç alanı için 400px değerini girdim. Buraya dikkat, bu alan aşağıdaki HTML kodundaki resmin width değeriyle aynı olmak zorunda.

.buyutec {
width: 400px;
margin: 50px auto;
position: relative;
cursor: none}

.mercek {
width: 175px;
height: 175px;
position: absolute;
border-radius: 100%;
box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.85),
0 0 7px 7px rgba(0, 0, 0, 0.25),
inset 0 0 40px 2px rgba(0, 0, 0, 0.25);
display: none;
}

.kucuk { display: block;}

Yukarıdaki CSS kodlarını da sayfanıza eklediyseniz sırada JS kodlarımız var.

JavaScript kodları

Buradaki kodları ise <head></head> içerisinde, jQuery‘i eklediğiniz yerin 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>

HTML kodları

Sırada görselimizi eklemek var. Tekrar belirtiyorum. Buradaki görselin width değeri CSS kodumuzdaki buyutec classının width değeriyle aynı olmak durumunda. Aksi durumlarda görselinizin dışarıda kalan alanlarında büyüteç çalışmayacaktır.

<div class="buyutec">
<div class="mercek"></div>
<img class="kucuk" src="GÖRSEL-ADRESİ.jpg" width="400"/>
</div>

Ve her şey hazır.

Bu da ilginizi çekebilir  Sitenize Kolayca Slider Ekleyin

Kapanış

Günümüzde jQuery kullanmayan web uygulaması kalmadı sanırım. Dahili olarak ise eklediğimiz birkaç satır CSS ve JS. İşte bütün bu basitlik hazırladığımız bu büyüteç örneğini gayet pratik ve kullanılır kılıyor. Bir o kadar da hızlı.



  • Yakup Hoca

    Kodlar için teşekkürler. Ancak iki şey rica edebilir miyim?
    Birincisi bir demo görebilirsek memnün olurum.
    İkincisi HTML kodları başlığı altında verdiğiniz kodlarda resmi divlerin içinde sayfaya eklemek gerekiyor ancak çoğumuz resimleri sadece < img src= şeklinde temel html koduyla ekliyoruz. Jquery ile belirli bir div içerisindeki örneğin post-entry klasına sahip bir div'in içerisindeki tüm img elementlerini bulup, bunları verdiğiniz html kodları içerisine alsa, böylece sitenin kaynak kodları artmamış olacak hem de önceden eklenmiş resimlerde de kullanılabilir olmuş olacak.
    Ne dersiniz, yapılabilir mi?
    Hatta neden mercek olarak kullanılacak div'in width değerini otomatik olarak resimle eşleştirip, devam etmiyoruz ki?

    • Dediklerinizin hepsi yapılabilir şeyler. Ayrıca yukarıda “Örneği Görüntüle” buttonu mevcut. Bu tarz derslerin çoğunda birer örnek hazırlıyorum. Teşekkürler.

  • safd

    hocam inşallah erken cevap verirsin benim sorunum şu internet bağlantısı olmayan bi yerde jquery kütüphanesını çağıramıyoruz.. dolayısıyla çalışmıyor, çevrimdışı olarakda bu örneğin düzgün görüntülenmesi için ne yapabilirim, kütüphanedeki kodları alıp aynı ısımle dosya olusturdum kaynak klasorde ama fayda etmedi, ne yaparak bu sorunu aşabilirim? kolay gelsin. Hayırlı bayramlar..

  • Yusuf

    Denedim çalışmıyor üstad

  • Muhammed Çiçekdemir

    helal kardeşim denedim harfiyen yerine getirdim.süper çalışıyor ellerine sağlık.Allah razı olsun 😉 tanışabilirsek ne mutlu bana 🙂

  • STAR

    BİR ÇOK RESİM OLDUĞU ZAMAN NASIL YAPICAZ BAŞKA BİR RESİMDE BÜYÜTEC UYGULAYAMIYORUM. GALERİ ŞEKLİNDE YAN YANA BİR ÇOK RESİMDE AYNI KODU UYGULAMAK İSTİYORUM.

  • Hakan

    Üstadım, ellerine yüreğine sağlık. İşin gücün rast gelsin inşallah. Fakat “Star” ın da belirttiği gibi bunu aynı sayfada çok sayıda image üstünde nasıl uygulayabiliriz. Örneğin üniforma üzerine bir site yapıyorum ve ürünler kısmında bir çok model var, yüzlerce. Hepsinde ayrı ayrı bunu nasıl yapabiliriz? Yardımcı olabilir misin?