Как использовать getElementsByClassName для нескольких модальных изображений? - PullRequest
Новая
       8

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

0 голосов
/ 10 июня 2019

Я пытаюсь сделать очень простое всплывающее окно с эффектом лайтбокса для изображений, используя обычный javascript, без JQuery. Поскольку на любой странице может быть несколько изображений, использующих эту функцию, я не могу использовать getElementById ..., что потребует добавления еще одной строки в javascript каждый раз, когда конечный пользователь добавляет фотографию.

Так что вместо этого я хочу использовать getElementsByClassName. У меня есть одна версия, которая прекрасно работает - запуск модального режима и прохождение через источник изображения и альт-контент - для первого изображения; но у каждого другого изображения в этом классе есть другой номер в индексе, и поэтому, конечно, ничего не происходит, когда вы щелкаете по нему.

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

Вот как выглядит HTML (в первой версии событие onclick отсутствует в тегах изображений): 

<div id="text">
    <img class="popImage" src="photo1.jpg" alt="Lorem ipsum" onclick="PopUp(this)"; />
    <img class="popImage" src="photo2.jpg" alt="Dolor sit amet" onclick="PopUp(this)"; />
    <img class="popImage" src="photo3.jpg" alt="Iam vero Italia" onclick="PopUp(this)"; />
    <img class="popImage" src="photo4.jpg" alt="Novis cladibus" onclick="PopUp(this)"; />
</div>


<div id="imageModal">
    <a id="close" onclick="document.getElementById('imageModal').style.display='none'">X</a>
    <img id="modalImage" />
    <p id="caption"></p>
</div>

... и это javascript. Для первой версии, которая запускает только один модал, но правильно отображает изображение и подпись: 

var modal = document.getElementById('imageModal');
var modalImg = document.getElementById("modalImage");
var captionText = document.getElementById("caption");
var img = document.getElementsByClassName("popImage")[0];
img.onclick = function(){
    modal.style.display = "block";
    modalImg.src = this.src;
    captionText.innerHTML = this.alt;
}

var p = document.getElementById("close");

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

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

var img = document.getElementsByClassName("popImage")[0];
var modal = document.getElementById('imageModal');
var modalImg = document.getElementById("modalImage");
var captionText = document.getElementById("caption");

function PopUp(element){
    if (element){
        element.getElementsByClassName("popImage")[0];
        {
        modal.style.display = "block";
        modalImg.src = this.src;
        captionText.innerHTML = this.alt;
        }
    }
}

Есть ли способ объединить элементы этих двух, чтобы все это работало?

...