alle Bilder einer Galerie mit dialog- Methode öffnen

[gewe]

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

document.getElementById("show-dialog").addEventListener("click", () => {
            document.getElementById("dialog").showModal();
        });

        document.getElementById("close-dialog").addEventListener("click", () => {
            document.getElementById("dialog").close();
        });

Das funktioniert bei mir auch .

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

Gruß aus Köln Gerhard

[Gunnar Bittersmann]

@@gewe

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

document.getElementById("show-dialog").addEventListener("click", () => {
            document.getElementById("dialog").showModal();
        });

        document.getElementById("close-dialog").addEventListener("click", () => {
            document.getElementById("dialog").close();
        });

Das funktioniert bei mir auch .

Die Elemente mit den IDs „dialog“ und „close-dialog“ sind doch hoffentlich interaktive Elemente (button, a), damit das nicht nur bei dir, sondern auch bei anderen funktioniert‽

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

Ja, siehe Beispiel. Wenn es mehrere Elemente gibt, welche die Lightbox öffnen, möchtest du dich von dem Gedanken verabschieden, das über eine ID zu tun.

S.a. zugehöriges Posting und Folgepostings sowie Präse TIL about showModal (from small things big things one day come).

🖖 Живіть довго і процвітайте

[Felix Riesterer]

Lieber gewe,

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

ja, das ist möglich. Aber warum sprichst Du von <dialog>? Dieses mit-JavaScript-Großansicht-Feature nennt sich Lightbox und gibt es in verschiedensten Varianten. Auch ich habe mich einst daran versucht.

Liebe Grüße

Felix Riesterer

[Gunnar Bittersmann]

@@Felix Riesterer

ja, das ist möglich. Aber warum sprichst Du von <dialog>? Dieses mit-JavaScript-Großansicht-Feature nennt sich Lightbox und gibt es in verschiedensten Varianten.

Wobei die Variante mit <dialog> nicht die schlechteste ist.

Auch ich habe mich einst daran versucht.

Und bist daran gescheitert. Das Ding ist nicht bedienbar: bei geöffneter Lightbox springt der Tastaturfokus auf der Seite umher, man hat aber keine Möglichkeit, die Lightbox zu schließen. Wie auch bei <span id="js-popup-close"></span>, was kein interaktives Element ist? Dass das Element keine Beschriftung hat, kommt noch hinzu.

🖖 Живіть довго і процвітайте

[gewe]

@Gunnar Bittersmann

Danke schon mal an Alle!

Ich würde gerne ohne thumbnails arbeiten und die Größe der dialog-Box mit CSS bestimmen.

Wie oben gesagt: für 1 Bild geht das ohne weiteres.

(Bei mehreren muss sicher eine class her anstelle id)

geht das überhaupt?

Gruß gewe

[Matthias Scharwies]

Servus!

Ich würde gerne ohne thumbnails arbeiten

Das ist nicht so optimal - Thumbnails sollten klein, die Großansichten dagegen in möglichst hoher Aufösung vorhanden sein.

und die Größe der dialog-Box mit CSS bestimmen.

Eh klar, dafür ist CSS zuständig!

Im HTML nimmt man im Zweifelsfall immer native Elemente, die die Funktion as Standardverhalten bereits enthalten. Deshalb ist ist dialog-Element oder Popover heute einer Lösung mit div- und span-Elementen vorzuziehen.

Wie oben gesagt: für 1 Bild geht das ohne weiteres.

(Bei mehreren muss sicher eine class her anstelle id)

geht das überhaupt?

Ja, klar!

JavaScript/Tutorials/DOM/DOM-Manipulation#Bildwechsler

Dieses Tutorial arbeitet mit einem Figure - du könntest es mit dem popover-Attribut anreichern und dir so das JavaScript für den Schließen-Button sparen. (Das wird bereits vom nativen HTML automatisch erledigt!)

Das Tutorial müsste mal aktualisiert werden! 😀

Herzliche Grüße

Matthias Scharwies

[Matthias Scharwies]

Guten Abend!

Es gibt ein veraltetes Tutorial:

Bilder im Internet/Bilder präsentieren

Voraus geht das Kapitel „Bilder mit img einbinden“, in dem auch schon figure eingeführt wurde.

Ich würde das gerne neu aufbauen. Thema soll sein, Bilder größer zu präsentieren.

konventionelle Sackgasse

@@Gunnar Bittersmann Wie kann man das klar benennen, dass die Technologie erklärt wird, man aber merkt, dass es so nicht geht?

Evtl. kann man anfangs doch ein Bild mit :hover vergrößern (auch die MDN fängt so an):

<button>
  <img src="" alt="">
</button>

<style>

button: hover,
button:focus {
  width: 20em;
  margin: 2em auto;
  z-index: 10;
}

</style>

und dann kann mit einem erweiterten Beispiel hier gezeigt werden, dass die Bilder dann evtl. außerhalb des Viewports sind.

Intersection Observer

Was haltet ihr von der Intersection Observer API, um zu berechnen, ob eine Großansicht außerhalb des Viewports wäre?

Oben ins Tutorial oder lieber nach unten als Ergänzung?

