CODEWITHSUNDEEP
javascripthtmlcss
von
von

Reputation: 81

How to make multiple images on one web page load into modal

I have two images on my web page and I am trying load them into a full screen modal. Example, click on first image it goes full screen, close first image then click on second image and it goes full screen. I can get it to work with a single image but the second image will not load into the modal. I have tried changing the second images id to myImg2 and all the var and this allows the second image to load but then the modal will not close. Should I also post the css code? 

<img id="myImg" src="images/analysis.PNG" alt="" style="width:100%;max-width:400px"> 
<img id="myImg" src="images/design.PNG" alt="" style="width:100%;max-width:400px">    

    <!-- The Modal -->
    <div id="myModal" class="modal">
      <span class="close">&times;</span>
      <img class="modal-content" class="responsive" id="img01">
      <div id="caption"></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";
          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>

Upvotes: 3

Views: 107

Answers (3)

Usman
Usman

Reputation: 463

Change images id by class like class="myImg". In your code, you are using an id which is always unique so JavaScript only fetches the first image that has an id of myImg. So, it only shows a model for the first image not for the second. Try this JavaScript Code.

  // 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.querySelectorAll('.myImg');
        var modalImg = document.getElementById("img01");
        var captionText = document.getElementById("caption");



     for(var i = 0;i<img.length;i++){
img[i].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";
    }

Upvotes: 0

Alex
Alex

Reputation: 507

When you are getting element by id you can only retrieve 1 element since id is uniqe.What you want to do is document.getElementByClassName()so you can acces it by indexes.

<img class="myImg" src="images/analysis.PNG" alt="" style="width:100%;max-width:400px">
<img class="myImg" src="images/design.PNG" alt="" style="width:100%;max-width:400px">

<!-- The Modal -->
<div id="myModal" class="modal">
    <span class="close">&times;</span>
    <img class="modal-content" class="responsive" id="img01">
    <div id="caption"></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.getElementsByClassName('myImg');
    var modalImg = document.getElementById("img01");
    var captionText = document.getElementById("caption");
    for(var i = 0;i<img.length;i++){
    img[i].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>

Upvotes: 1

Pablo Marcano
Pablo Marcano

Reputation: 3339

In your example, both images have the same ID, that may be the reason why you're never getting to the second one. Javascript will query the DOM and return the first element with the ID you provided in the document.getElementById method.

If you want to query many elements you could try document.querySelector and pass in any css selector you like, like class names and such. But always having 2 identical IDs in your DOM is a bad idea

Upvotes: 0

Related Questions