Milot25
Reputation: 337
Magnific popup displays only the first id
<!-- Start of Quick View -->
<div class="product product-single product-popup" id="popup_detail<?php echo $row[0]; ?>" >
<div class="row gutter-lg">
<div class="col-md-6 mb-4 mb-md-0">
<div class="product-gallery product-gallery-sticky">
<div class="swiper-container product-single-swiper swiper-theme nav-inner">
<div class="swiper-wrapper row cols-1 gutter-no">
<?php
for ($i = 0; $i < count($images)-1; $i++)
{
?>
<div class="swiper-slide">
<figure class="product-image">
<img src="images/images/gallery/preview/<?php echo trim($images[$i]); ?>"
data-zoom-image="images/images/gallery/original/<?php echo trim($images[$i]); ?>"
alt="Water Boil Black Utensil" width="800" height="900">
</figure>
</div>
<?php
}
?>
</div>
<button class="swiper-button-next"></button>
<button class="swiper-button-prev"></button>
</div>
<div class="product-thumbs-wrap swiper-container" data-swiper-options="{
'navigation': {
'nextEl': '.swiper-button-next',
'prevEl': '.swiper-button-prev'
}
}">
<div class="product-thumbs swiper-wrapper row cols-4 gutter-sm">
<?php
for ($i = 0; $i < count($images)-1; $i++)
{
?>
<div class="product-thumb swiper-slide">
<img src="images/images/gallery/preview/<?php echo trim($images[$i]); ?>" alt="Product Thumb" width="103"
height="116">
</div>
<?php
}
?>
</div>
<button class="swiper-button-next"></button>
<button class="swiper-button-prev"></button>
</div>
</div>
</div>
<div class="col-md-6 overflow-hidden p-relative">
<div class="product-details scrollable pl-0">
<h2 class="product-title">A</h2>
<div class="product-bm-wrapper">
<figure class="brand">
<img src="assets/assets/images/products/brand/brand-11.jpg" alt="Brand" width="102" height="48" />
</figure>
<div class="product-meta">
<div class="product-categories">
Kategoria:
<span class="product-category"><a href="#">Elektronikë</a></span>
</div>
<div class="product-sku">
ID: <span><?php echo $row[0]; ?></span>
</div>
</div>
</div>
<hr class="product-divider">
<div class="product-price"><?php echo $row["product_price"]; ?> €</div>
<div class="ratings-container">
<div class="ratings-full">
<span class="ratings" style="width: 80%;"></span>
<span class="tooltiptext tooltip-top"></span>
</div>
<a href="#" class="rating-reviews">(3 Blerje)</a>
</div>
<div class="product-short-desc">
<ul class="list-type-check list-style-none">
<li>Mikro-Çip Eksternal 1GB+</li>
<li>Ekrani Touch Screen TFT LCD me kamerë front face</li>
<li>Përgjigje apo thirrje direkte nga ora</li>
</ul>
</div>
<hr class="product-divider">
<div class="product-form product-variation-form product-color-swatch">
<label>Ngjyra:</label>
<div class="d-flex align-items-center product-variations">
<a href="#" class="color" style="background-color: #ffcc01"></a>
<a href="#" class="color" style="background-color: #ca6d00;"></a>
<a href="#" class="color" style="background-color: #1c93cb;"></a>
<a href="#" class="color" style="background-color: #ccc;"></a>
<a href="#" class="color" style="background-color: #333;"></a>
</div>
</div>
<div class="product-form product-variation-form product-size-swatch">
<label class="mb-1">Madhësia:</label>
<div class="flex-wrap d-flex align-items-center product-variations">
<a href="#" class="size">S</a>
<a href="#" class="size">L</a>
<a href="#" class="size">XL</a>
<a href="#" class="size">XXL</a>
</div>
<a href="#" class="product-variation-clean">Hjek filtrin</a>
</div>
<div class="product-variation-price">
<span></span>
</div>
<div class="product-form">
<div class="product-qty-form">
<div class="input-group">
<input class="quantity form-control" type="number" min="1" max="10000000">
<button class="quantity-plus w-icon-plus"></button>
<button class="quantity-minus w-icon-minus"></button>
</div>
</div>
<button class="btn btn-primary btn-cart">
<i class="w-icon-cart"></i>
<span>Shto në shportë</span>
</button>
</div>
<div class="social-links-wrapper">
<div class="social-links">
<div class="social-icons social-no-color border-thin">
<a href="#" class="social-icon social-facebook w-icon-facebook"></a>
<a href="#" class="social-icon social-twitter w-icon-twitter"></a>
<a href="#" class="social-icon social-pinterest fab fa-pinterest-p"></a>
<a href="#" class="social-icon social-whatsapp fab fa-whatsapp"></a>
<a href="#" class="social-icon social-youtube fab fa-linkedin-in"></a>
</div>
</div>
<span class="divider d-xs-show"></span>
<div class="product-link-wrapper d-flex">
<a href="#" class="btn-product-icon btn-wishlist w-icon-heart"><span></span></a>
<a href="#"
class="btn-product-icon btn-compare btn-icon-left w-icon-compare"><span></span></a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End of Quick view -->
When user clicks, show popup dialog
<div class="product-action"><a href="#popup_detail<?php echo $row[0]; ?>" name="item_detail" id="B" class="popup-with-zoom-anim btn-quickview"><i class="fa fa-eye fa-2x" aria-hidden="true" style="color:#696b6a; margin-top: -5px;"></i>Show Detail</a>
The result is the same for all items, that means when click 'Show Detail' link, it displays only the first item in the fetched list query. However, if we inspect the page for a moment we can see that all the element items in the loop have been loaded properly with images and other corresponding data.
As you can see from the code, the popup dialog id is unique id="popup_detail<?php echo $row["item_id"]; ?>" with the 'Show Detail' link a href="#popup_detail<?php echo $row["item_id"]; ?>"
I have tried to put the entire Quick View section outside the while loop, but then it shows the last item id from the query fetched! In fact, it doesn't show the data (id, item_name) but the item images only! I'm stuck trying to solve this for days and still not able to make it working.
Thank you.
Upvotes: 0
Views: 73
Answers (0)
Related Questions
- How do I get a YouTube video thumbnail from the YouTube API?
- How do I disable the resizable property of a textarea?
- Retrieve the position (X,Y) of an HTML element
- How can I set the default value for an HTML <select> element?
- How to make a div 100% height of the browser window
- Get the size of the screen, current web page and browser window
- Make a div fill the height of the remaining screen space
- How do I modify the URL without reloading the page?
- How do I reduce the opacity of an element's background using CSS?
- Get the first element of an array