не пойму в чем проблема,

сделал Модальное фото для галереи, дкмс 664. вывод новых фотографий

прикол в том что открывается только первая фотография , а остальные нет, хм почему я хз поможете , ?

код брал отсюда https://html5css.ru/edithtm/index.php


вот как сделал я

while ($post = mysql_fetch_assoc($q)) {

 $foto = mysql_fetch_assoc(mysql_query("SELECT * FROM `gallery_foto` WHERE `id_gallery` = '$post[id]' ORDER BY RAND()"));

 

 echo "<img id='myImg' src='/foto/foto128/$foto[id].$foto[ras]' alt='Фото_$foto[id]'  style='width:100%; max-width:300px;' >";

 

 echo '<div id="myModal" class="modal">

   <span class="close">×</span>

   <img class="modal-content" id="img01">

   <div id="caption"></div>

 </div>';

 }

 

<script>

 // Get the modal

 var modal = document.getElementById('myModal');

 

 // Get the image and insert it inside the modal - use its "alt" text as a caption

 var img = document.getElementById('myImg');

 var modalImg = document.getElementById("img01");

 var captionText = document.getElementById("caption");

 img.onclick = function(){

     modal.style.display = "block";

     modalImg.src = this.src;

     captionText.innerHTML = this.alt;

 }

 

 // Get the <span> element that closes the modal

 var span = document.getElementsByClassName("close")[0];

 

 // When the user clicks on <span> (x), close the modal

 span.onclick = function() { 

     modal.style.display = "none";

 }

 </script>

 

________
посл. ред. 19.03.2022 в 21:19; всего 2 раз(а); by 155876556

Доработать надо по data id

myImg and img01 - у тебя идёт на всё фото так, по этому и открывает первую
________
посл. ред. 19.03.2022 в 22:50; всего 1 раз(а); by FullTwo

FullTwo,можешь помочь а то я в джаваскрипте ноль

Это происходит, потому что ты всем картинкам устанавливаешь одинаковый id.

REWERK, я это уже понял, подскажи как мне сделать правильно

155876556, я набросал шаблон, посмотри как сделал. https://codepen.io/borkowsky/pen/VwyjZVW?editors=0110

Попробуй это решение

$('.view img').click(function() {

     let src = $(this).attr('src');

     $('.popup img').attr('src',src);

     $('.popup').fadeIn();    

 });

 $('.close').click(function() {

     $('.popup').fadeOut();

 });

.media {

     display: flex;

 }

 .view {

     width: 33%;

     padding: 10px;

 }

 .view img,

 .popup img {

     max-width: 100%;

 }

 .popup {

     display: none;

     position: fixed;

     background-color: black;

     left: 50%;

     top: 50%;

     transform: translate(-50%, -50;

     width: 90%;

     height: 90vh;

 }

 .close {

     color: white;

     float: right;

     padding: 10px;

     cursor: pointer;

 }

while ($post = mysql_fetch_assoc($q)) {

  $foto = mysql_fetch_assoc(mysql_query("SELECT * FROM `gallery_foto` WHERE `id_gallery` = '$post[id]' ORDER BY RAND()"));

 echo '<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>';

  echo '<div class="view">';

  echo "<img src='/foto/foto128/$foto[id].$foto[ras]' alt='Фото_$foto[id]'  style='width:100%; max-width:300px;' >";

  echo '</div>';

  echo '<div class="popup">

     <div class="close">X</div>

     <img src="" alt="" />

 </div>';

  }

Sovet, ща попробую, отпишусь

Ок

Sovet, не не вышло, получилось так

Изображение

------
81396_psSPDanr6A.jpg (286.3 Kb)
Скачиваний: 110