0
In dem Code unten, wenn ich auf eines der beiden Bilder klicke öffnet es eine Galerie, und wenn ich auf das andere klicke, sollte es eine andere Galerie öffnen. Es funktioniert, aber nicht so, wie ich es erwartet habe. Wie Sie auf dem Snippet sehen können, gibt es in jeder Galerie einige leere Folien. Kannst du mir helfen, dieses Problem zu lösen? Vielen Dank!Javascript-Problem in HTML (Popup-Galerie)
// 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 clos(id) {
var modal = document.getElementById(id);
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: 100px;
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://www.gettyimages.pt/gi-resources/images/Homepage/Hero/PT/PT_hero_42_153645159.jpg" alt="" width="300" height="200">
<img id="myImg" onClick="imgg('myModal1')"src="http://cue.me/kohana/media/frontend/js/full-page-scroll/examples/imgs/bg2.jpg" alt="" width="300" height="200">
<!-- The Modal -->
<div id="myModal" class="modal">
<span onclick="clos('myModal')" class="close">×</span>
\t <img class="mySlides" id="img_modal" src="http://cue.me/kohana/media/frontend/js/full-page-scroll/examples/imgs/bg2.jpg" >
\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" >
\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="clos('myModal1')" class="close">×</span>
\t <img class="mySlides" id="img_modal" src="http://www.gettyimages.pt/gi-resources/images/Homepage/Hero/PT/PT_hero_42_153645159.jpg" >
\t <img class="mySlides" id="img_modal" src="http://i.dailymail.co.uk/i/pix/2016/03/22/13/32738A6E00000578-3504412-image-a-6_1458654517341.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>
Ich nehme an, die gleiche ID für mehrere Elemente kann Probleme verursachen. IDs sollen eindeutig sein, Sie können ein anderes Attribut wie 'data-gallery =" 123 "' statt ID verwenden. – Aziz
@Aziz wie kann ich es verwenden? Ich weiß jetzt nicht, wo ich meine Hände aufsetzen soll, können Sie meinem Code einen Schnitt vorschlagen, damit ich mehr darüber verstehe? Vielen Dank! – Elvopresla