none
popup/quickview mantığı RRS feed

  • 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
    10 Mart 2016 Perşembe 19:13

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


    11 Mart 2016 Cuma 09:58
  • 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/
    • Yanıt Olarak Öneren İlkyhan 11 Mart 2016 Cuma 15:42
    • Yanıt Olarak İşaretleyen NScoder54 11 Mart 2016 Cuma 16:46
    11 Mart 2016 Cuma 15:34

Tüm Yanıtlar

  • Burada item-1,item2 ve item-3 adlı resimler sabit. Eğer JS kodunda bir işlem yapılmıyor ise daima bu üç resmi açar slider formatında. 
    11 Mart 2016 Cuma 05:52
  • ben bunu nasıl istediğim hale getiririm
    11 Mart 2016 Cuma 07:13
  • 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.
    11 Mart 2016 Cuma 07:33
  • normalde illa bu şekilde yapmam gerekmiyor  ama bu ziyaretçiler için güzel bir tecrübe olacağı için mümkünse bu şekilde yapmaya çalışıyorum.Varsa başka bilidğiniz yada öneriniz paylaşın lütfen.
    11 Mart 2016 Cuma 09:43
  • 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


    11 Mart 2016 Cuma 09:58
  • 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/
    • Yanıt Olarak Öneren İlkyhan 11 Mart 2016 Cuma 15:42
    • Yanıt Olarak İşaretleyen NScoder54 11 Mart 2016 Cuma 16:46
    11 Mart 2016 Cuma 15:34
  • deniyeceğim teşkkürler
    11 Mart 2016 Cuma 16:42