Sunday, 12 September 2021

asp.net mvc dynamic image click show on popup

  <div class="row">

                    @for (int i = 0; i < Model.productImages.Count(); i++)

                    {

                        if (i == 0)

                        {

                            <div class="column2">

                                <img src="~/Uploads/Product/@Model.productMaster.ProductID/@Model.productImages[i].ImageName" style="width:100%"  class="hover-shadow cursor">

                            </div>

                        }

                        else

                        {

                            <div class="column">

                                <img src="~/Uploads/Product/@Model.productMaster.ProductID/@Model.productImages[i].ImageName" style="width:100%" class="hover-shadow cursor">

                            </div>

                        }

                    }

                </div>


1.the jaery and and javascript code for open image in new window below.

<!-- The Modal -->

<div id="myModal" class="modal">

    <span class="close">&times;</span>

    <img class="modal-content" id="img01">

    <div id="caption"></div>

</div>

<script>

    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");

    


    // 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";

    }

    $(".column2 img").click(function () {

        debugger

        var imgsrc = $('.column2 img').prop('src');

        alert(imgsrc);

        var modalImg = document.getElementById("img01");

        var captionText = document.getElementById("caption");

        

            modal.style.display = "block";

            modalImg.src = imgsrc;

            captionText.innerHTML = this.alt;

        

    });

styles for popup

take from here

No comments:

Post a Comment

7 Common mistakes in Dot Net — You can avoid

  There are many common mistakes made during .NET (ASP.NET, .NET Core) development, which affect performance, security, and code… Code Crack...