Servus!

Hallo, es gibt ja die Möglichkeit,ein Bild per JS in einem dialog-Element vergrößert darzustellen:

Frage geht das auch mit allen Bildern einer Galerie (in einem array)?

@gewe

Ja, das geht! Ich habe unseren Bildwechsler aus dem DOM-Tutorial mal in den Kurs "Bilder im Internet" gezogen und aus diesem Anlass modernisiert:

Bilder im Internet

Da haben wir jetzt Cards, die einerseits die Kapitel - andererseits unter einem Siehe auch themenverwandte Bereiche wie Hintergrundgrafiken und Canvas anzeigen.

Wichtig für's Grundverständnis sind die theoretischen Kapitel Deko vs. Inhalt und und Formate_und_Größen

Bilder im Internet/Bildwechsler

das zentrale Kapitel. Alle Anfänger wollen eine Großansicht und die macht man eben nicht mehr mit :hover sondern mit Klick.

Wie oben gesagt: Ich übernehme den Bildwechsler aus dem DOM-Tutorial und verwende aber zusätzlich ein dialog-Element.

Das dialog-Element hat demgegenüber eine semantische Bedeutung mit der role="dialog" und in seinem Standardverhalten mehrere Vorteile:

• der Fokus springt bei Tastaturbedienung automatisch in den geöffneten Dialog
• der Dialog ist automatisch im top layer angelegt - ohne CSS-Festlegungen
• mit CSS kann ein ::backdrop-Pseudoelement angelegt werden, das den Inhaltsbereich verdeckt und inaktiv werden lässt; ein so genannter modaler Dialog.

Unten steht der CSS-only-Fader als schlechtes Beispiel. Abweichend von @Gunnar Bittersmann s Meinung will ich die Technologie vorstellen, oberhalb und unterhalb aber die zugängliche Variante präsentieren (Der alte Bildwechsler im DOM-Tutorial war zu weit weg!)

Bilder im Internet/Bilder präsentieren

Ich hatte das Kapitel gedanklich schon gelöscht; dann hätte die Warnung vor :hover aber den Lesefluss im Bildwechsler gestört.

Das Beispiel Zoom mit Grid Layout löst imho die Problematik des Aus-dem-Viewport-ragen.

Einschwebende_Bildunterschriften passt nicht zu :hover, besser zu Lazy Loading; das pack ich im Dezember mit @JürgenB in den OnePager!

Herzliche Grüße

Matthias Scharwies