Img Modal nur Öffnung zuerst img

Question

Ich versuche, mehrere Bilder auf einer Seite mit dem unten aufgeführten, während wenn Sie auf das Bild klicken, öffnet es in modal.

Es funktioniert für das erste Bild, aber keine anderen, ich nehme an, es ist ein JS-Problem, ich habe versucht, eine leere var dann setzen, um die Element-ID (die für jedes IMG ist), aber wieder nur das erste funktioniert.

<?php foreach ($img as $thumbnail) { 
    echo '<img id="myImg" src="'.$thumbnail.'" width="300" height="200"> 
    <div id="imgModal" class="modal"> 
     <span class="closeModal">&times;</span> 
     <img class="modal-content" id="myImg1"> 
    <div id="caption"></div> 
    </div> 
    <span class="closeModal">&times;</span>'; 
} 
?> 
<script> 
    var modal = document.getElementById('imgModal'); 

    var img = document.getElementById('myImg'); 
    var modalImg = document.getElementById("myImg1"); 
    img.onclick = function() { 
    modal.style.display = "block"; 
    modalImg.src = this.src; 
    } 

    var span = document.getElementsByClassName("closeModal")[0]; 

    span.onclick = function() { 
    modal.style.display = "none"; 
    } 
</script> 

Answer 1

Der Code enthält die gleiche id Attribut für verschiedene Elemente aber id muss eindeutig sein.

id Attribut gibt eine eindeutige ID für ein HTML-Element an, sodass Sie es über JS oder CSS bearbeiten können. Wenn Sie dieselbe id für verschiedene Elemente verwenden, erhalten Sie nur die erste auf der Seite.

Wenn Sie Ereignis-Listener, um mehrere Elemente hinzuzufügen, fügen Sie ein class zu Ihrem <img>:

echo '<img id="myImg" src="'.$thumbnail.'" width="300" height="200" class="modal-img"> 

Und danach Ereignis-Listener für jedes Element mit einer Klasse modal-img hinzuzufügen.