Question

I am trying to do a dynamic content magnific popup.

This is my current code.

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>";
      }
    }

This is the 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.
  }) 

Since the magnific popup I'm using only opens content based on the id given in the id tag and in the JavaScript, if I have different content, the id still stays the same and the button only opens the same content over and over again because the id is the same. Because the content I'm getting is from a database, I can't replicate the code over and over again and only change the id like in a static page.

What am I doing wrong?

Answer 1

The issue is that you don't have a counter in your loop. Also you don't need the id for calling the magnificPopup , instead use class for dynamic.

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.
    })