Javascript ile Sahibinden.com benzeri resim galerisi


Sahibinden.com gibi otomobil, emlak satışı yapılan sitelerde ürünün farklı resimlerini görüntülemek üzere sıkça kullanılan (örnek) ve tasarımcılar tarafından şiddetle aranılan scriptlerden biri. Aslında benim tasarladığım bu örnek tam olarak mevzubahis sitelerdeki gibi çalışmıyor, ben olayı biraz daha basit tekniklerle halletmeye çalıştım.

Script, iki farklı metod ile küçük resimlere tıklandığında büyük resmin değişmesini sağlıyor; birincisi büyük resmin javascript ile direkt olarak değiştirilmesi, ikincisi ise büyük resmi taşıyan div’in içerisine innerHTML vesilesiyle html import edilmesi. Her iki metodun da kendine göre avantaj ve dezavantajları var, mesela büyük resim yüklenirken resmi taşıyan div’e arkaplan olarak atanan loading ikonunun görüntülenmesi için innerHTML kullanmak daha mantıklı.

Dışarıdan herhangi bir kütüphane/dosya import edilmesine gerek bırakmayan, tüm işi gören javascript kodlarımız şu şekilde:

1
2
3
4
5
6
7
8
9
<script type="text/javascript">
function myResim(aydi){
    // Yöntem 1: Resmi değiştirme
    // document.myresim.src =  ""+ aydi +"";
   
    // Yöntem 2: Taşıyıcı div'e html import etme
    document.getElementById("resimdiv").innerHTML = "<img name="myresim" src=""+ aydi +"" />";
}
</script>

Bu fonksiyona göre;
yöntem 1’de küçük resim linkimiz <a href="javascript:;" onclick="myResim(‘resim-1.jpg’);">resim 1</a> şeklinde olacak ve bu linke tıklandığında myresim id’li büyük resim resim-1.jpg olarak değişecek.

yöntem 2’de resim linkimiz yine <a href="javascript:;" onclick="myResim(‘resim-1.jpg’);">resim 1</a> şeklinde olacak ve bu linke tıklandığında resimdiv id’li taşıyıcı içinde resim-1.jpg dosyası görüntülenecek.

Detaylı kaynak kodu:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1254" />
<title>Egonomik.com :: Javascript resim scripti</title>
<script type="text/javascript">
function myResim(aydi){
    // Yöntem 1: Resmi değiştirme
    // document.myresim.src =  ""+ aydi +"";
   
    // Yöntem 2: Taşıyıcı div'e html import etme
    document.getElementById("resimdiv").innerHTML = "<img name="myresim" src=""+ aydi +"" />";
}
</script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>

<center>
    <h2>Egonomik.com // Javascript resim scripti</h2>
   
    <div id="container" align="center">

       
        <div id="resimdiv" name="resimdiv">
        <img name="myresim" src="http://www.egonomik.com/wallpaper/grunge/egonomik.com-grunge-wallpaper-01.jpg" />
        </div>

        <div id="thumb">
         <a href="javascript:;" onclick="myResim('http://www.egonomik.com/wallpaper/grunge/egonomik.com-grunge-wallpaper-02.jpg');"><img src="images/resim1.jpg" width="100" /></a>
         <a href="javascript:;" onclick="myResim('http://www.egonomik.com/wallpaper/grunge/egonomik.com-grunge-wallpaper-09.jpg');"><img src="images/resim2.jpg" width="100" /></a>
         <a href="javascript:;" onclick="myResim('http://www.egonomik.com/wallpaper/grunge/egonomik.com-grunge-wallpaper-01.jpg');"><img src="images/resim3.jpg" width="100" /></a>
         <a href="javascript:;" onclick="myResim('http://www.egonomik.com/wallpaper/grunge/egonomik.com-grunge-wallpaper-18.jpg');"><img src="images/resim4.jpg" width="100" /></a>

         <a href="javascript:;" onclick="myResim('http://www.egonomik.com/wallpaper/grunge/egonomik.com-grunge-wallpaper-03.jpg');"><img src="images/resim5.jpg" width="100" /></a>
        </div>
       
    </div>
       
        <a href="http://www.egonomik.com/">Egonomik.com</a> |
        <a href="http://www.egonomik.com/tag/script/">Diğer scriptler</a>
   
    </center>
