JavaScript – die besten Beiträge

Verwandte Themen
JulianOnFire
23.01.2024, 14:11

JavaScript: Warum springt die Galerie immer wieder zum ersten Bild zurück?

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()">&times;</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)">&#10094;</a>
    <a class="next" onclick="plusSlides(1)">&#10095;</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);
HTML, Webseite, JavaScript, Code, Webdesign, Visual Studio Code
1 Antwort
Jacob13579
15.01.2024, 22:14

Programmiersprachen Grundlage?

Huhu,

ich starte höchstwahrscheinlich dieses Jahr einen Ausbildung als Fachinformatiker in Fachrichtung Anwendungsentwicklung. Am Mittwoch erfahre ich es.

Ich habe mir nun schon einen Online-Kurs zu Python gekauft und will mir dann bis zum Ausbildungsstart Programmierkenntnisse aneigen und eventuell auch schon eigene Projekte umsetzen, damit ich auch Praxiserfahrung sammeln kann. Es geht darum, dass ich schon direkt zu Ausbildungsstart ein optimales Verständnis habe und ich dann während der Ausbildung gute Leistung erzielen kann.

Dass ich das tun will, steht jedenfalls nicht zur Diskussion. Ich würde gerne wissen, ob es auch sinnvoll wäre HTML, CSS und JavaScript zu erlernen und Projekte umzusetzen. Kann man das immer auch irgendwie mal gebrauchen? Bis Ausbildungsstart will ich halt auch meine Zeit noch sinnvoll nutzen und bestenfalls schon vorher viel lernen.

Sollte ich die Ausbildung nicht bekommen (was ich bezweifle), starte ich halt das Informatik Bachelorstudium (Angewandte Informatik) nach meiner Ausbildung zum Verwaltungsfachangestellten, in der ich jetzt noch im ersten Lehrjahr bin. Also macht es dennoch Sinn, sich die Fähigkeiten anzueignen, ob ich die Ausbildung nun bekomme oder nicht.

Hat jemand noch weitere Ideen, wo ich mir ein solides Grundwissen aufbauen könnte in der Zeit? Und ja, Projekte umsetzen ist viel wichtiger, als die trockene Theorie. Ich weiß.

Liebe Grüße

programmieren, JavaScript, Python, Softwareentwicklung
2 Antworten

Meistgelesene Beiträge zum Thema JavaScript

Mehr meistgelesene Fragen zu JavaScript