Imagesslider

[Matthias Scharwies]

Hallo Frog,

Ein Klick öffnet das Bild in Groß-Ansicht (Hast du) und es werden Pfeile eingeblendet/ erzeugt.

Ja, hab ich! Aber bei meiner Variante öffnet sich ja nicht das Bild in Groß-Ansicht, sondern eine html-Seite und das geht ja dann nicht mit der Verlinkung, weil …

Normalerweise empfehlen wir ein Live-Beispiel, weil man da beim Inspizieren schnell einen Syntax-Fehler findet, der die Frage beantwortet.

Was mich bei Dir erstaunt hat, ist die Tatsache, dass du trotz der div-Suppe gültiges HTML verwendet hast und dein JavaScript laut Console keine Fehler aufweist. Da kannst du stolz drauf sein!

Trotzdem sollten wir erst ohne JS-Code überlegen, wie man die Bilder in thumbnails als Übersicht/Vorschau zeigen kann und dann auf Nutzerwunsch präsentieren kann.

<section id="mix" class="gallery">  
  <h2>Mix</h2>
  <a href = "mix01-1920px.jpg">
    <img class="thumbnail" src="thumbMix01.jpg" alt="">
  </a>
  <a href = "mix02-1920px.jpg">
    <img class="thumbnail" src="thumbMix02.jpg" alt="">
  </a>
  ...
</section>

[[EDIT] href-Attribut auf Bilder-URL geändert! [[/EDIT]

ist schon ganz gut. Du hast Bilder in klein (class="thumbnail", kann man später durch .gallery img{} ersetzen). Bei einem Klick öffnet sich der Link und das Bild wird in groß dargestellt.

D.h., beim click auf ein Thumbnail blende ich die gesamte Startposition aus, also btn-Slider und Thumbnails den Hamburger lass ich stehen, und das gewünschte Image dann in Großformat samt der Pfeile wird eingeblendet!

Ich hätte schwören können, hier mit einer forEach-Schleife durchzukommen!!

Ich würde jetzt Dein Script anpassen:

Bei einem Klick öffnet sich kein Link (kann man mit preventDefault abschalten), sondern die Galerie.

Welche Bilder zur Galerie gehören, ermittelt das JS. Es holt sich mit event.Target das geklickte Element und sucht dann die passende section und ermittelt die id (z.B. mix, damit nicht die anderen sections aktiviert werden).

Mit querySelectorAll('#mix img') erstellst du eine Liste aller Bilder, bzw. dann von deren URLs.

Die URL des geklickten Links (href-Attribut) wird in ein img als src-Attribut eingefügt und groß dargestellt.

Es werden Pfeile als Buttons eingeblendet/ erzeugt. (Kein links-Pfeil beim 1., kein weiter-Pfeil beim letzten.)

Wie @Gunnar Bittersmann in der ihm eigenen Art bereits erwähnt hatte, kannst du Buttons auch mit der Tab-Taste ansteuern. Das ist besser als die div-Elemente.

Oft hat man unten Punkte, die zeigen, wie viele Bilder in der Galerie sind.

Das wäre ein Übersichts-Bonus. Evtl auch eine automatische Slideshow, die Bilder automatisch weiter schiebt, aber eben auch eine manuelle Steuerung erlaubt.

Ich hätte schon Lust, dich da in den nächsten Tagen/Wochen zu begleiten.

Herzliche Grüße

Matthias Scharwies