En iyi yanıtlayıcılar
popup/quickview mantığı

Soru
-
Merhaba,quickview duymuşsunuzdur sitede bir ürüne tıklayınca başka sayfada açılmak yerine aynı sayfada popup olarak açılıyor bir yerden hazır bitane buldum kodları aşağıda vericem çok karışık değil zateni,hazır bulduğum örnek çalışıyor ama hangisine tıklarsam tıklayım hep popupta hep aynı resmi ve yazıyı gösteriyo ben doğal olarak bir ürüne tıkladığımda açılan popupta tıkladığım ürüne ait bilgileri göstersin istiyorum kendimce 1-2 şey denedim ama beceremedim kodları vereyim size
<ul class="cd-items cd-container"> <li class="cd-item"> <img src="img/item-123123.jpg" alt="Item Preview"> <a href="#1" class="cd-trigger">Quick View</a> </li> <!-- cd-item --> <li class="cd-item"> <img src="img/item-2.jpg" alt="Item Preview"> <a href="#0" class="cd-trigger">Quick View</a> </li> <!-- cd-item -->
</ul> <!-- cd-items --> <div class="cd-quick-view"> <div class="cd-slider-wrapper"> <ul class="cd-slider"> <li class="selected"><img src="img/item-1.jpg" alt="Product 1"></li> <li><img src="img/item-2.jpg" alt="Product 2"></li> <li><img src="img/item-3.jpg" alt="Product 3"></li> </ul> <!-- cd-slider --> <ul class="cd-slider-navigation"> <li><a class="cd-next" href="#0">Prev</a></li> <li><a class="cd-prev" href="#0">Next</a></li> </ul> <!-- cd-slider-navigation --> </div> <!-- cd-slider-wrapper --> <div class="cd-item-info"> <h2>Produt Title</h2> <p>asd</p> <ul class="cd-item-action"> <li><button class="add-to-cart">Add to cart</button></li> <li><a href="#0">Learn more</a></li> </ul> <!-- cd-item-action --> </div> <!-- cd-item-info --> <a href="#0" class="cd-close">Close</a> </div> <!-- cd-quick-view -->
- Düzenleyen NScoder54 10 Mart 2016 Perşembe 19:14
Yanıtlar
-
Sadece resimler için düşünüyorsanız bu konuda çok fazla uygulama var. Lightbox bunlardan biri sadece
https://www.nuget.org/packages?q=lightbox
Ama yanında info, sepet butonu gibi şeyler düşünüyorsanız Modal div ile kendiniz de yapabilirsiniz.
http://www.w3schools.com/bootstrap/bootstrap_modal.asp
- Düzenleyen Halil TAŞ 11 Mart 2016 Cuma 09:59
- Yanıt Olarak İşaretleyen Serkan Canseven 11 Mart 2016 Cuma 10:25
-
Ajax modal diye aratırsan , çözüm bulabilirsin. Açılacak sayfayı popup içinde açarsın.
Dynamic (AJAX) loaded Bootstrap Modal.
http://jsfiddle.net/koala_dev/NUCgp/918/
Tüm Yanıtlar
-
-
-
JavaScript kodunda değişiklikler yapmanız gerekiyor. Hem resimler hem yandaki info bölümü için. Ayrıca resimleriniz aynı büyüklükte değilse bunun için de düzenleme yapmanız gerekiyor. Çünkü resimleri aynı bölüme üste üste basıyor. Öndeki resim küçükse altından diğer resim görünüyor. İlk izlenim olarak kodlaması peki iyi değil bence. Baya bir uğraşmanız gerekiyor.
-
-
Sadece resimler için düşünüyorsanız bu konuda çok fazla uygulama var. Lightbox bunlardan biri sadece
https://www.nuget.org/packages?q=lightbox
Ama yanında info, sepet butonu gibi şeyler düşünüyorsanız Modal div ile kendiniz de yapabilirsiniz.
http://www.w3schools.com/bootstrap/bootstrap_modal.asp
- Düzenleyen Halil TAŞ 11 Mart 2016 Cuma 09:59
- Yanıt Olarak İşaretleyen Serkan Canseven 11 Mart 2016 Cuma 10:25
-
Ajax modal diye aratırsan , çözüm bulabilirsin. Açılacak sayfayı popup içinde açarsın.
Dynamic (AJAX) loaded Bootstrap Modal.
http://jsfiddle.net/koala_dev/NUCgp/918/ -