Hallo,
ich habe auf meiner Seite eine Galerie mit einigen Bildern. Diese kann ich öffnen/schließen und durchklicken.
Leider habe ich das Problem, dass wenn ich mich durch die Galerie durchklicke, er leider, warum auch immer, wieder zurück zum ersten Bild springt, anstatt die Bilder komplett durchzulaufen.
Ich finde den Fehler nicht.
HTML Code:
<div class="gallery-container">
<div class="gallery" id="gallery">
<!--Erste Reihe-->
<img src="1_1.webp" alt="Bild 1_1" onclick="openModal();currentSlide(1)" class="hover-shadow cursor gallery-img" data-index="1">
<img src="1_2.webp" alt="Bild 1_2" onclick="openModal();currentSlide(2)" class="hover-shadow cursor gallery-img" data-index="2">
<img src="2.1.webp" alt="Bild 2_1" onclick="openModal();currentSlide(3)" class="hover-shadow cursor gallery-img" data-index="3">
usw. bis
<img src="8_2.webp" alt="Bild 8_2" onclick="openModal();currentSlide(23)" class="hover-shadow cursor gallery-img" data-index="23">
<img src="8_3.webp" alt="Bild 8_3" onclick="openModal();currentSlide(24)" class="hover-shadow cursor gallery-img" data-index="24">
</div>
<div id="myModal" class="modal">
<span class="close cursor" onclick="closeModal()">×</span>
<div class="modal-content">
<!-- Fügen Sie für jedes Bild in der Galerie eine Modal Slide hinzu -->
<div class="mySlides">
<img src="1_1.webp" style="width:100%">
</div>
<div class="mySlides">
<img src="1_2.webp" style="width:100%">
bis
<div class="mySlides">
<img src="8_2.webp" style="width:100%">
</div>
<div class="mySlides">
<img src="8_3.webp" style="width:100%">
</div>
</div>
<!-- Vorwärts/Rückwärts Kontrollen -->
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
JavaScript:
function currentSlide(n) {
showSlidesModal(slideIndex = n);
}
function showSlidesModal(n) {
var i;
var slidesModal = document.getElementsByClassName("mySlides");
if (n > slidesModal.length) {
slideIndex = 1
}
if (n < 1) {
slideIndex = slidesModal.length
}
for (i = 0; i < slidesModal.length; i++) {
slidesModal[i].style.display = "none";
}
slidesModal[slideIndex - 1].style.display = "block";
}
var galleryImages = document.getElementsByClassName("gallery-img");
for (var i = 0; i < galleryImages.length; i++) {
galleryImages[i].onclick = function(event) {
openModal();
currentSlide(parseInt(event.target.getAttribute('data-index')));
}
}
for (var i = 0; i < galleryImages.length; i++) {
galleryImages[i].setAttribute('data-index', i + 1);
}
window.onclick = function(event) {
if (event.target == document.getElementById('myModal')) {
closeModal();
}
}
function plusSlides(n, modal = false) {
var slides;
if (modal) {
slides = document.getElementsByClassName("mySlides");
}
else {
slides = document.getElementsByClassName("slide");
}
slideIndex += n;
if (slideIndex > slides.length) {
slideIndex = 1
}
if (slideIndex < 1) {
slideIndex = slides.length
}
for (var i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slides[slideIndex - 1].style.display = "block";
if (!modal) {
resetAnimations(slides[slideIndex - 1]);
}
}
document.querySelector(".modal .prev").onclick = function() {
plusSlides(-1, true);
};
document.querySelector(".modal .next").onclick = function() {
plusSlides(1, true);
};
function openModal() {
document.getElementById('myModal').style.display = "block";
}
function closeModal() {
document.getElementById('myModal').style.display = "none";
}
showSlides(slideIndex);
