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

Топ дня:

)(aOS

155876556 (20.03.2022 в 09:48)
Sovet, не не вышло, получилось так

Данный способ рабочий,вот только надо правильно прописывать.
Вообще есть какое действие, фото увеличивает?

Sovet, нет, выводит просто по середине

155876556 (20.03.2022 в 10:16)
Sovet, нет, выводит просто по середине

Чуть позже кину

Sovet,спасибо, буду ждать , с мня + это все то могу сделать, было бы баблишко скинул бы хи но я бомж днровский

155876556, мой вариант не такой, что тебе нужен? Или слишком сложно под свое адаптировать?

REWERK, я незнаю как через ID сделать, колдовал вчера целый час не вышло, но суть я понял.

155876556 (20.03.2022 в 10:38)
REWERK, я незнаю как через ID сделать, колдовал вчера целый час не вышло, но суть я понял.

Доработал твой вариант

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

 var images = document.querySelectorAll(".perfect");

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

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

 

 images.forEach(function(elem) {

     elem.addEventListener("click", function() {

       modal.style.display = "block";

       modalImg.src = this.src;

       captionText.innerHTML = this.alt;

     });

 });

 

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

 

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

 span.onclick = function() { 

   modal.style.display = "none";

 }

.perfect {

   border-radius: 5px;

   cursor: pointer;

   transition: 0.3s;

 }

 

 .perfect:hover {opacity: 0.7;}

 

 /* Модальный (фон) */

 .modal {

   display: none; /* Скрыто по умолчанию */

   position: fixed; /* Оставаться на месте */

   z-index: 1; /* Сидеть на вершине */

   padding-top: 100px; /* Расположение коробки */

   left: 0;

   top: 0;

   width: 100%; /* Полная ширина */

   height: 100%; /* Полная высота */

   overflow: auto; /* Включите прокрутку, если это необходимо */

   background-color: rgb(0,0,0); /* Цвет запасной вариант  */

   background-color: rgba(0,0,0,0.9); /*Черный с непрозрачностью */

 }

 

 /*Модальное содержание (изображение) */

 .modal-content {

   margin: auto;

   display: block;

   width: 80%;

   max-width: 700px;

 }

 

 /* Заголовок модального изображения */

 #caption {

   margin: auto;

   display: block;

   width: 80%;

   max-width: 700px;

   text-align: center;

   color: #ccc;

   padding: 10px 0;

   height: 150px;

 }

 

 /* Добавить анимацию */

 .modal-content, #caption {  

   -webkit-animation-name: zoom;

   -webkit-animation-duration: 0.6s;

   animation-name: zoom;

   animation-duration: 0.6s;

 }

 

 @-webkit-keyframes zoom {

   from {-webkit-transform:scale(0)} 

   to {-webkit-transform:scale(1)}

 }

 

 @keyframes zoom {

   from {transform:scale(0)} 

   to {transform:scale(1)}

 }

 

 /* Кнопка закрытия */

 .close {

   position: absolute;

   top: 15px;

   right: 35px;

   color: #f1f1f1;

   font-size: 40px;

   font-weight: bold;

   transition: 0.3s;

 }

 

 .close:hover,

 .close:focus {

   color: #bbb;

   text-decoration: none;

   cursor: pointer;

 }

 

 @media only screen and (max-width: 700px){

   .modal-content {

     width: 100%;

   }

 }

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 class='perfect' src='/foto/foto128/$foto[id].$foto[ras]' alt='Фото_$foto[id]'  style='width:100%; max-width:300px;' >";

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

   <span class="close">&times;</span>

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

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

 </div>

Sovet, forEach не работает с NodeList. Используй Array.from()

Sovet, спасибки все получилось, с меня +

155876556 (20.03.2022 в 11:16)
Sovet, спасибки все получилось, с меня +

Рад что получилось.Обрашайся, помогу чем смогу