IMG Modal Bootstrap und Slider Code funktioniert nicht für zweites Portfolio Projekt
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
Kommentar abgeben zu diesen Beitrag/Code ?Dann hier klicken
Der hier verwendete Code
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<link href="/css_webseite/bootstrap.min.css" rel="stylesheet">
<style>
.mySlides {display: none}
img {vertical-align: middle;}
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 38%;
width: auto;
padding: 16px;
margin-top: -22px;
color: #ee3461;
font-weight: bold;
font-size: 30px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
.prev {
left: 0;
border-radius: 0 3px 3px 0;
}
/* On hover, add a background color with a little bit see-through */
.prev:hover, .next:hover {
background-color: rgba(238,52,97,0.8);
color: #fffafa;
}
/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #ee3461;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.dot:hover {
background-color: #ff527d;
}
/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
.prev, .next,.text {font-size: 11px}
}
/* Bild vergrößern */
#myImg {
cursor: pointer;
transition: 0.3s;
}
#myImg:hover {opacity: 0.7;}
/* The Modal (background) */
.pic {
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(35,31,32); /* Fallback color */
background-color: rgba(35,31,32,0.9); /* Black w/ opacity */
}
/* Modal Content (image) */
.pictext {
margin: auto;
display: block;
width: 80%;
max-width: 1000px;
height: auto;
padding-left: 150px;
padding-top: 100px;
}
/* Add Animation */
.pictext, #cap {
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.6s;
animation-name: zoom;
animation-duration: 0.6s;
}
@-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 */
.schliessen {
position: absolute;
top: 50px;
right: 103px;
color: #fffafa;
font-size: 40px;
font-weight: light;
transition: 0.3s;
}
.schliessen:hover,
.schliessen:focus {
color: #ee3461;
text-decoration: none;
cursor: pointer;
}
/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
.pictext {width: 100%;}
.list-inline li {padding-bottom: 5px;}
#myPic .schliessen {right:20px;}
.pictext {padding-left: 15px;
padding-right: 15px;}
.modal-content .container h2 {font-size: 30px; }
.portfolio-modal { max-width: 100vw;}
.portfolio-modal .modal-content {padding-left: 10px;
text-align: center;}
.modal-content .container .myImages { max-width: 100%;
height: auto;}
.prev {font-size: 20px;
font-weight: bold;
padding: 8px;
top: 31%;}
.next {font-size: 20px;
font-weight: bold;
padding: 8px;
top: 31%;}
}
img{
width: 663px; height: auto;
}
</style>
</head>
<body>
<h1>Projekt 1</h1>
<div class="container">
<div class="row justify-content-lg-end">
<div class="col-lg-8">
<div class="modal-body">
<h2 class="text-uppercase">Parkhaus App</h2>
<p class="item-intro text-muted">Appgestaltung </p>
<div class="slideshow-container">
<div class="mySlides"> <img class="myImages" src="/image/parkhaus_app1_full.jpg" alt=""> </div>
<div class="mySlides"> <img class="myImages" src="/image/parkhaus_app2_full.jpg" alt=""></div>
<div class="mySlides"> <img class="myImages" src="/image/parkhaus_app3_full.jpg" alt=""></div>
<div class="mySlides"> <img class="myImages" src="/image/parkhaus_app4_full.jpg" alt=""></div>
<a class="prev" onclick="plusSlides(-1,0)">❮</a>
<a class="next" onclick="plusSlides(1,0)">❯</a>
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1,0)"></span>
<span class="dot" onclick="currentSlide(2,0)"></span>
<span class="dot" onclick="currentSlide(3,0)"></span>
<span class="dot active" onclick="currentSlide(4,0)"></span>
</div>
<br>
</div>
<p style="text-align: left;">Im Rahmen meines UX Kurses habe ich eine Parkplatz App gestaltet. Nach dem Wireframe Entwurf, habe ich die App im Adobe XD als Prototyp erstellt.
Diese App bietet die Möglichkeit die Parkplatzsuche zu erleichtern. Weiterhin ist es möglich direkt ein Ticket bargeldlos zu bezahlen oder einen Parkplatz zu buchen. </p>
<ul class="list-inline">
<li>© Design by Franziska Rausch <span style="color: #ee3461;"> ♥ </span>2021</li>
<li>erstellt in Adobe Xd, Adobe Illustrator, Adobe Photoshop</li>
</ul>
</div>
</div>
</div>
</div>
<h1>Projekt 2 </h1>
<div class="container">
<div class="row justify-content-lg-end">
<div class="col-lg-8">
<div class="modal-body">
<h2 class="text-uppercase">Parkhaus App</h2>
<p class="item-intro text-muted">Appgestaltung </p>
<div class="slideshow-container">
<div class="mySlides"> <img class="myImages" src="/image/parkhaus_app1_full.jpg" alt=""> </div>
<div class="mySlides"> <img class="myImages" src="/image/parkhaus_app2_full.jpg" alt=""></div>
<div class="mySlides"> <img class="myImages" src="/image/parkhaus_app3_full.jpg" alt=""></div>
<div class="mySlides"> <img class="myImages" src="/image/parkhaus_app4_full.jpg" alt=""></div>
<a class="prev" onclick="plusSlides(-1,1)">❮</a>
<a class="next" onclick="plusSlides(1,1)">❯</a>
<div id="myPic" class="pic">
<span class="schliessen">×</span>
<img class="pictext" id="img01">
<div id="cap"></div>
</div>
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1,1)"></span>
<span class="dot" onclick="currentSlide(2,1)"></span>
<span class="dot" onclick="currentSlide(3,1)"></span>
<span class="dot active" onclick="currentSlide(4,1)"></span>
</div>
<br>
</div>
<p style="text-align: left;">Im Rahmen meines UX Kurses habe ich eine Parkplatz App gestaltet. Nach dem Wireframe Entwurf, habe ich die App im Adobe XD als Prototyp erstellt.
Diese App bietet die Möglichkeit die Parkplatzsuche zu erleichtern. Weiterhin ist es möglich direkt ein Ticket bargeldlos zu bezahlen oder einen Parkplatz zu buchen. </p>
<ul class="list-inline">
<li>© Design by Franziska Rausch <span style="color: #ee3461;"> ♥ </span>2021</li>
<li>erstellt in Adobe Xd, Adobe Illustrator, Adobe Photoshop</li>
</ul>
</div>
</div>
</div>
</div>
<script>
var slideIndex = 1;
showSlides(slideIndex,0);
showSlides(slideIndex,1);
function plusSlides(n,c) {
showSlides(slideIndex += n,c);
}
function currentSlide(n,c) {
showSlides(slideIndex = n,c);
}
function showSlides(n,c) {
console.log(n,c);
var i;
var container=document.getElementsByClassName('slideshow-container')[c];
var slides = container.getElementsByClassName("mySlides");
var dots = container.querySelectorAll('.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";
}
var modal = document.getElementById("myPic");
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];
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("schliessen")[0];
span.onclick = function() {
modal.style.display = "none";
}
</script>
</body>
</html>