Modale Pop-up funktioniert nur auf ein Bild:

Question

Ich habe eine XSLT-Vorlage, die eine Liste von Miniaturbildern füllt, und ich möchte ein modales Popup für jedes Bild auf ähnliche Weise erstellen.

<xsl:template name="Gallery-View"> 
    <div class="gallery-images"> 
     <!--<ul class="hoverbox">--> 
     <xsl:for-each select="//Gallery/Images[@folderpath = 'thumb/']"> 
     <xsl:variable name="path" select="@filename"/> 
     <xsl:variable name="title" select="@title"/> 
     <!-- Trigger the Modal --> 
     <img id="myImg" src="Images/Gallery/thumb/{$path}" alt="{$title}"/> 

     <!-- The Modal --> 
     <div id="myModal" class="modal"> 

      <!-- The Close Button --> 
      <span class="close" onclick="document.getElementById('myModal').style.display='none'"><i class="pe-7s-close"></i></span> 

      <!-- Modal Content (The Image) --> 
      <img class="modal-content" src="Images/Gallery/full/{$path}" alt="{$title}" id="img01"/> 

      <!-- Modal Caption (Image Text) --> 
      <div id="caption"> 
      <xsl:value-of select="$title"/> 
      </div> 
     </div> 

     <script> 
<!--// Get the modal--> 
var modal = document.getElementById('myModal'); 

<!--// Get the image and insert it inside the modal - use its "alt" text as a caption--> 
var img = document.getElementById('myImg'); 
var modalImg = document.getElementById("img01"); 
var captionText = document.getElementById("caption"); 
img.onclick = function(){ 
    modal.style.display = "block"; 

    captionText.innerHTML = this.alt; 
} 

<!-- Get the <span> element that closes the modal--> 
var span = document.getElementsByClassName("close")[0]; 

<!--// When the user clicks on <span> (x), close the modal--> 
span.onclick = function() { 
    modal.style.display = "none"; 
} 
</script> 
     </xsl:for-each> 
    </div> 
    </xsl:template> 

Das Problem, das ich habe, ist, dass das modale Popup nur auf dem ersten Bild arbeitet, und wenn ich auf einen der anderen Bilder klicken bekomme ich nicht einmal eine Konsole Fehler, mir zu sagen, wo ich Ich gehe falsch, nur nichts.

Answer 1

Es scheint, dass Sie eine zusätzliche Variable benötigen, da die Image-ID nicht für jedes Thumbnail identisch sein kann. Wenn Sie sich den generierten HTML-Code ansehen, ist es wahrscheinlich, dass jedes Bild dieselbe ID hat: myImg. Ihr Skript funktioniert also nur für das erste Bild, das auf die ID myImg trifft.

Jedes anzuklickende Thumbnail muss eine andere ID haben.

Sie haben Recht, wenn Sie sagen, dass kein Konsolenfehler vorliegt. Javascript verursacht keinen Fehler, wenn mehrere HTML-Elemente dieselbe ID zugewiesen bekommen, weil dies nicht erforderlich ist.