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')。即使您有图像列表，图像的ID也相同（“ myImage”）。因此，给出的javascript代码仅适用于第一张图片。

谢谢。

Answer 2

我前一段时间做的很少研究，就是找到与此问题非常相似的东西。
Modal image galleries - multiple images
可能派上用场。

应用模态放大

2 个答案: