Hey,
ich bin am verzweifeln. Vorab, das ist mein erster Beitrag. Ich habe ein wenig HTML und CSS Kenntnisse aber keine in JavaScript.
Ich möchte auf einer Website eine Bildergalerie bauen die in verschiedene Rubriken eingeteilt ist. Je Rubrik soll eine Überschrift und eine Auswahl an Bildern zu sehen sein. Klickt man auf ein Bild soll in einem "Pop-up, Modal bzw. Lightbox" Das Bild groß innerhalb eines Karussell geöffnet werden mit einem kleine Text darunter.
Ich habe mir von eine Plattform also das gewünschte CodeSnippet gezogen und meine Bilder reingepackt. Passt auch.
Dann wollte ich Rubrik 2 anlegen und da geht nix mehr. Habe mich schlau gemacht und unterschiedliche ID`s verwendet aber das ganze läuft trotzdem nicht. Lightbox 1 zeigt die Bilder von 2 an oder es entstehen leere Slides.
Ich denke es liegt daran dass ich im JS-Teil irgendetwas vernachlässigt habe. Beherrsche die """Sprache""" auch nicht.
Würde mich extrem über einen Tipp freuen.
LG Max
Das ist mein kläglich gescheiterter Versuch eine weitere Lightbox einzufügen...
Code
<body>
<h3 style="text-align:center">Überschrift 2</h3>
<div class="row">
<div class="column">
<img src="https://www.reparaturkonzept.de/wp-content/uploads/2018/04/Photovoltaik.jpg" style="width:100%" onclick="openModal();currentSlide(1)" class="hover-shadow cursor">
</div>
<div class="column">
<img src="https://www.reparaturkonzept.de/wp-content/uploads/2018/04/MRT.jpg" style="width:100%" onclick="openModal();currentSlide(2)" class="hover-shadow cursor">
</div>
<div class="column">
<img src="https://www.reparaturkonzept.de/wp-content/uploads/2018/04/Landwirtschaft.jpg" style="width:100%" onclick="openModal();currentSlide(3)" class="hover-shadow cursor">
</div>
<div class="column">
<img src="https://www.reparaturkonzept.de/wp-content/uploads/2018/04/Heizungsanlage.jpg" style="width:100%" onclick="openModal();currentSlide(4)" class="hover-shadow cursor">
</div>
</div>
<div id="myModal1" class="modal1">
<span class="close cursor" onclick="closeModal()">×</span>
<div class="modal-content">
<div class="mySlides1">
<div class="numbertext">1 / 4</div>
<img src="https://www.reparaturkonzept.de/wp-content/uploads/2018/04/Photovoltaik.jpg" style="width:100%">
</div>
<div class="mySlides1">
<div class="numbertext">2 / 4</div>
<img src="https://www.reparaturkonzept.de/wp-content/uploads/2018/04/MRT.jpg" style="width:100%">
</div>
<div class="mySlides1">
<div class="numbertext">3 / 4</div>
<img src="https://www.reparaturkonzept.de/wp-content/uploads/2018/04/Landwirtschaft.jpg" style="width:100%">
</div>
<div class="mySlides1">
<div class="numbertext">4 / 4</div>
<img src="https://www.reparaturkonzept.de/wp-content/uploads/2018/04/Heizungsanlage.jpg" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<div class="caption-container">
<p id="caption"></p>
</div>
<div class="column">
<img class="demo cursor" src="https://www.reparaturkonzept.de/wp-content/uploads/2018/04/Photovoltaik.jpg" style="width:100%" onclick="currentSlide(1)" alt=" Text 1 Durch genaues Untersuchen des Schadens konnten wir eine Ersparnis i.H.v. xxx€ erzielen. Dabei ist uns lorem ipsum delore quarantine de corus after allee."alt" attribute as an image caption text inside the modal.">
</div>
<div class="column">
<img class="demo cursor" src="https://www.reparaturkonzept.de/wp-content/uploads/2018/04/MRT.jpg" style="width:100%" onclick="currentSlide(2)" alt="Text 2 Durch genaues Untersuchen des Schadens konnten wir eine Ersparnis i.H.v. xxx€ erzielen. Dabei ist uns lorem ipsum delore quarantine de corus after allee.">
</div>
<div class="column">
<img class="demo cursor" src="https://www.reparaturkonzept.de/wp-content/uploads/2018/04/Landwirtschaft.jpg" style="width:100%" onclick="currentSlide(3)" alt="Text 3 Durch genaues Untersuchen des Schadens konnten wir eine Ersparnis i.H.v. xxx€ erzielen. Dabei ist uns lorem ipsum delore quarantine de corus after allee.">
</div>
<div class="column">
<img class="demo cursor" src="https://www.reparaturkonzept.de/wp-content/uploads/2018/04/Heizungsanlage.jpg" style="width:100%" onclick="currentSlide(4)" alt="Text 4 Durch genaues Untersuchen des Schadens konnten wir eine Ersparnis i.H.v. xxx€ erzielen. Dabei ist uns lorem ipsum delore quarantine de corus after allee.">
</div>
</div>
</div>
<script>
function openModal() {
document.getElementById("myModal1").style.display = "block";
}
function closeModal() {
document.getElementById("myModal1").style.display = "none";
}
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides1");
var dots = document.getElementsByClassName("demo");
var captionText = document.getElementById("caption");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
captionText.innerHTML = dots[slideIndex-1].alt;
}
</script>
</body>