应用模态放大

Question

欢迎光临。

嗨。我一直在把这个模式enter link description here应用到我的网站中。已经得到了这个结果。

但不知何故，它只适用于第一张图片。

如何才能将其应用于其余图片(图片总数将是动态的，因此nvm)。

这是我的代码。

<div class="main-content2">

<ul id="thumbnails">
    <asp:ListView runat="server" ID="IDGallery_Upl" ItemPlaceholderID="GalleryImg"
        DataSourceID="gridgallery">
        <LayoutTemplate>
            <li runat="server" id="GalleryImg"></li>
        </LayoutTemplate>
        <ItemTemplate>
            <li>

                    <img id="myImg" src="Image/05 Galeri/<%# Eval("GalleryImg") %>" width="200" height="150" alt="<%# Eval("nmGallery") %>"  />
            </li>
        </ItemTemplate>
    </asp:ListView>
    </ul>

<div id="myModal" class="modal">
      <span class="close">&times;</span>
      <img class="modal-content" id="img01" />
      <div id="caption"></div>
    </div>


    <asp:SqlDataSource ID="gridgallery" runat="server" ConnectionString="<%$ ConnectionStrings:BackboneConnectionString %>" 
        SelectCommand="SELECT [IDGallery_Upl], [nmGallery], [GalleryImg] FROM [EL_MstGallery] where sts_delete = '0'">
    </asp:SqlDataSource>

​

<script type="text/javascript">
            // Get the modal
            var modal = document.getElementById('myModal'); //IDGallery_Upl

            // 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"); // how do I assgn GalleryImg ?
            var captionText = document.getElementById("caption"); //how do I assign nmGallery ?
            img.onclick = function() {
                modal.style.display = "block";
                modalImg.src = this.src;
                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>

谢谢

Answer 1

看看我在Codepen中创建的工作样例，我没有添加任何aspx代码。您提供的代码只适用于一个图像，因为它使用document.getElementById('myImg')。尽管您有一个图像列表，但图像的ids是相同的(“myImage”)。因此，给定的javascript代码只适用于第一张图像。

谢谢。

Answer 2

我之前所做的一点研究就是在这个问题上找到一些非常相似的东西。

Modal image galleries - multiple images

希望它能派上用场。