Jquery yardım.

Arkadaşlar bu linkteki örnek ürünü birden fazla koymak istiyorum ama yapamadım yardım edebilir misiniz? yani şöyle eticaret sitesi düşünün ve vitrinde bu yapılmış olan uygulamadan yan yana birden fazla gösterilmesini istiyorum. Şimdiden teşekkürler.

li.renk1 ' i artır renk15'e kadar. İmg id'yide aynı şekilde artır ?

Renk ve ürün resmi değil arttırmak istediğim yanlış anlattım sanırım. şu şekilde arttırmak istiyorum bu linkten bakabilirsin.

Yok mu yardım edebilecek biri??

1- cssim.css dosyasını açın, aşağıdaki kodu bulun

.slideshow {
	background: rgb(250, 250, 250); border: 1px solid rgb(229, 229, 229); width: 204px; height: 375px; margin-bottom: 20px; position: relative; 
}

2- Aşağıdaki kod ile değiştirin

.slideshow {
	background: rgb(250, 250, 250); border: 1px solid rgb(229, 229, 229); width: 204px; height: 375px; margin-bottom: 20px; position: relative; float:left;
}

3- html dosyasını açın ve aşağıdaki kodları kopyalayıp yapıştırarak istediğiniz kadar orderbox oluşturun.

<!-- Orderbox start -->
<DIV class="slideshow">
<UL class="recentlist">
  <LI class="renk1"><A href="http://ilkerismailoglu.com/ornek/#slide1"></A></LI>
  <LI class="renk2"><A href="http://ilkerismailoglu.com/ornek/#slide2"></A></LI>
  <LI class="renk3"><A href="http://ilkerismailoglu.com/ornek/#slide3"></A></LI>
  <LI class="renk4"><A href="http://ilkerismailoglu.com/ornek/#slide4"></A></LI>
  <LI class="renk5"><A href="http://ilkerismailoglu.com/ornek/#slide5"></A></LI>
  <LI class="renk6"><A href="http://ilkerismailoglu.com/ornek/#slide6"></A></LI>
  <LI class="renk7"><A href="http://ilkerismailoglu.com/ornek/#slide7"></A></LI>
  <LI class="renk8"><A 
href="http://ilkerismailoglu.com/ornek/#slide8"></A></LI></UL><IMG id="slide1" 
alt="Image 1 slideshow" src="Timothy%20van%20Sas%20-%20Simple%20slideshow%20in%20jQuery_dosyalar/2.png"><IMG 
id="slide2" alt="Image 2 slideshow" src="Timothy%20van%20Sas%20-%20Simple%20slideshow%20in%20jQuery_dosyalar/3.png"><IMG 
id="slide3" alt="Image 3 slideshow" src="Timothy%20van%20Sas%20-%20Simple%20slideshow%20in%20jQuery_dosyalar/4.png"><IMG 
id="slide4" alt="Image 4 slideshow" src="Timothy%20van%20Sas%20-%20Simple%20slideshow%20in%20jQuery_dosyalar/2.png"><IMG 
id="slide5" alt="Image 5 slideshow" src="Timothy%20van%20Sas%20-%20Simple%20slideshow%20in%20jQuery_dosyalar/3.png"><IMG 
id="slide6" alt="Image 6 slideshow" src="Timothy%20van%20Sas%20-%20Simple%20slideshow%20in%20jQuery_dosyalar/4.png"><IMG 
id="slide7" alt="Image 7 slideshow" src="Timothy%20van%20Sas%20-%20Simple%20slideshow%20in%20jQuery_dosyalar/2.png"><IMG 
id="slide8" alt="Image 8 slideshow" src="Timothy%20van%20Sas%20-%20Simple%20slideshow%20in%20jQuery_dosyalar/3.png">
<DIV class="yeniurunadi">ürün adı Buraya Gelecek</DIV>
<DIV class="yeniurunmarka">ürün MArkası Buraya Gelecek</DIV>
<DIV class="yeniurunfiyat"><STRIKE>320.00 TL</STRIKE>             
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;             120.00 TL        
</DIV></DIV>
<!-- Orderbox end-->

öncelikle yardımın için teşekkür ederim ama senin dediğin şekilde yaptığımda bu linkteki gibi oluyor. Bu linkteki de seninkini düzenlediğimde olan istediğim oluyor ama birine geldiğimde diğer resimler kayboluyor. bunu nasıl çözerim.

li etiketindeki #slide1 değerini, img etiketindeki slide1 ve resim yolunu (src) düzenleyerek sorunu giderebilirsiniz. Her kutuda her resim için bu değerleri değiştireceksiniz.

<LI class="renk1"><A href="http://ilkerismailoglu.com/ornek/#slide1"></A></LI>

<IMG id="slide1" 
alt="Image 1 slideshow" src="Timothy%20van%20Sas%20-%20Simple%20slideshow%20in%20jQuery_dosyalar/2.png">

Evet dediğin gibi yaptım tek sorun kalıyor birinin üzerine gelince diğerlerin resmi yok oluyor buradan kontrol edebilirsin.

jquery konusunda pek iyi değilim, yapmaya çalışacağım. Bu süreçte jquery bilen biri yardımcı olursa iyi olur.

jquery kodlarını aşağıdaki kodlar ile değiştirdiğinizde sorun kalmayacaktır.

<script type="text/javascript">
    $(document).ready(function () {
        $.each($('.slideshow'), function (i, alan) {
            $.each($(alan).find("img"), function (j, resim) {
                if (j == "0")
                    $(resim).show();
                else
                    $(resim).hide();
            });
        });

        $('ul.recentlist li a').hover(function () {
            var imgWrapper = $(this).parent().parent().parent().find("img");
            imgWrapper.hide()
            imgWrapper.filter(this.hash).fadeIn(300);
        });
    });
</script>