Popover

Bilder_im_Internet/Bilder_pr%C3%A4sentieren#Popover (Test-Wiki)

Das ist mir schon zu viel HTML - hier würde ich das Beispiel zeigen und ab da mit JavaScript weitermachen, das mir die ganzen figure-Elemente dynamisch erzeugt.

Was haltet ihr davon?

Bitte meldet euch mit Vorschlägen und Anregungen!

Evtl. könnte man Mittwoch einen Stammtisch außer der Reihe organisieren, um das zu planen.

Herzliche Grüße

Matthias Scharwies

[Gunnar Bittersmann]

@@Matthias Scharwies

@@Gunnar Bittersmann Wie kann man das klar benennen, dass die Technologie erklärt wird, man aber merkt, dass es so nicht geht?

Du kennst doch unsere Zielgruppe? 😆

Ein (Groß-)Teil wird nach dem ersten Codebeispiel, das in deren Augen das „Funzt-ja“-Kriterium erfüllt, aufhören zu lesen. Ein Tutorial sollte nicht zeigen, wie man’s nicht macht, sondern wie man’s richtig macht, und das begründen. Dabei kann man dann auch darauf eingehen, was an anderen Implementierungen falsch ist.

Evtl. kann man anfangs doch ein Bild mit :hover vergrößern (auch die MDN fängt so an):

Man kann es aber auch lassen. Als Nutzer würde ich nicht erwarten, dass da bei :hover oder :focus was rumzappelt. Die Anzeige des großen Bildes erwarte ich erst bei bewusster Interaktion: beim Click auf den Button (das Bild).

Die MDN? Wird network jetzt genauso verweiblicht wie interface (das API) und locator (der URL)?

Was haltet ihr von der Intersection Observer API, um zu berechnen, ob eine Großansicht außerhalb des Viewports wäre?

Wozu? Man will doch eher die Lightbox auf den Viewport beschränken, was mit CSS möglich ist.

Popover

Damit erzeugt man nicht-modale Dialogfenster. Eine Lightbox sollte doch aber modal sein? 🤔

Evtl. könnte man Mittwoch einen Stammtisch außer der Reihe organisieren, um das zu planen.

Mir kam schon in den Sinn, TIL about showModal (from small things big things one day come) um zwei Teile zu ergänzen:

• einen zum Unterschied zwischen modalen und nicht-modalen Dialogfenstern; da käme dann auch das Popover-API mit rein
• einen zur Erweiterung der Lightbox um „Voriges“-/„Nächstes“-Button zum Blättern durch alle Bilder

Das wäre aber nichts, was ich auf einem Stammtisch versprechen würde, in den nächsten Tagen zu tun.

🖖 Живіть довго і процвітайте

[Matthias Scharwies]

Servus!

Popover

Damit erzeugt man nicht-modale Dialogfenster. Eine Lightbox sollte doch aber modal sein? 🤔

Iist das zwingend so? Das ist ja meine Frage.

Meine Frage ist eben auch, ab wann man JavaScript einsetzten sollte, um Bilder zu präsentieren. auch die CSS-Animation-Slide-Show ist ja eher Proof of Concept als einsatzfähig.

Und sollte das dann direkt im angesprochenen Kapitel stehen oder sollte man von dort auf JavaScript/Tutorials/DOM/DOM-Manipulation#Bildwechsler verlinken?

Ich hbae schon eine Antwort für mich, würde das aber gerne im kleineren / mittelgroßen Rahmen besprechen und dann gemeinsam umsetzen.

Evtl. könnte man Mittwoch einen Stammtisch außer der Reihe organisieren, um das zu planen.

Mir kam schon in den Sinn, TIL about showModal (from small things big things one day come) um zwei Teile zu ergänzen:

• einen zum Unterschied zwischen modalen und nicht-modalen Dialogfenstern; da käme dann auch das Popover-API mit rein
• einen zur Erweiterung der Lightbox um „Voriges“-/„Nächstes“-Button zum Blättern durch alle Bilder

Das wäre aber nichts, was ich auf einem Stammtisch versprechen würde, in den nächsten Tagen zu tun.

Die TIL in Verbindung mit Deinem Vortrag finde ich genial - die solltest du verfilmen. Ohne Vortrag sind sie für Anfänger imho nicht so geeignet.

Herzliche Grüße

Matthias Scharwies

[Matthias Scharwies]

Servus!

Nächste Frage,

benötigt man überhaupt eine Bildergalerie mit Großansicht ohne Vor- und Zurück-Buttons?

Lightbox an, Lightbox aus, nächste Lightbox - ist doch sinnlos oder?

Eigentlich könnte man dann gleich den Bildwechsler zeigen.

Herzliche Grüße

Matthias Scharwies

[Gunnar Bittersmann]

@@Matthias Scharwies

benötigt man überhaupt eine Bildergalerie mit Großansicht ohne Vor- und Zurück-Buttons?

Als Zwischenstufe in einem Tutorial – vielleicht.

Bei einer Komponente für den produktiven Einsatz – eher nicht.

Lightbox an, Lightbox aus, nächste Lightbox - ist doch sinnlos oder?

