Написать функцию, которая будет открывать картинку внизу в увеличенном виде с поясняющим текстом. js

Question

Изначально необходимо было сделать с помощью объекта данных вывод нескольких картинок в ряд с подписями, затем разместить на картинки событие нажатия мыши и организовать функцию, которая будет открывать картинки внизу в увеличенном виде с поясняющим текстом.

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

Буду рад любой подсказке.

let arch = [{
    file: "red.jpg",
    w: 300,
    title: "Красный костел",
    link: "https://msj.by/katolicheskie-xramy/krasnyj-kostel-v-minske/",
    description: "В храме святого Симеона и святой Елены находится полномасштабная копия Туринской Плащаницы."
  },
  {
    file: "troi.jpg",
    w: 300,
    title: "Троицкое предместье",
    link: "https://www.belarus.by/ru/travel/belarus-life/trinity-suburb",
    description: "Троицкое предместье — исторический район города Минска, расположенный в северо-восточной части исторического центра на левом берегу реки Свислочь."
  },
  {
    file: "mir.jpg",
    w: 300,
    title: "Мирский замок",
    link: "https://mirzamak.by/",
    description: "Построенный в начале XVI в. магнатом Ю. И. Ильиничем замок стал первым частнособственническим замком на землях Беларуси."
  },
]


function big() {



}

<section id="picturesHere">
  <div>
    <img style=" width: 300px" src="images\mir.jpg" alt="" onclick="big() ">
    <p>Мир</p>
  </div>

  <div>
    <img style="width: 300px" src="images/red.jpg" alt="" onclick="big() ">
    <p>Костел </p>
  </div>

  <div>
    <img style="width: 300px" src="images\troi.jpg" alt="" onclick="big()">
    <p>Троицкое</p>
  </div>


</section>

Answer 1

Как вариант:

let arch = [{
    file: "//i.imgur.com/3C5yM5y.png",
    w: 300,
    title: "Красный костел",
    link: "https://msj.by/katolicheskie-xramy/krasnyj-kostel-v-minske/",
    description: "В храме святого Симеона и святой Елены находится полномасштабная копия Туринской Плащаницы."
  },
  {
    file: "//i.imgur.com/Bfob8Gx.png",
    w: 300,
    title: "Троицкое предместье",
    link: "https://www.belarus.by/ru/travel/belarus-life/trinity-suburb",
    description: "Троицкое предместье — исторический район города Минска, расположенный в северо-восточной части исторического центра на левом берегу реки Свислочь."
  },
  {
    file: "//i.imgur.com/NfPyW23.png",
    w: 300,
    title: "Мирский замок",
    link: "https://mirzamak.by/",
    description: "Построенный в начале XVI в. магнатом Ю. И. Ильиничем замок стал первым частнособственническим замком на землях Беларуси."
  },
]


const main = document.querySelector('#picturesHere');
const big = document.querySelector('#picturesHereBig');
const bigContent = big.querySelector('.picturesHereBigContent');
const bigClose = big.querySelector('.picturesHereBigClose');

arch.forEach(function(data) {
  const item = document.createElement('div');
  item.classList.add('picturesHereItem');
  
  const img = document.createElement('img');
  img.src = data.file;
  img.width = data.w;
  img.alt = data.title;
  
  const p = document.createElement('p');
  p.textContent = data.title;
  
  item.dataset.file = data.file;
  item.dataset.title = data.title;
  item.dataset.link = data.link;
  item.dataset.description = data.description;
  
  item.append(img);
  item.append(p);
  
  main.append(item);
});

//
main.addEventListener('click', function(e) {
  const target = e.target.closest('.picturesHereItem');
  if(target) {
    big.style.display = 'flex';
    
    document.body.style.overflow = 'hidden';
    bigContent.innerHTML = '';
    
    const data = target.dataset;
    
    const img = document.createElement('img');
    img.src = data.file;
    img.alt = data.title;
    
    const title = document.createElement('a');
    title.href = data.link;
    title.textContent = data.title;
    
    const p = document.createElement('p');
    p.textContent = data.description;
    
    bigContent.append(img);
    bigContent.append(title);
    bigContent.append(p);
  }
});

bigClose.addEventListener('click', function() {
  big.style.display = '';
  document.body.style.overflow = '';
  bigContent.innerHTML = '';
});

#picturesHereBig {
  display: none;
  justify-content: center;
  align-items: center;
  background-color: rgba(0,0,0,.5);
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 999;
}

.picturesHereBigWrapper {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 100%;
  background-color: #fff;
  overflow: hidden auto;
  position: relative;
}

.picturesHereBigClose {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: red;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
  user-select: none;
  cursor: pointer;
}

.picturesHereBigContent {
  display: block;
}

.picturesHereBigContent > img {
  display: block;
  width: 100%;
  height: auto;
}

<section id="picturesHere"></section>

<div id="picturesHereBig">
  <div class="picturesHereBigClose">X</div>
  <div class="picturesHereBigWrapper">
    <div class="picturesHereBigContent"></div>
  </div>
</div>

БЛОГ НА HUSL

Написать функцию, которая будет открывать картинку внизу в увеличенном виде с поясняющим текстом. js

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