Bildauswahl Reset

[Rolf B]

Hallo envoy,

Du könntest ganz stumpf im Reset-Button dies tun:

<button onclick="changeImage('01.jpg', '#bannerImage_left'); changeImage('01.jpg', '#bannerImage_right')">RESET</button>

Aber...

Stop zum ersten. <img> ist kein interaktives Element. Da muss ein Button drumrum und für den kannst Du auf click reagieren.

Stop zum zweiten: <img> braucht zwingend ein alt-Attribut. Bei dekorativen Bildern kann es leer sein, bei Bildern, die Inhalt darstellen, muss alt einen beschreibenden Text für das Bild enthalten.

Stop zum dritten: Deine Thumbnails sind eine Liste, gelle? Also solltest Du sie auch als solche auszeichnen. Im CSS kannst Du mit list-style:none die Listenpunkte entfernen, mit padding das Padding des ul beseitigen und mit display:flex dafür sorgen, dass die Thumbs nebeneinander liegen. Mit overflow-x:auto könntest Du sie ggf. auch horizontal scrollbar machen, und wenn Du dann noch gap:1em hinzufügst (passend zum horizontalen Padding des ul), hast Du auch Abstand zwischen den Thumbs.

Der Name des Vollbilds kann in einem data-Attribut hinterlegt werden. Das fragt sich im JavaScript über die dataset-Eigenschaft ab.

Die Links/Rechts div könnten auch eine section sein. Die Klasse tabcontent ist suboptimal, finde ich, das ist eine Galerie und warum sollte sie dann nicht "gallery" heißen? Dem großen Bild kann man auch eine Klasse "banner" geben, um es mit JavaScript besser zu finden.

Möchtest Du vielleicht einen Text zum Bild anzeigen? In dem Fall sollte dein Hauptbild in eine figure mit figcaption eingehüllt werden.

<section id="left" class="gallery">
  <img class="banner" src="..." alt="...">
  <ul>
    <li><button type="button">
      <img src="pic01_thumb.png" data-pic="pic01.png" alt="...">
    </button></li>
    <li><button type="button">
      <img src="pic02_thumb.png" data-pic="pic02.png" alt="...">
    </button></li>
    <li><button type="button">
      <img src="pic03_thumb.png" data-pic="pic03.png" alt="...">
    </button></li>
    <li><button type="button">
      <img src="pic04_thumb.png" data-pic="pic04.png" alt="...">
    </button></li>
  </ul>
</section>

Stylesheet (CSS Datei oder <style>-Element):

.gallery ul {
   display: flex;
   list-style: none;
   padding: 0 1em;
   gap: 1em;
   overflow-x: scroll;
}
.gallery li button {
   padding: 0;
   border: none;
   cursor: pointer;
}

Den Pointer setzt Du im Stylesheet, und die Margins bei den Thumbs brauchst Du nicht mehr, darum kümmert sich das Padding der Liste und die gap-Eigenschaft.

Die Frage nach der click-Behandlung kann man auf 2 Arten beantworten. Du kannst natürlich weiterhin die Buttons mit onclick zuschmeißen. Würde ich aber nicht tun. Dafür gibt's unobstrusive Javascript. Dieses Script sollte am Ende des body stehen ODER im script-Element sollte das defer-Attribut stehen, damit Du nicht mit einem DOMContentLoaded Handler rumfummeln musst.

Ich registriere einen click-Handler auf dem body. Egal, welchen Button du klickst, das Event blubbert im DOM nach oben und gelangt hinein. Deshalb wird im Handler als erstes geprüft, ob das überhaupt ein Klick auf ein Thumbnail-Image war.

event.target enthält das Element, auf das geklickt wurde. Vermutlich das thumb-Image.
event.target.closest("button") geht die Elternkette hoch und stoppt beim ersten Button.
event.target.closest(".gallery") geht die Elternkette hoch und stoppt beim ersten Element mit Klasse gallery (dafür sorgt der Punkt vor gallery!).

Auf diese Weise orientiert sich der click-Handler automatisch im DOM und muss gar nicht gesagt bekommen, für welche Hälfte er agieren soll.

Wenn kein button oder keine Galerie gefunden wird, bricht der Handler ab. Andernfalls sucht er sich das Thumb-Image im Button und das Banner-Image in der Galerie (deswegen die banner-Klasse auf dem Banner-Bild!) und überträgt src und alt (deine changeImage-Funktion wird ähnliches tun, oder?). Die Suche nach dem thumb-Image im Button ist vielleicht übervorsichtig, aber je nach Seitengestaltung kann es auch sein, dass event.target doch nicht das Thumb-Bild ist, sondern Gedöns drumherum.

document.body.addEventListener("click", function(event) {
   let button = event.target.closest("button");
   let galerie = event.target.closest(".gallery");

   // Ist es ein Button in einer Galerie? Wenn nicht, nichts tun.
   if (!button || !galerie) return;

   // Thumb-Image und Banner-Image Elemente finden
   let thumb = button.querySelector("img");
   let banner = galerie.querySelector(".banner");

   // Banner aus Thumb-Informationen befüllen
   banner.src = thumb.dataset.pic;
   banner.alt = thumb.alt;
});

// Der Reset-Button braucht eine ID, damit wir ihn eindeutig finden
document.querySelector("#reset").addEventListener("click", function() {
   let galleries = document.querySelectorAll(".gallery");
   for (let gallery of galleries) {
      let banner = galerie.querySelector(".banner");
      let thumb1 = gallery.querySelector("button img");

      // Banner aus Thumb-Informationen befüllen
      banner.src = thumb.dataset.pic;
      banner.alt = thumb.alt;
   }
});

Für den Reset gibt's dann eine ziemlich generische Lösung. Das Script sucht sich alle Galerien und durchläuft sie (for...of-Schleife). Je Galerie sucht es sich das erste Image in einem Button und verwendet seine Werte für das Banner-Image.

Fettich 😉 Ich hoffe, der Kram funktioniert auch, das ist 100% ungetestet.

Rolf