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
Welche Programmiersprache als Quereinsteiger für das Berufsleben?

Hallo,

Die Frage hier geht explizit an Programmierer, die idealerweise schon ein Job haben.

ich wollte fragen welche Programmiersprache gut als Quereinsteiger geeignet ist um in das Berufsleben durchzustarten.

Ich beherrsche mittlerweile etwas von Phyton und SQL.

Es gibt ja YouTuber oder Webseiten die dir versprechen in einigen Monaten in deren Kurs schon eine Arbeitsstelle zu finden, natürlich gegen Bezahlung.

Aber ich will es eigenständig schaffen, deshalb meine Frage:

Welche Programmiersprache ist gut geeignet um in kurzer Zeit ein Job auszuüben. Natürlich wird man in diesem kurzem Zeitraum nicht das ganze Know How wissen aber man sollte sich im Job weiterentwickeln. Natürlich weiß ich das ich dann nicht viel Geld bekommen werde.

Und mit welcher Programmiersprache sollte man im welchem Beruf einsteigen (z.B bei SQL kann man Daten Analyst werden.) Also was könnt ihr empfehlen.

Und kennt Ihr auch gute bücher oder YT kanäle?

Und was hattet Ihr schon für Erfahrungen im ersten Job, was war die erste Programmiersprache mit der Ihr euch beworben habt und wie war der Anfang als ihr gelernt hattet und der erste Tag als Programmierer im Job? Habt ihr Tipps an mich?

Zum Schluss noch: Bitte keine Unnötigen Kommentare abgegeben. Ich weiß es ist Zeitaufwendig, aber ich möchte denn Willen durchsetzen. Ich bin auch kein Scriptkiddi, ich will's wirklich erlernen. Ich antworte auch gerne auf eure Kommentare.

PC, Beruf, Lernen, Google, Job, Amazon, SQL, HTML, IT, Webseite, Java, JavaScript, C Sharp, Entwickler, Entwicklung, Programmiersprache, Python, Quereinsteiger, Laptop
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
Probleme mit verschiedenen Webseiten bei Nutzung von Tor Browser?

Gibt es eigentlich eine Erklärung wieso es mit verschiedensten Webseiten massive Probleme gibt, wenn ich mit Tor im Clearnet unterwegs bin? Hatte da jetzt bereits Beef mit mehreren verschiedenen Anwendungen:

Proton zb. verlangt für die Accountregistrierung plötzlich eine zwingende "2te Mailadresse", beim Surfen mit Firefox oder Chrome wird diese Frage nicht gestellt.

Re-Captchas oder Roboterchecks laden deutlich langsamer und verhalten sich z.t übermäßig penetrant, auch Cloudflare Checks failen regelmäßig.

Manche Webseiten funktionieren garnicht oder anstatt des Contents kommt eine Fehlermeldung, dass die IP-Adresse gesperrt wurde.

Ich hab versucht mich in einem Forum zu registrieren. Direkt nach der Freischaltung ist das Konto wegen angeblichen "Spams" gesperrt.

Neu erstellte Mailaccounts auf Tutanota überleben keine 10 Minuten...

Ich schätze mal, dass irgendwas mit dem Datenverkehr der zwischengeschalteten Proxys?! hier nicht stimmt. Doch was genau könnte das sein was hier durch die Leitungen fließt, was direkt von verschiedenen (nicht allen) Webseiten bzw. Boardadmins erkannt und als agressiven 'Spam' oder zumindest als 'problematisch / verdächtig' registriert wird?

Ich hatte auch hier auf GF schon Warnmeldungen wegen angeblicher Cross Site Angriffe von No-Script.

Bei einigen Seiten ist aber bislang auch alles normal und ohne Probleme....

Sollte ich besser wieder zu einem anderen Browser wechseln? Oder könnten diese "Spam" Vorwürfe im Extremfall zu irgendwelchen Nachteilen oder Problemen führen?

Wer kennt sich aus mit der Thematik oder kann mir möglichst genau erklären was hier abgeht? (oder was ich bei der Verwendung falsch mache)

Internet, Browser, Virus, Spam, Addon, JavaScript, Tor, Darknet, IP-Adresse, Proxy, Registrierung, Traffic, Fehlermeldung, DDoS-Angriff, Tor Browser
QR Code Generator Download button API generietes Bild?

