モーダルポップアップは1つのイメージでしか機能しません。

Question

サムネイルイメージのリストを作成するXSLTテンプレートがあり、同様の方法で各イメージのモーダルポップアップを作成します。

<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> 

私がいる問題は、モーダルポップアップが最初の画像だけで動作することで、他の画像のいずれかにIをクリックすると、私も、私は「どこのコンソールエラーが私に教えて得ることはありません間違っている、ただ何もない。

Answer 1

画像IDがすべてのサムネイルで同じになることはできないため、追加の変数が必要になると思われます。生成されたHTMLを見ると、各画像は同じID = myImgになります。だから、あなたのスクリプトは、id myImgという文字で遭遇する最初の画像に対してのみ働いています。

クリックするサムネイルごとに異なるIDが必要です。

コンソールエラーがないと言っても間違いありません。 Javascriptは、複数のHTML要素に同じIDが割り当てられている場合、エラーをスローしません。