увеличить выбранный рисунок

Question

есть массив с картинками и описанием

let mapImages = [
    {way: 'C:/Users/djoni/Desktop/Lessons/document/Homework_document/Images/1.jfif',
                     description: 'Это картинка номер 1'},
    {way: 'C:/Users/djoni/Desktop/Lessons/document/Homework_document/Images/2.jfif',
                description: 'Это картинка номер 2'},
     {way: 'C:/Users/djoni/Desktop/Lessons/document/Homework_document/Images/3.jfif',
                description: 'Это картинка номер 3'}];

есть небольшой скрипт для popup

<body>
            <div class="mini">  

             </div>


            <div id="myModal" class="modal">
            <div class="modal-content">
              <span class="close">&times;</span>
                   <img id ="pop" src ="" alt = ""  width="500" height="500" style="border: 2px solid red">
                    </div>
            </div>

    <script>

нужно чтобы при клике на картинку создавался динамически div и в нем отрисавывались все картинки, и при клике на картинку она увеличивалась с помошью popup и появлялась описание картинки.

let count = 0;
    let modal = document.getElementById("myModal");
    let span = document.getElementsByClassName("close")[0];
    let pop = document.querySelector('#pop');

function showImages() {
    document.body.innerHTML = "";
    for(let i = 0; i < mapImages.length; i++){
        document.body.innerHTML +=  ` <img src="${mapImages[i].way}" alt = "${mapImages[i].description}"  width="200" height="200" style="border: 2px solid red"> `;
    }
}
showImages();

let pichers = document.querySelectorAll('img'); 

    function elemSwitch() {
      for( let i = 0; i < pichers.length; i++){
         pichers[i].addEventListener("click", function() {
           count = i;
           modal.style.display = "block";
           pop.src = mapImages[count-1].way;
        console.log(count);
        console.log(pop.src);
             }, false);
              }
}

elemSwitch();

span.onclick = function() {
          modal.style.display = "none";
        }

        window.onclick = function(event) {
             if (event.target == modal) {
              modal.style.display = "none";
             }
            }

реализовать надо с помошью JS без Jquery

БЛОГ НА HUSL

увеличить выбранный рисунок

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