0
Können Sie mir mit diesem Code helfen? Dieser Code öffnet ein Galerie-Popup, wenn jemand auf ein Bild klickt. Es sollte verschiedene Galerien öffnen, wenn jemand in verschiedene Bilder klickt, aber es nicht ... Kannst du meinen Code korrigieren, so dass er für verschiedene Galerien funktioniert? Vielen Dank!Popup Box Gallery mit manueller Diashow
// Get the image and insert it inside the modal
function imgg(id){
var modal = document.getElementById(id);
\t \t var modalImg = document.getElementById('mySlides');
modal.style.display = "block";
modalImg.src = this.src;
}
// When the user clicks on <span> (x), close the modal
function close() {
modal.style.display = "none";
}
// Sliseshow
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length} ;
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex-1].style.display = "block";
}#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) */
.mySlides {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
box-shadow: 0px 0px 50px -6px #000;
}
@-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){
.mySlides {
width: 100%;
}
}
.w3-btn-floating {
}<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="test.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
</head>
<body>
<img id="myImg" onClick="imgg('myModal')" src="http://static.independent.co.uk/s3fs-public/styles/story_medium/public/thumbnails/image/2013/07/31/10/A-striped-field-mouse-(Apod.jpg" alt="" width="300" height="200">
<img id="myImg" onClick="imgg('myModal1')"src="http://therivardreport.com/wp-content/uploads/2013/05/Daniel-Chaffin.jpg" alt="" width="300" height="200">
<!-- The Modal -->
<div id="myModal" class="modal">
<span onclick="close()" class="close">×</span>
\t <img class="mySlides" id="img_modal" src="http://static.independent.co.uk/s3fs-public/styles/story_medium/public/thumbnails/image/2013/07/31/10/A-striped-field-mouse-(Apod.jpg" >
\t <img class="mySlides" id="img_modal" src="http://interrete.org/wp-content/uploads/2014/04/Miniature-World-of-Insects6.png" >
\t <img class="mySlides" id="img_modal" src="http://www.isharearena.com/wp-content/uploads/2012/12/wallpaper-281049.jpg?d54e04" >
\t <img class="mySlides" id="img_modal" src="http://cdn.theatlantic.com/assets/media/img/photo/2015/11/images-from-the-2016-sony-world-pho/s01_130921474920553591/main_900.jpg?1448476701" >
\t <a class="w3-btn-floating" style="position:absolute;top:45%;left:280px;" onclick="plusDivs(-1)">❮</a>
\t <a class="w3-btn-floating" style="position:absolute;top:45%;right:280px;" onclick="plusDivs(1)">❯</a>
</div>
<div id="myModal1" class="modal">
<span onclick="close()" class="close">×</span>
\t <img class="mySlides" id="img_modal" src="http://therivardreport.com/wp-content/uploads/2013/05/Daniel-Chaffin.jpg" >
\t <img class="mySlides" id="img_modal" src="http://www.catnipcamera.com/wp-content/uploads/2012/03/DSCN98911.jpg" >
\t <img class="mySlides" id="img_modal" src="http://www.desibucket.com/db2/01/26021/26021.jpg" >
\t <a class="w3-btn-floating" style="position:absolute;top:45%;left:280px;" onclick="plusDivs(-1)">❮</a>
\t <a class="w3-btn-floating" style="position:absolute;top:45%;right:280px;" onclick="plusDivs(1)">❯</a>
</div>
</body>
</html>