[英]Displaying dynamic content in magnific popup
我正在嘗試做一個動態內容放大彈出窗口。
這是我當前的代碼。
if ($queryResult > 0) {
while ($row = mysqli_fetch_assoc($result)) {
echo "<div class='hvrbox'>
<img src='image/".$row['mImage']."' alt='' class='hvrbox-layer_bottom' />
<div class='hvrbox-layer_top'>
<a href='#posterVid1' class='posterbtn1' id='posterLink1'>Play Trailer</a>
<div id='posterVid1' class='mfp-hide' style='max-width: 75%; margin: 0 auto;'>
<iframe width='853' height='480' src='".$row['mLink']."' frameborder='0' allow='accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture' allowfullscreen></iframe>
</div>
<a class='posterbtn2' href='movie-detail.php?name=".$row['mName']."'>Movie Details</a>
<div class='hvrbox-text'>Me Before You</div>
</div>
</div>";
}
}
這是 javascript
$('#posterLink1, #posterLink2, #posterLink3')
.magnificPopup({
type:'inline',
midClick: true // Allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source in href.
})
由於我使用的放大彈出窗口僅根據id
標簽和 JavaScript 中給出的id
打開內容,因此如果我有不同的內容,則id
仍然保持不變,並且按鈕只會一遍又一遍地打開相同的內容,因為id
是一樣的。 因為我得到的內容來自數據庫,所以我不能一遍又一遍地復制代碼,只能像在 static 頁面中那樣更改id
。
我究竟做錯了什么?
問題是您的循環中沒有計數器。 此外,您不需要id
來調用magnificPopup
,而是使用class
進行動態。
PHP:
if ($queryResult > 0) {
$ctr = 1;
while ($row = mysqli_fetch_assoc($result)) {
echo "<div class='hvrbox'>
<img src='image/".$row['mImage']."' alt='' class='hvrbox-layer_bottom' />
<div class='hvrbox-layer_top'>
<a href='#posterVid".$ctr."' class='posterbtn1'>Play Trailer</a>
<div id='posterVid".$ctr."' class='mfp-hide' style='max-width: 75%; margin: 0 auto;'>
<iframe width='853' height='480' src='".$row['mLink']."' frameborder='0' allow='accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture' allowfullscreen></iframe>
</div>
<a class='posterbtn2' href='movie-detail.php?name=".$row['mName']."'>Movie Details</a>
<div class='hvrbox-text'>Me Before You</div>
</div>
</div>";
$ctr++;
}
}
Javascript:
$('.posterbtn1')
.magnificPopup({
type:'inline',
midClick: true // Allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source in href.
})
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.