Hallo,
ich habe in meinem Portfolio mehrere Projekte vorgestellt. In einem Projekt verwende ich einen Slider und Bilder die sich beim anklicken vergrößern. Für das eine Projekt funktioniert das alles auch. Jetzt möchte ich diesen Code auf ein 2. Projekt anwenden. Der Slider wird dargestellt, die Bilder aber leider nicht richtig. Ich bin nicht so gut in JavaScript und habe auch schon gegoogelt, bin aber nicht fündig geworden, bzw. funktioniert nichts was ich bisher probiert habe. Ich hoffe es kann mir jemand helfen.
Vielen Dank im voraus. 
Code
<div class="slideshow-container">
<div class="mySlides"> <img class="myImages" id="myImg" class="img-fluid d-block mx-auto" src="img/portfolio_grid/parkhaus_app1_full.jpg" alt="" style="width: 663px; height: auto;"/> </div>
<div class="mySlides"> <img class="myImages" id="myImg" class="img-fluid d-block mx-auto" src="img/portfolio_grid/parkhaus_app2_full.jpg" alt="" style="width: 663px; height: auto;"/></div>
<div class="mySlides"> <img class="myImages" id="myImg" class="img-fluid d-block mx-auto" src="img/portfolio_grid/parkhaus_app3_full.jpg" alt="" style="width: 663px; height: auto;"/></div>
<div class="mySlides"> <img class="myImages" id="myImg" class="img-fluid d-block mx-auto" src="img/portfolio_grid/parkhaus_app4_full.jpg" alt="" style="width: 663px; height: auto;"/></div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<!-- Bild vergrößern Anfang -->
<div id="myPic" class="pic">
<span class="schliessen">×</span>
<img class="pictext" id="img01">
<div id="cap"></div>
</div>
<!-- Bild vergrößern Ende -->
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
<span class="dot" onclick="currentSlide(4)"></span>
</div>
<br>
</div>
<script>
// Slider
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("mySlides");
var dots = document.getElementsByClassName("dot");
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";
}
</script>
<script>
// Bild vergrößern
var modal = document.getElementById("myPic");
// Get the image and insert it inside the modal - use its "alt" text as a caption
var images = document.getElementsByClassName("myImages");
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("cap");
for (var i = 0; i < images.length; i++) {
var img = images[i];
// and attach our click listener for this image.
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("schliessen")[0];
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
</script>
Ich wünsche euch ein schönes Wochenende.