Anklickbare Bildergalerie ohne Lightbox

  • Ein freundliches "Hallo" in die Runde!
    Wegen akuter Verzweiflung, ganz frisch dazugestoßen und direkt ein Überfall geplant - Anfängerprobleme ;)


    Ich versuche mich gerade an einer Künstlerwebseite, die mehrere Galerien beinhaltet. Die Bilder sollen groß an- und durchgeklickt werden können.

    Leider sind die meisten Tutorials&Beiträge ziemlich alt und jede Seite schreibt etwas anderes. Ich hatte mich an w3schools gehalten, weil es dort viele detaillierte Anleitungen gibt. Dort integrieren sie aber praktisch alle "onclick"-Events im HTML. Klappte zwar gut, hatte aber danach gelesen, dass dies ganz schlechtes JS sei.

    Nun versuche ich also alles umzuschreiben und hänge schon bei den Bildern fest.


    Wenn ich die var in die Funktion einsetze, können weder src noch alt gefunden werden und das aufgehende Fenster bleibt leer. Als inline klappte es vorher mit "element.src/.alt".

    Hier erstmal der Code (der Einfachheit halber nur die erste Galerie mit drei Beispielen reingeschrieben. In Wahrheit ist es eine ganze Flut von Bildern):


    Außerdem scheitere ich auch gänzlich bei dem Versuch, daraus eine Slideshow zu machen. Durch die letzte Funktion bekomme ich das große Bild ja nur wieder zu.

    Hatte schon versucht mehrere Beispiele von w3schools in unterschiedlichsten Weisen einzufügen und zu ändern, aber erfolglos.


    Falls mir auch da jemand auf die Sprünge helfen könnte, wären meine Nerven unendlich dankbar! ;)


    P.s.: Ich möchte ganz bewusst kein Lightbox, etc. einbinden, da es mir darum geht JS richtig zu lernen und zu verstehen. Und am liebsten so, wie man es am aktuellsten macht.


    Danke schonmal im Vorraus! :)

  • Zitat

    Ich möchte ganz bewusst kein Lightbox, etc. einbinden, da es mir darum geht JS richtig zu lernen und zu verstehen. Und am liebsten so, wie man es am aktuellsten macht.

    Das ist natürlich ein Grund. Obwohl man auch beim Einsatz von fertigen Skripts einiges lernen kann.


    Ich sehe da zwei Probleme:

    1. Im HTML finde ich keine Klasse "bild", so dass ich erwarten würde, dass die Variable hier:

    var bilder = document.getElementsByClassName("bild");

    eine leere Nodelist ergibt.

    2. Man muss sich klar machen, was mit der Variablen x passiert: Beim Laden der Seite durchläuft sie die Werte von 0 bis bilder.length -1 und hat nach dem Schleifenende den Wert bilder.length. Viel später wird durch den Benutzer auf das Bild geklickt, dann hat x immer noch diesen Wert und dieser Index überschreitet die Grenze der Nodelist. Abhilfe: Die Variable x mit let definieren:

    for (let x = 0; x < bilder.length; x++) {

    dann findet der Eventlistener den Wert vor, der beim Registrieren vorhanden war.

    Unser basti hat dazu mal eine Demo gemacht:

    https://jsfiddle.net/Sempervivum/2fem3pq6/2/

    Auch wenn Du mit forEach über die Nodelist iterierst, wird es funktionieren, ist ja das Äquivalent zu jQuerys each.


    PS: Für eine kompakte Slideshow findest Du z. B. hier den Code:

    https://www.mediaevent.de/javascript/simple-lightbox.html

  • Super, vielen Dank, jetzt hat es endlich funktioniert!

    (Die Klassen hatte ich in meiner Müdigkeit vergessen hier mit reinzutippen. In meiner Datei existieren sie natürlich.)

    Aber das Problem lag bei "var", das war ein gutes Beispiel zum Verständnis.


    Das ist natürlich ein Grund. Obwohl man auch beim Einsatz von fertigen Skripts einiges lernen kann.

    Stimmt! Ich hatte mich leider dumm und dämlich gesucht, um Vorlagen zu finden, die ohne Lightbox arbeiten. Die fand ich nur bei w3schools, dafür aber mit den inline-Elementen. Falls du da was wüsstest, gerne her damit!


    An der Slideshow hänge ich aber weiterhin, auch bei der von mediaevent.

    Letztendlich versuche ich dieses hier https://www.w3schools.com/w3cs…e=tryw3css_slideshow_self in meine Großansicht zu bekommen.


    Ich habe es erstmal so übernommen (Buttons in den Modalabschnitt gepackt, Klasse angepasst und zweite for-Schleife eingefügt, damit .style.display = "block" gelesen werden kann ) und hinter die andere Funktion gestellt. Bilder lassen sich zwar öffnen, aber nicht weiterklicken. Ich hatte es so verstanden, dass JS die Befehle von oben nach unten abarbeitet und hoffte, nachdem man das Bild geöffnet hat, würde die nächste Funktion automatisch greifen? ..muss ich den Modalabschnitt doch direkt integrieren?


    Und vor allem: wie bekomme ich "onclick" aus den Buttons? Könnte ich das mit

    Code
    <button class="next" >&#10095;</button>
    document.getElementByClassName("next").addEventListener("click", function() {
    } )

    machen?

    Nur auf die passende Funtkion komme ich nicht. Im tag fehlt mir dann ja das "plusDivs(1)", worauf sich die Funkton ursprünglich bezog. Wie bekomme ich das nun neu dort rein? Noch eine Variable mit "n" anlegen?

  • Die Funktion heißt getElementsByClassname und liefert, wie der Name schon sagt, kein einzelnes Element sondern eine Nodelist, im wesentlichen ein Array. Daher musst Du den Eventlistener in einer Schleife über diese Nodelist registrieren:

    Code
    document.getElementsByClassName("next").forEach((item, idx) => {
        item.addEventListener("click", (event) => {
            // die Aktionen fuer den Klick
        });
    });
  • Ja, ich war mir nur nicht sicher, ob es nur einen next-Button gibt oder mehrere. Wenn es nur einen gibt, kannst Du auch document.querySelector('.next') verwenden, das liefert dann nur ein Element zurück.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!