Applying Modal enlargement

Question

Greeting.

Hi. I've been applying this modal enter link description here into my web. Already got this result.
but somehow it just applied to the 1st picture only.

How can I get it applied on the rest of pictures (total of pictures would be dynamic, so nvm).

Here's my code.

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

Thanks

Answer 1

take a look on working sample example I created in Codepen I hven't add any aspx codes. Your provided code only works for One image as it uses document.getElementById('myImg'). Even though you had a list of images, image's ids are same("myImage"). So given javascript code only works for first image.

Thank you.

Answer 2

Little research I did a while ago was to find something quite similar regarding this question.
Modal image galleries - multiple images
May it comes in handy.