1

Как сделать увеличение картинки при клике на ней, с появлением белой рамки вокруг картинки и крестика для закрытия в правом верхнем углу этой рамки.

Пример

мой код:

<div class="features-card-second">
                    <img  src="путь к картинке" >
                    <div class="features-circle">
                    </div>
                </div>
3
  • 1
    использовать библиотеку галереи изображений, но вы хотите свой код написать?ъ
    – Zhihar
    3 дек 2020 в 8:21
  • Мне нужно решение как это в js сделать при клике на картинку,а эта картинка просто пример, как должно выглядеть 3 дек 2020 в 8:24
  • тогда создается объект и ему ставится стиль display: none (например назначается специальный класс), а при нажатии на нужный объект у этого созданного меняется стиль на display: block, а при нажатии на кнопку закрытия происходит обратное действие
    – Zhihar
    3 дек 2020 в 8:26

2 ответа 2

5

Два часа работы (из них час картинки выбирал)) и получается вот такая галерея "с нуля":

const oGallery = document.querySelector('.gallery');
oGallery.addEventListener('click', function(ev) {
  if (ev.target.tagName != 'IMG') { return false; };
  let oTarget = ev.target, nWidth, nHeight, nRatio = oTarget.offsetWidth / oTarget.offsetHeight;
  let oBig = this.appendChild(document.createElement('DIV'));
  oBig.style.position = `absolute`;
  oBig.style.top = `${oTarget.offsetTop}px`; oBig.style.left = `${oTarget.offsetLeft}px`;
  oBig.style.width = `${oTarget.offsetWidth}px`; oBig.style.height = `${oTarget.offsetHeight}px`;
  if (this.offsetHeight < this.offsetWidth) {
    nHeight = this.offsetHeight; nWidth = nHeight * nRatio;
  } else {
    nWidth = this.offsetWidth; nHeight = nWidth / nRatio;
  };
  oBig.style.background = `center / 100% 100% no-repeat url('${oTarget.currentSrc}')`;
  oBig.insertAdjacentHTML('beforeend', '<div class="close">×</div>');
  oBig.addEventListener('transitionend', function() { this.querySelector('.close').style.opacity = 1; });
  oBig.addEventListener('click', function(ev) {
    ev.stopPropagation();
    this.addEventListener('transitionend', function() { this.remove(); });
    this.style.transition = `.5s ease-in`;
    this.style.height = this.style.width = `0px`;
  oGallery.classList.toggle('show', false);
  });
  oBig.classList.toggle('active');
  oBig.style.width = `${nWidth / 1.3}px`; oBig.style.height = `${nHeight / 1.3}px`;
  oBig.style.top = oBig.style.left = `50%`;
  oBig.style.transform = `translate(-50%, -50%) rotate(1turn)`;
  oGallery.classList.toggle('show', true);
});
body { margin: 0; height: 100vh; overflow: hidden; background: 0% 0% / auto no-repeat url('https://i.stack.imgur.com/m9NKc.png'), #58555c; }
.gallery {
  position: relative; display: flex; flex-flow: row wrap;
  justify-content: space-evenly; align-items: center;
  height: 100%; width: 90%; margin: 0 auto;
  background-color: #fff;
}
.gallery img {
  height: auto; width: 200px; margin: 10px;
  box-shadow: 0 0 0 5px #fff, 0 0 0 6px #919191;
  transition: .5s linear; cursor: pointer;
}
.show img { opacity: .25; pointer-events: none; }
.active {
  transition: box-shadow .5s linear .5s, top 1s ease-out, left 1s ease-out, transform 1s ease-out, width 1s ease-in, height 1s ease-in;
  box-shadow: 0 0 0 10px #fff; filter: drop-shadow(1px 2px 6px #000);
  pointer-events: none;
}
.close {
  position: relative; left: 100%;
  height: 20px; width: 20px;
  transform: translate(0%, -100%);
  border-radius: 50%;
  box-shadow: 0 0 0 2px #fff, 0 0 2px 2px #000;
  font: bold 20px/20px Arial; text-align: center;
  background-color: #000; color: #fff;
  pointer-events: auto; cursor: pointer;
  transition: 1s linear; opacity: 0;
}
.active .close:hover { transform: translate(0%, -100%) rotate(.5turn); transition: 1s ease; }
<div class="gallery">
  <img src="https://i.stack.imgur.com/MraLT.jpg"><img src="https://i.stack.imgur.com/VxVNC.jpg"><img src="https://i.stack.imgur.com/A9VLC.jpg"><img src="https://i.stack.imgur.com/oYG0R.jpg">
  <img src="https://i.stack.imgur.com/MraLT.jpg"><img src="https://i.stack.imgur.com/VxVNC.jpg"><img src="https://i.stack.imgur.com/A9VLC.jpg"><img src="https://i.stack.imgur.com/oYG0R.jpg">
</div>

Можно было ещё добавить навигацию стрелками и эффекты, но в вопросе этого не было.

4
  • Видимо, ты очень быстро пишешь хороший код и очень медленно ищешь картинки. Раз время совпадает :-) 4 дек 2020 в 6:44
  • @Alexandr_TT: я редко, но тщательно стараюсь подбирать картинки. Ну и сам знаешь - начнёшь рассматривать... и "залип" :) А по коду - давно в голове крутился, но всё вопрос не попадался. Но, столкнулся с подводными камнями, и есть подозрения, что это не моя вина, а разрабов браузеров - то, что раньше работало, как надо, теперь костылить пришлось.
    – UModeL
    4 дек 2020 в 6:59
  • я же пошутил, сам с этим постоянно сталкиваюсь :) Просто ненавязчиво намекнул, что вместо фразы про картинки, хотел бы увидеть хоть краткие пояснения в коде основных моментов решения. Знаю, что противно делать это, но ответ был бы в разы полезней, на мой взгляд... В принципе на твое усмотрение. 4 дек 2020 в 7:07
  • 1
    @Alexandr_TT: ели честно, то должно быть всё проще и короче, но что-то сломали в Хроме (в других не проверял). Потому, надо ещё самому разобраться.
    – UModeL
    4 дек 2020 в 7:11
1

Например вот так:

function open_photo(photo) {
  document.getElementById("big-photo").innerHTML =
    ("<img onclick='close_photo()' style='position: absolute;' src='" + photo + "'>")
}

function close_photo() {
  document.getElementById("big-photo").innerHTML = ""
}
.photo {
  width: 200px;
}
<span id="big-photo"></span>
<img onclick="open_photo('https://api.time.com/wp-content/uploads/2019/08/better-smartphone-photos.jpg')" class="photo" src="https://api.time.com/wp-content/uploads/2019/08/better-smartphone-photos.jpg">

Дальше дело кастомизации и настройки стилей. При нажатии на миниатюру картинка откроется в полном размере, при нажатии по открывшейся картинке - скроется в миниатюру.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.