Как сделать просмотр изображений?

Question

Мне нужно сделать просмотр изображения, но проблема в том, что элементов много и их станет только больше. Я смог сделать но в таком случае получается много повторяещего кода. Вот мой код:

item1.onclick = function() {
  imageContainer.classList.add("image1");
}
item2.onclick = function() {
  imageContainer.classList.add("image2");
}
item3.onclick = function() {
  imageContainer.classList.add("image3");
}
close.onclick = function() {
  imageContainer.classList.remove("image1", "image2", "image3");
}

.imageWindow {
  width: 90vh;
  height: 90vh;
  position: absolute;
  margin: 50px auto;
  z-index: 1;
}

.item {
  width: 40px;
  height: 100px:
}

#imageContainer {
  width: 400px;
  height: 1000px;
}

.item1 {
  background: url("image1.jpg") center no-repeat;
  background-size: cover;
}

.item2 {
  background: url("image3.jpg") center no-repeat;
  background-size: cover;
}

.item3 {
  background: url("image3.jpg") center no-repeat;
  background-size: cover;
}

<div class="imageWindow">
  <div id="imageContainer"></div>
  <div id="close"></div>
</div>

<div class="item item3" id="item3"></div>
<div class="item item2" id="item2"></div>
<div class="item item1" id="item1"></div>

Если кратко, задумка такая: Есть блоки изображений, на них нажимаешь, появляется окно поверх всего сайта (как бы увеличивая изображения но не трогая оригинал). Мне не даёт покое то, что я использую слишком много индетификаторов, ведь элеметов очень много. Изображения через CSS сделал банально из-за удобства но вполне не сложно заменить на теги.

БЛОГ НА HUSL

Как сделать просмотр изображений?

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