Eticaret Ürün Gösterimi

Merhaba arkadaşlar, aşağıdaki şekilde bir css yapım var. Bunu alttaki küçük görsellere tıklandığında üstte büyük hali açılması işlemini jq ile nasıl yapabilrim ?



Google de tam olarak ne yazıp aratacağımı bilemediğim için buradan sormak istedim.

Merhaba,

html yapınızı bilmediğim için yine her zamanki gibi atmasyon bir yanıt vermeye çalışacağım.

alttaki resimleriniz <ul class="tiklanacakufaklar"><li><img src=""></li> şeklinde olduğunu varsayalım.
üstteki büyük resmin de
<img src="xxx" class="buyukresim"> gibi bi şey olduğunu varsayalım.

alttaki ufak resimlerin thumbnail mı yukarıdaki büyük resim boyutundan rescale edilmiş hali mi bilemiyoruz. haliyle atarak onu da scale edilmiş orjinal varsayalım.

$(function(){
$(".tiklanacakufaklar li").click(function(){
$(".buyukresim").attr("src",$(this).attr("src")) ;
});
});

Eğer küçük resimler thumbnail ise o zaman üstteki resmin kaynağını değiştirmek için büyük ismi bi şekilde edinmemiz gerek.

O datayı li içindeki img 'ye bir data-attribute olarak eklerseniz erişiminiz kolay olacaktır.
<ul class="tiklanacakufaklar"><li><img src="urun-resmi-kucuk.jpg" data-original="urun-resmi-orjinalx.jpg"></li>

gibi olduğunu varsayarsak;
$(".tiklanacakufaklar li").click(function(){
$(".buyukresim").attr("src",$(this).attr("data-original"));
});

gibi...

Soru çok genel haliyle çokca yanıtı var fakat anlaşılır olması için böyle kolay bi "atış senaryosu" kullandım


umarım az da olsa fikir vermiştir.

kolaylıklar.