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

İlginizi Çekebilecek Diğer İçerikler

Facebook Yorumları

17 Yorum

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