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**](https://wiki.selfhtml.org/wiki/Bilder_im_Internet)" gezogen und aus diesem Anlass modernisiert: # [**Bilder im Internet**](https://wiki.selfhtml.org/wiki/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](https://wiki.selfhtml.org/wiki/Bilder_im_Internet/Formate_und_Gr%C3%B6%C3%9Fen) # [Bilder im Internet/**Bildwechsler**](https://wiki.selfhtml.org/wiki/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](https://wiki.selfhtml.org/wiki/Bilder_im_Internet/Bilder_pr%C3%A4sentieren) 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](https://wiki.selfhtml.org/wiki/Bilder_im_Internet/Bilder_pr%C3%A4sentieren#Bilderzoom_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

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**](https://wiki.selfhtml.org/wiki/Bilder_im_Internet)" gezogen und aus diesem Anlass modernisiert: # [**Bilder im Internet**](https://wiki.selfhtml.org/wiki/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](https://wiki.selfhtml.org/wiki/Bilder_im_Internet/Formate_und_Gr%C3%B6%C3%9Fen) # [Bilder im Internet/**Bildwechsler**](https://wiki.selfhtml.org/wiki/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](https://wiki.selfhtml.org/wiki/Bilder_im_Internet/Bilder_pr%C3%A4sentieren) 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](https://wiki.selfhtml.org/wiki/Bilder_im_Internet/Bilder_pr%C3%A4sentieren#Bilderzoom_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