Javascript ile Sahibinden.com benzeri resim galerisi

Yazar: Caner | 25 Mart 2010 Perşembe 18:05
Kategori: Ajax & Jquery, Web Tasarım
4 Yorum


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


Benzer Yazılar

Javascript ile göster/gizle özelliği (Show/hide)

Forumlarda, alışveriş sitelerinde ve blog temalarında buna benzer özelliklerin sıkça kullanıldığını görebilirsiniz. Bizim ufacık scriptimiz de div, span, resim veya devamı»

Jquery – Interaktif resim scripti (Interactive Picture)

Jquery ile hazırlanmış oldukça kullanışlı bir interaktif resim scripti. Bu scriptle sitenizde yer alan resimlere Facebook resim etiketleme işlevinde olduğu devamı»

DHTML Javascript resim galerisi

DHTML yani Dinamik HTML ile oluşturulmuş bir resim (image slider) scripti. Bu gibi uygulamalarla sitenizde Flash’a gerek kalmadan hareketli nesneler devamı»

CSS ve Javascript ile Modal Dialog / Reklam Kutusu yapımı

Daha önce şu yazımda javascript ile zamanlama fonksiyonu hazırlamayı, şu yazımda ise CSS ile site üzerinde kayan reklam hazırlamayı anlatmıştım. Şimdi devamı»

Javascript ile Kayan Resim Scripti

Javascript kullanarak sağa-sola veya yukarı-aşağı kayan resimler, nesneler içeren bir script tasarlayacağız. Bunun için satırlarca kod yazmak yerine <marquee> ifadesinden devamı»


4 Yorum » “Javascript ile Sahibinden.com benzeri resim galerisi”

  1. Ramazan

    30 Mart 2010 [14:46]

    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..

  2. Caner

    30 Mart 2010 [15:13]

    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. ramazan

    30 Mart 2010 [15:21]

    Ha şöyle ya.. iyi oldu böyle :)

  4. etk

    1 Haziran 2010 [00:32]

    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… :D

Yorum Bırakın

(Anonim yorumları kabul etmiyoruz)


Yorum yazarken güvenlik kodu girmek istemiyorsanız siteye üye olabilirsiniz.

«
»