Ja, schön ist es nicht. Deshalb ja meine Überlegung, mein Beispiel nachzurüsten.

🖖 Живіть довго і процвітайте

[Gunnar Bittersmann]

@@Matthias Scharwies

Eine Lightbox sollte doch aber modal sein? 🤔

Iist das zwingend so? Das ist ja meine Frage.

Da sich eine Lightbox über die ganze Seite legt und damit anderen Seiteninhalt (fast) vollständig verdeckt, man also mit dem Rest der Seite gerade nicht interagieren kann, sollte die Lightbox modal sein, IMHO.

Meine Frage ist eben auch, ab wann man JavaScript einsetzten sollte, um Bilder zu präsentieren. auch die CSS-Animation-Slide-Show ist ja eher Proof of Concept als einsatzfähig.

??

Die TIL in Verbindung mit Deinem Vortrag finde ich genial - die solltest du verfilmen. Ohne Vortrag sind sie für Anfänger imho nicht so geeignet.

Ich zeichne die Tech-Talks manchmal sogar auf. Manchmal vergesse ich auch, auf den Knopf zu drücken. Zwischendurch schweift so ein Tech-Talk auch mal in Geplauder ab; eher ein Workshop als ein Vortrag – was auch gut ist. Das müsste rausgeschnitten werden oder ich müsste die Genehmigung aller Beteiligten einholen. Auch müsste der Bildausschnitt auf das Hauptfenster begrenzt werden; das Drumherum mit den Gesichtern der Zuhörer müsste weg. Zu einer Veröffentlichung wäre da also einiges an Videobearbeitung zu leisten; deshalb gibt’s die Videos auf Notist nicht zu sehen.

🖖 Живіть довго і процвітайте

[Matthias Scharwies]

Servus!

@@Matthias Scharwies

Eine Lightbox sollte doch aber modal sein? 🤔

Iist das zwingend so? Das ist ja meine Frage.

Da sich eine Lightbox über die ganze Seite legt und damit anderen Seiteninhalt (fast) vollständig verdeckt, man also mit dem Rest der Seite gerade nicht interagieren kann, sollte die Lightbox modal sein, IMHO.

ok, d'accord!

Meine Frage ist eben auch, ab wann man JavaScript einsetzten sollte, um Bilder zu präsentieren. auch die CSS-Animation-Slide-Show ist ja eher Proof of Concept als einsatzfähig.

??

Sitzt Du? Nicht schimpfen!

Bilder_im_Internet/Bildwechsler

mein Vorschlag: Kapitel 1 weg - Kapitel 2 als Proof of concept mit den ganzen Grafiken wie kompliziert das ist und mit Fazit, das auf custom properties und den modernen Bildwechsler verlinkt.

Dieses Tutorial dann nicht mehr in den Portalseiten verlinken.

Die TIL in Verbindung mit Deinem Vortrag finde ich genial - die solltest du verfilmen. Ohne Vortrag sind sie für Anfänger imho nicht so geeignet.

Ich zeichne die Tech-Talks manchmal sogar auf. Manchmal vergesse ich auch, auf den Knopf zu drücken. Zwischendurch schweift so ein Tech-Talk auch mal in Geplauder ab; eher ein Workshop als ein Vortrag – was auch gut ist. Das müsste rausgeschnitten werden oder ich müsste die Genehmigung aller Beteiligten einholen. Auch müsste der Bildausschnitt auf das Hauptfenster begrenzt werden; das Drumherum mit den Gesichtern der Zuhörer müsste weg. Zu einer Veröffentlichung wäre da also einiges an Videobearbeitung zu leisten; deshalb gibt’s die Videos auf Notist nicht zu sehen.

Ja, das ist das Problem - man bräuchte mehr Zeit.

Herzliche Grüße

Matthias Scharwies

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Mir kam schon in den Sinn, TIL about showModal (from small things big things one day come) um zwei Teile zu ergänzen:

Die Titel dafür hätte ich schon – zumindest den Teil in Klammern:

• (you can look but you better not touch)
• (take ’em as they come)

„From Small Things (Big Things One Day Come)“, „You Can Look (But You Better Not Touch)“ und „Take ’em As They Come“ sind Outtakes von Bruce Springsteens Album The River (1980), zu finden in der Box The Ties That Bind: The River Collection (2015).

Wobei „You Can Look (But You Better Not Touch)“ auch auf The River ist – das Outtake ist die Rockabilly-Version davon.

🖖 Живіть довго і процвітайте

[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" 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

[Matthias Scharwies]

Guten Morgen!

Bilder im Internet/Bildwechsler

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.

Am Mittwoch auf dem Stammtisch, kam die Frage auf, ob und wie man ::backdrop animieren kann.

Ja, man kann!

Einblenden geht mit CSS ( Bei der gmeinsamen Entwicklung ist der :modal-Selektor wieder rausgeflogen)

Ausblenden nur durch Setzen einer Klasse, die beim Ende der animation/transition wieder entfernt wird.

::backdrop und :modal - Animation mit CSS

Irgendwann setze ich es auch in den Bildwechsler!

Herzliche Grüße

Matthias Scharwies