Отображение динамического контента во всплывающем окне - PullRequest
Новая
       18

Отображение динамического контента во всплывающем окне

0 голосов
/ 29 октября 2019

Я пытаюсь сделать динамическое всплывающее окно.

Это мой текущий код. 

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, указанного в теге id и в JavaScriptЕсли у меня другое содержимое, id остается неизменным, и кнопка только открывает одно и то же содержимое снова и снова, потому что id остается одним и тем же. Поскольку содержимое, которое я получаю, поступает из базы данных, я не могу повторять код снова и снова, а только изменить id, как на статической странице.

Что я делаю неправильно?

1 Ответ

1 голос
/ 29 октября 2019

Проблема в том, что у вас нет счетчика в цикле. Также вам не нужен 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.
    })
...