Hallo, ich möchte gerade einen QR Code Generator programmieren. Dafür benutze ich die Library qrserver und jetzt möchte ich auch einen Download button hinzufügen. Ich habe ja aber keine feste source also habe ich probiert dem download einfach die selbe ID wie dem Img ohne source zu geben. Das hat aber nicht funktioniert, hat jemand eine Idee?

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>QR Code Generator</title>


    <script src="js/script.js"></script>


    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <h1>QR Code Generator</h1>


    <div class="container">
      <p>Enter URL</p>
      <div class="ButonInput">
        <input type="text" placeholder="Your URL" id="qrText" />
        <button onclick="GenerateQR()" id="btn">Generate</button>
      </div>
      <div id="imgBox">
        <img src="" alt="" id="QrImg" />
      </div>
      <a href="" download="QrImg.src " id="QrImg"> download</a>
    </div>


    <script>
      let imgBox = document.getElementById("imgBox");
      let QrImg = document.getElementById("QrImg");
      let qrText = document.getElementById("qrText");


      function GenerateQR() {
        QrImg.src =
          "https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=" +
          qrText.value;
      }
    </script>
  </body>
</html>
HTML, Webseite, CSS, JavaScript, Code, Webdesign, Webentwicklung, Visual Studio Code
AI basierte Softwareentwicklung?

Hey Leute,

ich bin fortgeschrittener Programmierer und habe großes Interesse an KI basierten Themen. Bin aber leider bis auf oberflächliche News und ChatGPT Nutzung noch nicht tiefer in dem Thema drin.

Mein konkretes Vorhaben/Ziel ist es, mithilfe solcher Modelle beispielsweise Projekte schneller zu erstellen. Beispielsweise möchte ich eine Webseite an das Modell geben (als Bild oder besser als HTML code), das dann analysiert wird. Danach soll er mir sagen können, welche Funktionalitäten auf dieser Seite vorhanden sind. Dazu soll er mir dann einen Ablaufplan erstellen oder im besten fall einen Code, den ich spezifiziere nach meinen Anforderungen. Als Resultat soll aber nicht nur ein Text herauskommen, sondern eine Ordnerstruktur mit den verschiedenen Seiten/Subdomains und darin Files, die Codes enthalten zu meinen Anforderungen.

Ich möchte irgendein Modell Füttern und Resultate sehen und das Prinzip verstehen. Ich bin ein Tutorial in Python zu maschinelles Learning durchgegangen, kann damit aber noch nicht allzu viel anfangen und denke, dass es nicht das ist, wo ich mit meinem Ziel hin möchte.

Das ist jetzt vielleicht schon ein ambitioniertes Ziel, aber mir geht es erstmal darum, einen Ansatz zu finden, wie ich überhaupt in diese Richtung gehen kann, um ein Gefühl dafür zu bekommen.

LG & Thx

JavaScript, künstliche Intelligenz, Neuronale Netze, Python, Machine Learning, ChatGPT
Hilfe mit CSS Flexbox?

wie kann ich die 4 Bilder wie folgt anordnen?

ich code noch nicht so lange, doch hier der code den ich bis jetzt habe. Also bitte nicht auslachen ^^

CSS:

    /* Dienstleistungen*/

    .dienstleistungen{

      justify-content: center;

      width: 75%;      

    }

    .mofa-zündung-service{

      height: 50%;

      width: auto;

    }

    .mofa-getriebe-revisionen{

     height: 25%;

     width: auto;

     align-self: top;

    }

    .mofa-vergaser-tuning{

      height: 25%;

      width: auto;

      align-self: top;

    }

   

    .mofa-kolben-ersatzteile{

      height: 25%;

      width: 50%;

    }

    /*!Dienstleistungen*/

HTML:

    <h3>Dienstleistungen</h3>

    <div class="Dienstleistungen">

        <li><a href="#">Service</a></li>

        <li><a href="#">Revisionen</a></li>

        <li><a href="#">Tuning</a></li>

        <li><a href="#">Ersatzteile</a></li>

        <div class="bilder_dienstleistungen">

            <img src="Bilder/zündung.jpg" alt="zündung" class="mofa-zündung-service">

            <img src="Bilder/mofa-getriebe.png" alt="getriebe" class="mofa-getriebe-revisionen">

            <img src="Bilder/vergaser 2.png" alt="vergaser" class="mofa-vergaser-tuning">

            <img src="Bilder/kolben.png" alt="kolben"   class="mofa-kolben-ersatzteile">

        </div>

    </div>

so sieht es bis jetzt aus:

Ich verstehe vor allem nicht wie ich die Bilder untereinander und gleichzeitig neben einem anderen Bild anordnen kann. (kolben)

Bild zu Frage
Homepage, HTML, Webseite, CSS, JavaScript, HTML5, Code, developement, developer, Programmiersprache, Webdesign, Webdesigner, Webentwicklung, Frontend, Visual Studio Code

Meistgelesene Fragen zum Thema JavaScript