Achso ok. 
Jedenfalls wollte ich mich nochmal bedanken, wegen der Links. Das Bootstrap Carousel passt und funktioniert jetzt bei jeden einzelnen Projekt. 
Beiträge von Franzi
-
-
Wenn ich es blöd oder umständlich erklärt habe, dann tut es mir leid. Ich dachte man versteht es. Was dachtest du was ich mit Projekt meine?
Aber jetzt haben wir das geklärt und alles ist gut..
Für 1. fehlt mir definitiv das Know-how, also bleibt mir nur 2. übrig.
Das werde ich dann morgen mal ausprobieren. Ich danke euch auf jeden Fall für die Geduld, Hilfe und die Ratschläge.
Ich wünsche euch ein schönes Wochenende. -
Ja das ist das Problem. Mein Ziel ist es unabhängige Slideshows zu nutzen. Ich brauche sie nicht in jedem Projekt, aber in mehr als zweien.
Ich hatte jetzt nochmal hochgescrollt und mir Basti's Idee mit den Slider angeschaut? Meinst du sowas? Oder muss der Code für meinen Zweck noch anders gestaltet werden? HTML,CSS oder JS?
Falls JS.. da bin ich leider keine Leuchte
-
Ich habe jetzt eine Testseite angelegt, URL https://www.franziskarausch.com/test.html
Passt die Testseite so oder fehlt etwas?
Ich hoffe das man die Fehler jetzt besser erkennt.
-
Achso. Das hab ich schon wieder gelöscht, weils nicht funktioniert hat. Im Prinzip habe ich das wie oben gemacht. Ich kopiere dir mal den kompletten HTML Code, den ich für das Modal mit den funktionierenden Slider genommen hab. Javascript siehe oben. Für das neue Projekt habe ich das einfach nur kopiert, die Bilddateien umbenannt und das Javascript gelassen. Und da haben die Bilder nicht funktioniert.
-
Code
Alles anzeigen<!-- Modal 2--> <div class="portfolio-modal modal fade" id="portfolioModal2" tabindex="-1" role="dialog" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="close-modal" data-dismiss="modal"><img src="img/close-icon.svg" alt="Close modal" /></div> <div class="container"> <div class="row justify-content-lg-end" style="padding-right: 40px;"> <div class="col-lg-8"> <div class="modal-body"> <!-- Project Details Go Here--> <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" 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> <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> <button class="btn btn-primary" data-dismiss="modal" type="button" style="background-color: #ee3461; border-style: none; box-shadow: none;"> <i class="fas fa-times mr-1"></i> Projekt schließen </button> </div> </div> </div> </div> </div> </div> </div> -
Ja der funktioniert ja auch- nach langem basteln. Bisher ist es das einzige Projekt wo ich das nutze. Ich möchte so einen Slider jetzt aber noch bei einem anderen Projekt anwenden/einfügen. Und da kommt dann der Fehler. Die Sliderpunkte, next und prev werden angezeigt, aber die Bilder funktionieren nicht richtig. Und da habe ich dann einiges probiert, aber nichts funktioniert.
-
Die URL https://www.franziskarausch.com/
Du findest den Slider unter Portfolio, in der ersten Reihe ganz rechts, wenn du das Projekt angeklickt hast.
-
Also bei dem Code oben funktioniert alles wie es soll. Muss ich trotzdem die ID zu einer Class abändern?
Der Code beinhaltet den Slider und das anklicken des Bildes, welches sich daraufhin vergrößert.
Das erste Script ist für den Slider und das 2. Script vergrößert die Bilder.
Für das 2. Projekt hatte ich das probiert und die ID und den Class Namen geändert, aber das hat auch nicht geklappt.
Es werden mir nur die Sliderpunkte angezeigt , mit den Bildern hat er Probleme.
Ok.. also doch nicht ganz so einfach.
-
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
Alles anzeigen<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>