Kodları lütfen aşağıdaki butonları kullanarak renklendirin. Örnek: <php> echo "Selam Dünya"; </php>
Yardım
karakter kaldı

jQuery de ürün sliderı yaparken bir sorunla karşılaştım

Arkadaşlar yeni bir e-ticaret sistemi yapıyorum. Ürünleri listeletirken müşterinin isteği ile bir sonraki detay sayfası olmayacak ve o anda listelenen her ürünün 4 fotoğrafını güzel bir şekilde yerleştirmem gerekiyor. Bende bu hepsiburada da da kullanılan ürün fotoğraflarını gösterme olayını daha basit bi şekilde yapmak istiyorum. Yazdığım kodda istediğimi yapıyor fakat 2. ye tıklıyorum tüm ürünlerin 2. resmi gözüküyor ben sadece o anda tıklanılan alandaki 2. resmin gözükmesini istiyorum.

Html Şu şekilde: 
        <!-- Product Part -->
        <div class="productwrapper">
            <h4>Çift Taraflı Kartvizit</h4>
            <span>Ürün hakkında kısa ve öz bilgi gelicek. Lorem ipsum dolor sit amet. Ürün hakkında kısa ve öz bilgi gelicek. Lorem ipsum dolor sit amet.</span>
            <div class="productimg">
                <ul>
                    <li class="lifirst"><a href="#"><img src="images/sample01.png" /></a></li>
                    <li><a href="#"><img src="images/sample02.png" /></a></li>
                    <li><a href="#"><img src="images/sample03.jpg" /></a></li>
                    <li><a href="#"><img src="images/sample04.jpg" /></a></li>
                </ul>
            </div>
            <div class="liorder">
                <span>1</span><span>2</span><span>3</span><span>4</span>
            </div>
            <div class="productinfo">
                <ul>
                    <li><label>Kağıt Tipi</label>270 gr. A4 Kuşe Kağıt</li>
                    <li><label>Ürün Kodu</label>INS-0554222-00</li>
                    <li><label>Fiyat</label>1000 Adet » 125 TL</li>
                </ul>
            </div>    
        </div>


jQuery ise: 
// PRODUCT SLIDER
jQuery.fn.productSlider = function(){
    $('.productimg li').hide();
    $('.lifirst').show();
    
    $('.liorder span').click(function(){
        var getindex = $(this).index();
        $('.productimg li').hide();
        $('.liorder').parent().find('.productimg li:eq('+getindex+')').show();      
    });
}

$(document).ready(function(){
   $('.productwrapper').productSlider();
});

Ekli Dosyalar

+0
-0
Cevaba KatılıyorumKatılmıyorum 		Cevap Yaz Yorum Yaz Arşivime Ekle Takip Et

Cevaplar

  • kralmermi adlı üyenin fotoğrafı
    12 yıl önce yazılmış
    kralmermi
    102 cevap - 6 soru
    hocam mantik basit o urune ait resimleri bulup vericeksin sonrasini js kendi yapar zaten hangi urun ise onun resimlerini cektir. olsun bitsin.
    • GncArt adlı üyenin fotoğrafı GncArt
      Eğer ürün detay sayfası olsaydı zaten sorun yok istediğim fotoğrafları çektirip direkt js ye bırakırım. Ama sayfada aynı class lara sahip 5 ürün listeleniyo ve her ürünün 4 resmi var ekteki resime bakarsan anlıcaksın ve yanlarındaki rakamlara tıkalyınca sadece o ürünün fotoğrafları değişmeli. Diğerleri sabit kalmalı. Şu anda yazdığım kod ile hangi rakama tıklarsam tüm ürünlerin resimleri değişiyor.
      12 yıl önce yazılmış
    • kralmermi adlı üyenin fotoğrafı kralmermi
      ÜRün Detay sayfasına ihtiyacın yokki hocam sonucta dongu ile gelmiyormu 5 tane urun

      $Sorgu = mysql_query("............................................................");
      while($Sonuc=mysql_fecth_assoc($Sorgu))
      {
      // seklinde bi sorgu ile geldigini farz edelim div yada table

      <div>baslik</div>
      <div>yazi</div>
      <div>
      resimler

      buraya bir sorgu daha atarsin
      $SorguResim=mysql_query(".......................... WHERE urunid='".$Sonuc[id]."' LIMIT 4");
      $i=1;
      while($SonucResim=mysql_fetch_assoc($SorguResim))
      {
      $resimno = "resim".$i;
      echo $SonucResim[$resimno];
      $i++;
      }
      demek istedigim while icine bir while atarsin olur biter :) tablo yapini koyarsan buraya ona göre bir sonucta cikartirim :)

      </div>


      }
      12 yıl önce yazılmış
    • GncArt adlı üyenin fotoğrafı GncArt
      Dostum resimlerde sorun yok onları elbetteki çekiyorum her ürüne ait 4 resmi. Benim yapmak istediğim ise:

      - Her ürünün 4 resmi var ve ilk açılışta her ürünün ilk resmi gözüküyor diğer 3 resim sayfaya yükleniyor ama gösterilmiyor. Onları göstermek içinse yanlarında 1 den 4 e kadar buton var. Atıyorum A ürününde 2. butona tıkladım ve A ürünün 2. fotorafı açılacak o tek kare alanda. 3 tıklayorum 3. açılacak. Lütfen resimii incele.

      Sorun ise:
      A nın 2. sine tıkladığımda, B ninde C ninde D ninde E ninde 2. fotoğrafı her birisine ait okarede açılıyor. Bense A da 2. ye tıkladığımda sadece A nın 2. fotoğrafının açılmasını istiyorum.

      Kodlarda yukarıda mevcut..
      12 yıl önce yazılmış
    • GncArt adlı üyenin fotoğrafı GncArt
      Bana php değil javascript kodu lazım. Üstte yazdığım kod dediğim problemi yapıyor. Buna nasıl bir ekleme veya çıkartma yaparsak sorunu çözeriz.
      12 yıl önce yazılmış
    • kralmermi adlı üyenin fotoğrafı kralmermi
      Hocam şimdi anladim problemini o zaman şöyle yapicaksin divlerini ayiricaksin

      şunu bi denermisin hocam

      urunlerin gelirken resimlerin oldugu anadivin adini productwrapper1 productwrapper2 productwrapper3 productwrapper4 olacak sekilde yapip sonra


      jsni
      $(document).ready(function(){
      $('.productwrapper1').productSlider();
      });

      $(document).ready(function(){
      $('.productwrapper2').productSlider();
      });

      $(document).ready(function(){
      $('.productwrapper3').productSlider();
      });

      $(document).ready(function(){
      $('.productwrapper4').productSlider();
      });

      olacak şekilde ayarlarsan istedigin gibi çalışacağı kanısındayim ilk aklıma gelen bu oldu
      12 yıl önce yazılmış
    • GncArt adlı üyenin fotoğrafı GncArt
      Teşekkür ederim bu da bir yöntem ama atıyorum sayfada 100 ürün olsaydı 100 tane ayrı kod yazacaktık jQuery için. İsteğim tek fonksiyonla işi halletmek.
      12 yıl önce yazılmış
    • kralmermi adlı üyenin fotoğrafı kralmermi
      hocam o zaman jquery fonksiyonuna deger gondericeksin ama yinede divleri ayirman gerekiyor 4 tane ayri ayri yazmak yerine o zaman deger gonderip divin degerini aticaksin fonksiyonuna bu kullandigin jquery ile bunu nasil yapicaksin suan icin kestiremiyorum.
      12 yıl önce yazılmış