Suche Galerie mit Thumbnails und Großansicht ohne neues Fenster

[be-tina]

Ich habe noch eine ganz alte HTML Seite, die ich auf Contao umbauen möchte.

Der Kunde mag aber die Galerie, die verwendet wurde so gerne.

http://www.architekt-mangelmann.de/wohn_vongries.html

Gibt es so etwas für Contao?

[Spooky]

Kannst du dir prinzpiell mit Board Mitteln selbst basteln, ja.

[be-tina]

Oh, ich weiß nicht, wie ich das machen soll.

Hast du da einen Tipp oder ist das zu kompliziert zu erklären für jemanden mit wenig Ahnung von JavaScript?

[Spooky]

Es wäre sogar nur mit CSS möglich, denke ich . Evt. kannst du das ja als Kleinstauftrag in Auftrag geben.

[be-tina]

Ja, das würde ich machen.

Wie könnte ich das dann verwenden? Wäre das mit der Contao-Galerie kompatibel?

[Spooky]

Ja, es ist einfach nur ein eigenes Galerie Template + CSS (und evt. JavaScript, aber geht meiner Meinung nach auch ohne).

[tab]

Das einzige, was wohl nicht nur mit CSS gehen wird ist, dass immer das zuletzt ausgewählte Bild stehen bleibt, wenn die Maus über keinem der Thumbnails positioniert ist.

[be-tina]

Es könnte auch nach Klick auf das kleine Bild dieses in groß rechts angezeigt werden. Muss kein Mouse-Over sein - ist vielleicht sogar schlecht wegen der ganzen Touch Devices.

[Andreas]

Ich glaube ich würde das mit JS machen, weil man damit mehr Möglichkeiten hat. Z.B. braucht man dann nur einen Container für das große Bild und braucht das Bild erst zu laden, wenn es benötigt wird.

Gibt man den Thumbs dann ein Attribut 'data-big_image="Pfad zum großen Bild"', dann hat man den Pfad beim Hovern zur Verfügung.

Den Focus kannt man leicht abfragen, wenn man den Thumbs das Attribute tabindex="0" gibt.

Hier mal Lösungen nur mit CSS. Man sieht, dass man damit sehr abhängig von einer entsprechenden Elementestruktur ist, und dass die Bilder alle bereits geladen sein müssen.
https://jsfiddle.net/Andreas/vnu1rw3u/3/