</body>
</html>

Stil dosyası (style.css):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
body {
    color: #6F6F6D;
    font-family: Georgia;
    font-size: 10px; }

#container {
    width: 580px;
    padding-top: 15px;
    padding-bottom: 15px;
    border: 1px solid #e2e2e2;
    background: #F5F5F5;
    margin: 10px;
    }

#resimdiv {
    width: 400px;
    background-color: #91918E;
    background-image: url('images/loading.gif');
    background-repeat: no-repeat;
    background-position: center;
    }
   
#resimdiv img {
    width: 400px;
    height: 300px;
    border: 2px solid #e2e2e2; 
    }

#thumb {
    margin-top: 15px;
    }

#thumb img {
    width: 100px;
    height: 75px;
    border: 2px solid #e2e2e2;
    }

Scriptin detaylı örneği:
Demo

Scripti İndir (160 Kb):
Download

Facebook Yorumları

17 Yorum

  1. Ellerine sağlık, teşekkür ederim 🙂 denedim, böyle birşey lazımdı 😉
    Yalnız şu alttaki captcha kodlarını doğru girmeme rağmen “yanlış girdiğim için” yeniden yorum kısmına yönlendiriyor beni. Geçen gün uzun bir yazı yorum yazmıştım, kara deliğe karıştı gitti yazdıklarım..

    • harun

      bi sorum olucak

      şu linkdeyi olayı yapmaya çalışıyorum div resmin boyutunu değiştiriyor mesela width 500 height 300 resmin boyutu fakat div taşırken resmin boyutunu 900 küsür yapıyor benim istediğim resim büyük de olsa küçükde olsa çerçevenin dışına taşması hürrriyet emlak gibi çerçevenin içinde kalıcak küçükse küçük gözükücek büyüksede çervenin içine sıgıcak ama resmi sündürmicek yani ölçünün içine yerleştirmeye çalışmıcak gerekirse küçük gözükücek hürriey emlak’ daki resimler hibi netliği bozulmasın yardımınızı bekliyorum tşk ederim

  2. Caner
    Yazar

    Allah cezasını versin o capthcanın Ramazan, çok yapıyor aynı şeyi ama malum spamlara karşı en etkili çözüm. O kodu girmemek için aslında on saniyede kayıt olabilirsin hani üye etmeye teşvik olarak algılama zaten üye olmanın herhangi başka bir avantajı yok 🙂

  3. etk

    sahibinden.com o kadar amatör bir site ki şuan itibariyle odtü serverlarına ban koyduğu için kampüs içinde ki bilgisayarlardan sahibinden.com istesi açılmamakta… 🙂 sonra siteye güvenebileceğimizi söylüyorlar komik duruma düşüyorlar… 😀

  4. Atom

    Aslında bu kodları az biraz oynamayla wordpress için uygun hale getirsek çokda güzel olur dadından yenmez , gelip gelip bu sayfaya bakiom aynı şeyleri düşünüp duruom en sonunda yazim dedim 🙂

  5. Atom

    Yaptım ve gayet güzel oldu uygulamalı olarak anlatıyorum önce resimler
    Resim1
    http://img23.imageshack.us/img23/2465/68861479.jpg
    bu resimde konuyu açarken kullandığım anahtarlar

    Resim2
    http://img263.imageshack.us/img263/401/62215508.jpg
    Eklediğim kodlar
    Kod:

    <div id=”resimdiv” name=”resimdiv”>
    <img name=”myresim” src=”<?php echo get_post_meta($post->ID, “thumb2″, true); ?>” width=”240″ height=”290″ />
    </div>   

    <div id=”thumbx”>

    <a href=”javascript:;” onclick=”myResim(‘<?php echo get_post_meta($post->ID, “tm1″, true); ?>’);”>
    <img src=”<?php echo get_post_meta($post->ID, “tm1″, true); ?>” width=”10″ height=”10″ /></a>

    <a href=”javascript:;” onclick=”myResim(‘<?php echo get_post_meta($post->ID, “tm2″, true); ?>’);”>
    <img src=”<?php echo get_post_meta($post->ID, “tm2″, true); ?>” width=”10″ height=”10″ /></a>

    <a href=”javascript:;” onclick=”myResim(‘<?php echo get_post_meta($post->ID, “tm3″, true); ?>’);”>
    <img src=”<?php echo get_post_meta($post->ID, “tm3″, true); ?>” width=”10″ height=”10″ /></a>

    <a href=”javascript:;” onclick=”myResim(‘<?php echo get_post_meta($post->ID, “tm4″, true); ?>’);”>
    <img src=”<?php echo get_post_meta($post->ID, “tm4″, true); ?>” width=”10″ height=”10″ /></a>

    </div>

    “thumbx” benim kullandığım kodlarla karışıklık olmasın diye style.css dosyasından da thumx olarak değiştirdim

    Buraya kadar herşey iyigüzel fakat birtane resim eklediğim konularda resimin altında ufak bir kutucuk çıkıyor o kutucuğa tıklayınca eklediğim birtane resimde kayboluyor

    Caner usta ben buraya kadar yaptımda burda takıldım senin engin php bilginden bir yardım istiyorum. Şimdi eklediğim kodların üstüne bir php kodu eklemeli ve  konuya hangi anahtar eklendiyse konu sayfası açıldığında sadece ekranda o özel anahtarlara ait resimler olmalı böylece iki yada üçtane resim eklendiğinde diğer resimlerin yanında kutucuk çıkmasın, usta şuna bir püf diyiverde wordpress camiası hayrını görsün 🙂

  6. Atom

    Aradan bir hafta sonra tekrar bu başlıkdayım ve şuanda aradığım kodları buldum caner usta
    ———————————————————————————-
    <div id=”thumbx”>
    <?php
    $values = get_post_custom_values(“tm1″);
    if ($values[0]!=”) { ?>
    <a href=”javascript:;” onclick=”myResim(‘<?php echo $values[0]; ?>’);”>
    <img src=”<?php echo $values[0]; ?>” width=”50″ height=”50″ /></a>
    <?php } ?>

    <?php
    $values = get_post_custom_values(“tm2″);
    if ($values[0]!=”) { ?>
    <a href=”javascript:;” onclick=”myResim(‘<?php echo $values[0]; ?>’);”>
    <img src=”<?php echo $values[0]; ?>” width=”50″ height=”50″ /></a>
    <?php } ?>

    <?php
    $values = get_post_custom_values(“tm3″);
    if ($values[0]!=”) { ?>
    <a href=”javascript:;” onclick=”myResim(‘<?php echo $values[0]; ?>’);”>
    <img src=”<?php echo $values[0]; ?>” width=”50″ height=”50″ /></a>
    <?php } ?>

    <?php
    $values = get_post_custom_values(“tm4″);
    if ($values[0]!=”) { ?>
    <a href=”javascript:;” onclick=”myResim(‘<?php echo $values[0]; ?>’);”>
    <img src=”<?php echo $values[0]; ?>” width=”50″ height=”50″ /></a>
    <?php } ?>

    <?php endwhile; ?>
    <?php endif; ?>
    </div>
    —————————————————————————————–
    Kodları bu şekilde single.php sayfasına eklediğimde sorunsuz bir şekilde çalıştı ,bu kodların üstünde biraz daha çalışılarak çokgüzel resim galerisi oluşturulabilir

  7. Caner Bey

    Hocam opencart tema ma iki gündür kafa patlatıyorum
    bunu ürün resminin olduğu yere nasıl koyabilirim

Uyarı: Yorumlarda link kullanmayınız. Link içeren yorumlar otomatik olarak spam kabul edilmektedir.

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir