
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. Yazinin devamini okuyun »