Austauschbares Bild bei Seitenaufruf präsentieren?

[stehjan]

Hallo,

ich bin neu hier und auch Neuling in html.

Ich habe mir mit der target-Methode (wie hierbeschrieben - aufpoppender Tooltipp) eine Fotopräsentation zusammengebaut. Bei Klick auf ein kleines Vorschaubild wird so an einer anderen Position im Fenster das gewählte Bild angezeigt.

Ich bin mir sicher dass es hierfür elegantere Lösungen gibt (für Tipps und Hinweise wäre ich natürlich sehr dankbar), aber immerhin funktioniert das erst mal ganz gut. Jetzt wäre es aber ganz schön, wenn bereits bei Aufruf der Seite an eben dieser Stelle bereits ein Bild präsentiert werden würde. Und da gehen mir jetzt die Ideen aus.

Kann mir jemand da auf die Sprünge helfen. Ich würde das gerne ohne Java-Script realisieren, denn davon habe ich bisher leider gar keine Ahnung.

Ich hoffe meine Problembeschreibung ist halbwegs verständlich. Ich habe natürlich auch bereits google gefragt, aber irgendwie fallen mir da wohl nicht mal die richtigen Schlagworte ein.

Vielen Dank und Gruß, Stephan

[Gunnar Bittersmann]

@@stehjan

Ich habe mir mit der target-Methode (wie hierbeschrieben - aufpoppender Tooltipp) eine Fotopräsentation zusammengebaut.

Du meinst Bildergalerie mit Popupboxen? Kein gutes Beispiel.

Kann da mal bitte jemand alle tabindex="1" wegmachen? Wann immer tabindex einen anderen Wert als 0 oder -1 hat, ist es höchstwahrscheinlich falsch.

immerhin funktioniert das erst mal ganz gut.

Nicht wirklich. Das CSS ist fehlerhaft; es wurde wohl nie mit Tastatursteuerung getestet.

Und wo wir bei Tastatursteuerung sind: Entweder darf man die geöffnete Box per Tab-Taste nicht verlassen können, sondern nur über [Esc] oder den Schließen-Button; oder die Box muss sich beim Verlassen automatisch schließen. Nichts davon wurde hier umgesetzt.

Ich bin mir sicher dass es hierfür elegantere Lösungen gibt

Aber ja doch! Ersteres bekommt man mit der showModal()-Methode des dialog-Elements frei Haus. Das sieht dann so aus wie in diesem Beispiel. Etwas Beschreibung dazu gibt’s in diesem Thread. Und in dieser Präsentation.

Wenn du dazu Fragen hast, nur zu.

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

[stehjan]

Hallo Gunnar, vielen Dank für Deine Antwort und die Hinweise. Ich habe mich allerdings nicht an der "Bildergallerie mit Popupboxen" sondern an dem Abschnitt darüber ("Infoboxen") orientiert. Auf die Idee bin ich gekommen aufgrund des dort gegebenen Hinweises, dass die Infoboxen auch Bilder enthalten können. Das ist wahrscheinlich trotzdem nicht die eleganteste Lösung, aber die Tastatursteuerung funktioniert (soweit ich das beurteilen kann).

Ich werde mich mit den von Dir verlinkten Seiten auseinandersetzen. Kann was dauern. Aber soweit ich das jetzt schon überblicke, komme ich da ohne Javascript wohl nicht aus?

Vielen Dank und Gruß Stephan

[Gunnar Bittersmann]

@@stehjan

die Tastatursteuerung funktioniert (soweit ich das beurteilen kann).

Der Fokus auf einem Thumbnail-Link sieht so aus:

Alles andere als schön, aber noch zu verschmerzen.

Die Fokusmarkierung des Schließen-Buttons hingegen völlig unbrauchbar:

Kaputt. Und zu etwas, das dermaßen kaputt ist, würde ich nicht „funktioniert“ sagen.

Und wie erwähnt: dass man mit der Tab-Taste weiterkommt, ohne dass sich die Box schließt, ist auch ein Fehler.

