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):

<div class="tab">
  <button class="tablinks" onclick="openTab(event, 'oel1')">Galerie 1</button>
  <button class="tablinks" onclick="openTab(event, 'oel2')">Galerie 2</button>
  <button class="tablinks" onclick="openTab(event, 'acryl')">Galerie 3</button>
</div>

<div id="oel1" class="tabcontent">
    <div class="grid">

    <img src="bilder/oel_1/bild1.jpg" 
         alt="Beispiel"/>

    <img src="bilder/oel_1/bild2.jpg" 
         alt="Beispiel"/>

    <img src="bilder/oel_1/bild3.jpg" 
         alt="Beispiel"/>
    </div>
.
.
.


<!-- Modal for full size images on click-->
<div id="fullsize" class="modal">
   <img id="pic" class="bigImg">
   <p id="caption"></p>
</div>

var bilder = document.getElementsByClassName("bild");
    for (var x = 0; x < bilder.length; x++) {
    bilder[x].addEventListener("click", gross);
    }

function gross() {
  document.getElementById("pic").src = bilder[x].src; //<- Nicht gefunden
  document.getElementById("fullsize").style.display = "block";
  let captionText = document.getElementById("caption");
  captionText.innerHTML = bilder[x].alt; //<- Nicht gefunden
} 

//Modal
document.getElementById("fullsize").addEventListener("click", function() {
document.getElementById("fullsize").style.display="none";
} )

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!

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.

Zitat von Sempervivum

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

<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?

Verstehe! Könnte man da nicht auch einfach eine [0] dahinter schreiben?