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 that you have read and understand our privacy policy and code of conduct.

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