Bymas | Модальное изображение

не пойму в чем проблема, сделал Модальное фото для галереи, дкмс 664. вывод новых фотографий прикол в том что открывается только первая фотография , а остальные нет, хм почему я хз поможете , ? код брал отсюда https://html5css.ru/edithtm/index.php вот как сделал я

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

javascript

   <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

155876556 (19.03.2022 в 21:17) не пойму в чем проблема, сделал Модальное фото для галереи, дкмс 664. вывод новых фотографий прикол в том что открывается только первая фотография , а остальные нет, хм почему я хз поможете , ? код брал отсюда https://html5css.ru/edithtm/index.php вот как сделал я

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

javascript

   <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>

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

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

155876556 (19.03.2022 в 23:06)
FullTwo ,можешь помочь а то я в джаваскрипте ноль

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

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

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

155876556 (20.03.2022 в 09:31) REWERK , я это уже понял, подскажи как мне сделать правильно

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

javascript

   $('.view img').click(function() {     let src = $(this).attr('src');     $('.popup img').attr('src',src);     $('.popup').fadeIn();     }); $('.close').click(function() {     $('.popup').fadeOut(); });

css

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

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 '<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 , ща попробую, отпишусь

155876556 (20.03.2022 в 09:41)
Sovet , ща попробую, отпишусь

Ок

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

Изображение

------

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