Ich werde mich mit den von Dir verlinkten Seiten auseinandersetzen. Kann was dauern. Aber soweit ich das jetzt schon überblicke, komme ich da ohne Javascript wohl nicht aus?

Ja, wie bei vielen Interaktionen auf einer Webseite. Versuche, Interaktionen ohne JavaScript hinzubasteln und dafür HTML-Elemente oder :target zu missbrauchen, gehen so gut wie immer in die Hose.

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

[Gunnar Bittersmann]

@@stehjan

Hallo Gunnar, vielen Dank für Deine Antwort und die Hinweise. Ich habe mich allerdings nicht an der "Bildergallerie mit Popupboxen" sondern an dem Abschnitt darüber ("Infoboxen") orientiert.

Ah, jetzt verstehe ich auch (oder sollte ich sagen „auch ich“?), was du meinst. Du willst gar keine Lightbox, die sich über die ganze Seite legt. „Bei Klick auf ein kleines Vorschaubild wird so an einer anderen Position im Fenster das gewählte Bild angezeigt.“ Wer lesen kann, ist klar im Vorteil. 🤨

Meine erste Idee war ein Iframe, in den die großen Bilder geladen werden. Deinen Wunsch „Jetzt wäre es aber ganz schön, wenn bereits bei Aufruf der Seite an eben dieser Stelle bereits ein Bild präsentiert werden würde“ kannst du verwirklichen, indem du initial eins der Bilder in den Iframe lädst.

Die Bildergalerie mit Iframe (Look Ma, no JavaScript!) dürfte deinem Wunsch entsprechen – jedenfalls im Firefox. Der skaliert das Bild auf die Abmessungen des Iframes runter (wenn nicht für das browser.enable_automatic_image_resizing-Flag was anderes angegeben wurde). Safari, Edge und Chrome tun das nicht. Ich vermute mal, es gibt auch kein Geheimrezept, sie dazu zu bewegen‽

Also kein Iframe, sondern das Laden der Linkziele im Browserfenster unterbinden (preventDefault()) und stattdessen src- und alt-Attribute des initial angezeigten großen Bildes ändern. Da ist dann JavaScript im Spiel.

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

[stehjan]

Hallo Gunnar,

