如何设置模态弹出多张图片

Question

I'm try to use this from w3s to show multi images in modal popup:

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

 /* Style the Image Used to Trigger the Modal */ #myImg { border-radius: 5px; cursor: pointer; transition: 0.3s; } #myImg:hover {opacity: 0.7;} /* The Modal (background) */.modal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 1; /* Sit on top */ padding-top: 100px; /* Location of the box */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0,0,0); /* Fallback color */ background-color: rgba(0,0,0,0.9); /* Black w/ opacity */ } /* Modal Content (Image) */.modal-content { margin: auto; display: block; width: 80%; max-width: 700px; } /* Caption of Modal Image (Image Text) - Same Width as the Image */ #caption { margin: auto; display: block; width: 80%; max-width: 700px; text-align: center; color: #ccc; padding: 10px 0; height: 150px; } /* Add Animation - Zoom in the Modal */.modal-content, #caption { -webkit-animation-name: zoom; -webkit-animation-duration: 0.6s; animation-name: zoom; animation-duration: 0.6s; } @-webkit-keyframes zoom { from {-webkit-transform:scale(0)} to {-webkit-transform:scale(1)} } @keyframes zoom { from {transform:scale(0)} to {transform:scale(1)} } /* The Close Button */.close { position: absolute; top: 15px; right: 35px; color: #f1f1f1; font-size: 40px; font-weight: bold; transition: 0.3s; }.close:hover, .close:focus { color: #bbb; text-decoration: none; cursor: pointer; } /* 100% Image Width on Smaller Screens */ @media only screen and (max-width: 700px){.modal-content { width: 100%; } }

 <.-- Trigger the Modal --> <img id="myImg" src="img_fjords,jpg" alt="Trolltunga. Norway" width="300" height="200"> <.-- The Modal --> <div id="myModal" class="modal"> <.-- The Close Button --> <span class="close" onclick="document;getElementById('myModal').style.display='none'">&times;</span> <!-- Modal Content (The Image) --> <img class="modal-content" id="img01"> <!-- Modal Caption (Image Text) --> <div id="caption"></div> </div>

It work fine for one image.

On my site I have some pages that I need to show more image, and if I set this code for other image, the popup work only for the first and not for other images.

How set correctly html and javascript?

Answer 1

Best solution that I have found:

Fisrt, the HTML changes:

Ex: Each image needs their own ID... very minor change to your html... (changes from w3school.com from that original file.

<div class="image"><img **id="myImg2"** src="images/pic02.jpg" alt="" /></div>
<div class="image"><img **id="myImg3"** src="images/pic03.jpg" alt="" /></div>

Original

    <div class="image"><img **id="myImg" src="images/pic01.jpg" alt="" /></div>

Second, CSS changes:

Copy the original "#myImg" and "#myImg:hover" attributes and paste right under .... adding the orinal new (number) after. Each image needs their unique "myImg"and their unique "#myImg:hover"

Ex:

#myImg2 {
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}

#myImg3 {
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}

#myImg2:hover {opacity: 0.7;}

#myImg3:hover {opacity: 0.7;}

Original

    #myImg {
        border-radius: 5px;
        cursor: pointer;
        transition: 0.3s;
    }

    #myImg:hover {opacity: 0.7;}

----

Javascript changes: Added the following: Add the var "variables" for each image and the " click " function for each image: --- Ex:

    var img2 = document.getElementById('myImg2');
    var img3 = document.getElementById('myImg3');

    //handle click for myImg2
    img2.onclick = function(){
        modal.style.display = "block";
        modalImg.src = this.src;
        captionText.innerHTML = this.alt;
    }

    //handle click for myImg3
    img3.onclick = function(){
        modal.style.display = "block";
        modalImg.src = this.src;
        captionText.innerHTML = this.alt;
    }

Orginal

<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 img2 = document.getElementById('myImg2');
var img3 = document.getElementById('myImg3');
var captionText = document.getElementById("caption");
img.onclick = function(){
    modal.style.display = "block";
    modalImg.src = this.src;
    captionText.innerHTML = this.alt;
}

//handle click for myImg2
img2.onclick = function(){
    modal.style.display = "block";
    modalImg.src = this.src;
    captionText.innerHTML = this.alt;
}

//handle click for myImg3
img3.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>

Here is an example of something very easy to understand:

<!DOCTYPE html>
<html>
<head>
<style>
#myImg {
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}

#myImg2 {
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}

#myImg3 {
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}

#myImg:hover {opacity: 0.7;}

#myImg2:hover {opacity: 0.7;}

#myImg3:hover {opacity: 0.7;}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (image) */
.modal-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
}

/* Caption of Modal Image */
#caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px;
}

/* Add Animation */
.modal-content, #caption {    
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.6s;
    animation-name: zoom;
    animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
    from {-webkit-transform:scale(0)} 
    to {-webkit-transform:scale(1)}
}

@keyframes zoom {
    from {transform:scale(0)} 
    to {transform:scale(1)}
}

/* The Close Button */
.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
    .modal-content {
        width: 100%;
    }
}
</style>
</head>
<body>

<h2>Image Modal</h2>
<p>Guitarfetish.com </p>
<p>Gallery ideas</p>

<img id="myImg" src="img01.jpg" alt="XGP Tele Bodies" width="600" height="200">

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

<img id="myImg2" src="img02.jpg" alt="Xaviere Guitars" width="600" height="200">

<img id="myImg3" src="img03.jpg" alt="Premium Guitar Cases" width="600" height="200">
<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 img2 = document.getElementById('myImg2');
var img3 = document.getElementById('myImg3');
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;
}

//handle click for myImg2
img2.onclick = function(){
    modal.style.display = "block";
    modalImg.src = this.src;
    captionText.innerHTML = this.alt;
}

//handle click for myImg3
img3.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>

</body>
</html>

Answer 2

This implementation will not work as you are referring to the same DOM element by ID. You can try this JSFiddle which uses magnific popup plugin to make a multiple image modal. This would be easier for you to implement as well.

Here is an example of magnific popup: https://jsfiddle.net/8f60f93t/2/

Answer 3

How to do this for case that you do not know how many images will be needed...? For example I have a CSS popup that works for my needs well, but works only for one id.

Looks like this:

            <div class="imagelist">
          <{if $product.img_url=="" && $otherimg_num==0}>
            <div class="u-oneimage">
              <img src="https://img.shop-pro.jp/s_tmpl_img/28/noimage.png">
            </div>
            <{else}>
              <{if $product.img_url !="" }>
                <div class="<{if $otherimg_num == 0}>u-oneimage<{/if}>">
                  <a href="#test">
                    <img src="<{$product.img_url}>">
                  </a>
                </div>
                <{else}>
                  <div class="<{if $otherimg_num == 0}>u-oneimage<{/if}>">
                    <img src="https://img.shop-pro.jp/s_tmpl_img/28/noimage.png">
                  </div>
                  <{ /if}>
                    <{section name=num loop=$otherimg}>
                      <{if $otherimg[num].url !="" }>
                        <div>
                          <img src="<{$otherimg[num].url}>">
                        </div>
                        <{ /if}>
                          <{ /section}>
                            <{ /if}>
        </div>

        <a href="#" class="lightbox" id="test">
          <span><img src="<{$product.img_url}>"></span>
        </a>

How this case would be sorted then...?

Thank you to everyone, who may help.