Refering to this question , it has a helpful answer but it's partial answer because it only shows three unique popup dialogs - static.
I'm new to jQuery and working in this project. I want this to be dynamic with MySql database. Let's say I have a collection of 20 products stored in a tbl_products and each product has a uniqe id, name and price. When user clicks for more product details, I want to display the Magnific popup dialog that shows the product details, showing the product image(small thumbnail), product name and product price.
This link is inside loop:
<a class="popup-with-zoom-anim" href="#small-dialog" data-item="<?php echo $row["product_id"]; ?>">Open with fade-zoom animation</a><br>
Here is the Code:
<div class="page-content">
<?php
$query = "SELECT * FROM tbl_product ORDER BY product_id ASC LIMIT 20";
$result = mysqli_query($connect, $query);
$ctr = 0;
if(mysqli_num_rows($result) > 0)
{
$i = 0;
$param = 'right';
while($row = mysqli_fetch_array($result))
{
//echo "<h2>" . $row[0] . "</h2>";
$data = $row["product_image"];
$images = explode(";", $data);
if($param=='left'){
$param = "right";
}
else{
$param = "left";
?><div class="clear"></div><?php
}
?>
<a class="popup-with-zoom-anim" href="#small-dialog" data-item="<?php echo $row["product_id"]; ?>">Open with fade-zoom animation</a><br>
<div id="small-dialog" class="zoom-anim-dialog mfp-hide">
<span class="fa fa-check fa-3x" style="color: black; margin-left:45%;"></span>
<h3 style="text-align:center; margin-top:0px;margin-bottom:20px;">Artikulli u shtua në shportë</h3>
<div class="table-responsive" style="border: none !important;">
<table style="border: none !important;">
<tr>
<th width="80%"></th>
<th width="20%"></th>
</tr>
<tr>
<td style="font-size:12px;">
<div class="news-thumbs" style="margin-left:0px; margin-right:20px;">
<a href="#" class="news-item">
<div style="line-height: 0.5cm;border: 1px solid #ccc; margin-bottom:5px; width:100%; height:110px; border-radius: 10px; overflow: hidden; box-shadow: 0 2px 5px 1px rgba(0,0,0,0.1);">
<amp-img class="responsive-img" src="../../../../../images/images/gallery/preview/<?php echo $images[0]; ?>" width="100" height="100" layout="responsive"></amp-img>
<h5><?php echo $row[1];?></h5>
<p style "font-size:11px;">
<?php
foreach(range(1, $row[10]) as $i)
{
?>
<span class="fa fa-star checked" style="color: #ffa500;"></span>
<?php
}
?>
</p>
</div>
</a>
</div>
</td>
<td style="margin-left:-50px; font-size:28px; font-style:bold; line-height:20px;">€<?php echo $row[2];?> <br>
<p style="font-size:11px; font-style:bold;">TVSH - 8% </p>
<p style="font-size:10px; line-height:20px;">Dërgesa Falas</p>
<a href="m-detail-<?php echo $row[0]; ?>.html" style="font-size:11px; line-height:20px;"> Shiko detalet</a>
</td>
<td style="font-size:12px;"> </td>
</tr>
</table>
</div>
<hr style="border-top: 0.5px solid #E8E8FF;">
<button type="button" class="btn btn-default popup-modal-dismiss">Vazhdo me blerje</button>
<button type="button" style="float:right;" class="btn btn-primary">Kryje porosinë</button>
<!-- </div>
<div class="news-thumbs" style="margin-left:-50px;">
<a href="#" class="news-item">
<div style="line-height: 0.5cm;border: 1px solid #ccc; margin-bottom:5px; width:100%; height:110px; border-radius: 10px; overflow: hidden; box-shadow: 0 2px 5px 1px rgba(0,0,0,0.1);">
<amp-img class="responsive-img" src="../../../../../images/images/gallery/preview/<?php echo $images[0]; ?>" width="100" height="100" layout="responsive"></amp-img>
<h5><?php echo $row[1];?></h5>
<p><?php echo $row[2];?></p>
</div>
</a>
<hr style="border-top: 0.5px solid #E8E8FF;">
</div> -->
</div>
<a href="m-detail-<?php echo $row[0]; ?>.html">
<div class="half-material-box-<?php echo $param; ?>">
<span class="fa fa-heart-o fa-2x"style="color: red; aria-hidden="false";></span>
<!--<i class="center-text full-bottom huge-icon color-yellow-dark fa fa-bolt"></i>-->
<amp-img src="../../../../../images/images/gallery/preview/<?php echo $images[0]; ?>" layout="responsive" width="127" height="130"></amp-img>
<p class="center-text small-text half-bottom">
<!--<i class="fa fa-angle-right"></i><?php echo substr_replace($row[1], "...", 60);?>-->
</p>
<h3 class="small-text lef-text bold" name="hidden_name" style="color:#969696;"><?php echo $row[1]; ?></h3>
<h4 class="left-text thick" name="hidden_price" style="color:#f94b2b;">€ <?php echo $row[2]; ?></h4>
<?php
foreach(range(1, $row[10]) as $i)
{
//echo $i;
?>
<span class="fa fa-star checked" style="color: #ffa500;"></span>
<?php
}
?>
</div>
</a>
<!-- </form> -->
<?php
}
}
?>
<div class="clear"></div>
</div>
jQuery:
(function ($) {
$(document).ready(function() {
$(".popup-with-zoom-anim").each(function() {
$(this).magnificPopup({
type: 'inline',
fixedBgPos: true,
fixedContentPos: true,
overflowY: 'hidden',
closeBtnInside: false,
preloader: false,
midClick: true,
removalDelay: 300,
mainClass: 'my-mfp-zoom-in'
});
});
$(document).on('click', '.popup-modal-dismiss', function (e) {
e.preventDefault();
$.magnificPopup.close();
});
});
})(jQuery);
It shows the Popup dialog the way I want but the problem is that it shows the same data no matter what product I click!
I can't figure it out weather it has problem with Id or .each instance in jQuery. Any help would be appreciated!
Thank you!