Загрузка полного размера картинки

Question

у меня есть такой HTML

<div>
    <img src="./images/1.jpg" alt="">
    <img src="./images/2.jpg" alt="">
    <img src="./images/3.jpg" alt="">
</div>

с таким css к картинкам

div img {
    min-width: 300px;
    height: 150px;
    object-fit: cover;
}

хочу при клике на картинку открывать полный размер, не понимаю как сделать это, проблема заключается в том что, я получаю картинки document.querySelectorAll('img') и если вывожу одну из картинок в полном размере, то ожидаемо с главной страницы пропадает ее маленький размер, как правильно это сделать, что бы такого не было, не могу понять, какой метод использовать

Answer 1

При помощи js добавляем или убираем класс fullscreen при клике на изображение:

let isImgOpen = false; // Открыто ли какое нибудь другое изображение
let imgs = document.getElementById('imgs').getElementsByTagName('img');
for(let i = 0; i < imgs.length; i++) {
  let img = imgs[i];
  img.onclick = function() {
    if(img.classList.contains('fullscreen')) {
       img.classList.remove("fullscreen");
       isImgOpen = false;
    } else {
    if(!isImgOpen){
        img.classList.add('fullscreen');
        isImgOpen = true;
      }
    }
  }
}

div img {
    min-width: 300px;
    height: 150px;
    object-fit: cover;
}

img.fullscreen { /* Стиль полноэкранного изображения*/
  position: fixed;
  width: 90%;
  height: 90%;
  top: 5%;
  left: 5%;
  background: #FFF;
  box-shadow: 0 0 20px 3px #000;
  z-index: 1000;
}

<div id="imgs">
    <img src="https://github.githubassets.com/images/modules/site/home/repo-browser.webp" alt="">
    <img src="https://github.githubassets.com/images/modules/site/home/astro-mona.webp" alt="">
    <img src="https://cdn.sstatic.net/Img/product/teams/screens/illo-for-you.png?v=ab49238abe04" alt="">
</div>

Или копируя src:

let isImgOpen = false; // Открыто ли какое нибудь другое изображение
let imgs = document.getElementById('imgs').getElementsByTagName('img'); 
let fullscreen = document.getElementById('fullscreen');
for(let i = 0; i < imgs.length; i++) {
  let img = imgs[i];
  img.onclick = function() {
    if(!isImgOpen){
      fullscreen.src = img.src;
      // fullscreen.style.display = "block";
      fullscreen.style.transform = "scale(1)";
      isImgOpen = true;
    }
  }
}

fullscreen.onclick = function() {
    fullscreen.src = "";
    fullscreen.style.transform = "scale(0)";
    isImgOpen = false;
}

div img {
    min-width: 300px;
    height: 150px;
    object-fit: cover;
}

img#fullscreen { /* Стиль полноэкранного изображения*/
  position: fixed;
  width: 90%;
  height: 90%;
  top: 5%;
  left: 5%;
  background: #FFF;
  box-shadow: 0 0 20px 3px #000;
  z-index: 1000;
  transition: .2s ease-in-out;
}

<div id="imgs">
    <img src="https://github.githubassets.com/images/modules/site/home/repo-browser.webp" alt="">
    <img src="https://github.githubassets.com/images/modules/site/home/astro-mona.webp" alt="">
    <img src="https://cdn.sstatic.net/Img/product/teams/screens/illo-for-you.png?v=ab49238abe04" alt="">
</div>

 <img src="" id="fullscreen" style="transform:scale(0)">

БЛОГ НА HUSL

Загрузка полного размера картинки

Ответы (1 шт):