Wie Modal Popup mehrere Bild gesetzt

Question

Ich bin versuchen, diese Mehr Bilder in modalen Popup zeigen von w3s zu verwenden:

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

Es ist für ein Bild gut funktionieren.

Auf meiner Website habe ich einige Seiten, die ich mehr Bild zeigen muss, und wenn ich diesen Code für ein anderes Bild festlegen, funktioniert das Popup nur für die erste und nicht für andere Bilder.

Wie richtig eingestellt html und Javascript?

Answer 1

Diese Implementierung funktioniert nicht, da Sie sich auf das gleiche DOM-Element nach ID beziehen. Sie können dieses JSFiddle versuchen, das magnific popup plugin verwendet, um ein Mehrfachbildmodal zu erstellen. Dies wäre für Sie auch einfacher zu implementieren. Hier

ist ein Beispiel für magnific: Pop-up https://jsfiddle.net/8f60f93t/2/

Answer 2

beste Lösung, die ich gefunden habe:

Fisrt, die HTML-Änderungen:

Ex: Jedes Bild braucht, um ihre eigene ID ... sehr geringfügige Änderung Ihrer html ... (Änderungen von w3school.com aus dieser Originaldatei.

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

Zweitens CSS Änderungen:

Kopieren Sie die original "#myImg" und "#myImg: schweben" Attribute und fügen Sie ihn direkt unter .... Hinzufügen der orinal neue (Nummer) nach. Jedes Bild braucht, um ihren einzigartigen "myImg" und ihren einzigartigen "#myImg: schweben"

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 ändert: addiert die folgend: Fügen Sie die var "Variablen" für jedes Bild und die "klicken Sie" Funktion für jedes Bild: --- 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> 

Hier ist ein Beispiel für etwas sehr einfach zu verstehen:

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