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

Топ дня:

Лара

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 сделать, колдовал вчера целый час не вышло, но суть я понял.

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

javascript

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

css

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

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 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 , спасибки все получилось, с меня +

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