das positionieren der Bilder und Anzeigen ist nicht das Problem. Die Bilder werden wunderbar bei Klick auf den zugehörigen Thumbnail an der Stelle angezeigt, wo sie angezeigt werden sollen. Gelöst habe ich das, wie bereits beschrieben, über Anker (#) und :target (wie in dem Abschnitt "Infoboxen" beschrieben).

Es gibt elegantere Lösungen, ist klar. Insbesondere die Tatsache dass der Browser mit jedem aufgerufenen Bild quasi einen neuen Seitenaufruf protokolliert erscheint ein wenig ungünstig. Aber es funktioniert erst mal zufriedenstellend im Verhältnis zum beabsichtigten Zweck.

Aber ich werde mich beizeiten nochmal mit den dialog- und details-Elementen beschäftigen. Vielleicht könnte man auch irgendwie mit visibility arbeiten, aber ich befürchte, dass der Browser dann von Beginn an alle großen Bilder laden müsste um diese dann einfach nicht anzuzeigen. Das wäre natürlich noch ungünstiger. Vor Java schrecke ich im Moment noch ein wenig zurück weil ich mich bis dato damit noch gar nicht auseinandergesetzt habe und da erst mal von Anfang an einsteigen müsste. Aber auf Dauer komm ich da wohl nicht drumherum.

Das akute Problem war (wie Du dann richtig bemerkt hast): Bevor ein Bild per Klick aufgerufen wird, ist bei Seitenaufruf an der vorgesehenen Position natürlich eine unmotiviert freie Fläche. Es ist eben halt kein Bild zu sehen. Ich dachte es gäbe vielleicht eine Möglichkeit den Browser dazu zu bringen, bei Seitenaufruf gleich auch eines der Bilder aufzurufen, habe aber dazu nichts gefunden und selber noch zu wenig Ahnung.

Könnte ein iframe auch für andere Browser eine Lösung sein, wenn man diesem für verschieden große Viewports jeweils eine feste Größe zuweist und die Bilder jeweils darauf abstimmt? (Ich räume ein: über iframes weiß ich bisher sehr wenig bis gar nichts bis auf den Namen.) Dann wäre die Skalierung durch den Browser unnötig. (Wenn ich das richtig verstanden habe wäre das der Flaschenhals)

Würde dann halt eine recht große Bildersammlung werden, wäre aber ja machbar.

Ich habe das Problem jetzt erst mal umschifft, indem ich Startseite (mit präsentiertem Bild) und Gallerieseite (die auf Klick inklusive verankertem und wechselbarem Bild aufgerufen wird) getrennt habe. Alles andere muss ich dann mit der Zeit optimieren.

[Gunnar Bittersmann]

@@stehjan

Gelöst habe ich das, wie bereits beschrieben, über Anker (#) und :target (wie in dem Abschnitt "Infoboxen" beschrieben). […] Aber es funktioniert erst mal zufriedenstellend im Verhältnis zum beabsichtigten Zweck.

Nein, es funktioniert eben nicht. Bei Tastaturbedienung springt der Fokus auf das große Bild, anstatt auf dem Thumbnail zu verbleiben, sodass man zum vorigen oder nächsten Bild kommt.

:target ist für diese Anwendung einfach die falsche Lösung. Dass das so im SELFHTML-Wiki steht, ist darin begründet, dass dort oft das Pferd von hinten aufgezäumt wird. Man versucht, Technologien zu erklären und zieht dafür Beispiele an den Haaren herbei. Und dann kommt eben Murks dabei raus. Richtig wäre es, vom Problem auszugehen und zu beschreiben, welche Technologien man zu dessen Lösung braucht.

Vor Java schrecke ich im Moment noch ein wenig zurück weil ich mich bis dato damit noch gar nicht auseinandergesetzt habe und da erst mal von Anfang an einsteigen müsste. Aber auf Dauer komm ich da wohl nicht drumherum.

Doch, das kommst du. 😏

Um JavaScript eher nicht. Und wenn du dich damit auseinandersetzt, wirst du wissen, dass Java mit JavaScript so viel gemeinsam hat wie Puder mit Pu-der-Bär.^[1]

Das akute Problem war (wie Du dann richtig bemerkt hast): Bevor ein Bild per Klick aufgerufen wird, ist bei Seitenaufruf an der vorgesehenen Position natürlich eine unmotiviert freie Fläche. Es ist eben halt kein Bild zu sehen. Ich dachte es gäbe vielleicht eine Möglichkeit den Browser dazu zu bringen, bei Seitenaufruf gleich auch eines der Bilder aufzurufen

Gibt es. Genauso wie du das angewählte Bild mit :target { display: block } sichtbar machst, könntest du das erste sichtbar machen, wenn kein anderes angewählt ist. In meinem Beispiel:

#big-picture > img:first-of-type:not(:has(~ :target)) {
	display: block;
}

Könntest – wenn da nicht Firefox wäre, der :has() noch unzureichend implementiert hat. Auch das Kapseln in einen @supports selector(…)-Block hilft hier nicht.

Möglich wäre, initial das letzte Bild anzuzeigen:

#big-picture > img:last-of-type {
	display: block;
}

#big-picture > :is(:target ~ img:last-of-type) {
	display: none;
}

Aber erwähnte ich schon, dass :target für diese Anwendung einfach die falsche Lösung ist?

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

---

1. Gibt’s Matthias’ Sammlung noch irgendwo? ↩︎

[Matthias Scharwies]

Servus!

@@stehjan

Ich habe mir mit der target-Methode (wie hierbeschrieben - aufpoppender Tooltipp) eine Fotopräsentation zusammengebaut.

Ich habe mal einen Disclaimer mit Links zu besseren Beispielen eingefügt:

CSS/Tutorials/Selektoren/Pseudoklasse für Ziele_von_Verweisen

Herzliche Grüße

Matthias Scharwies