Thumbnail im HTML durch anklicken wieder vergrössern !?

[Peter]

@@Peter

Für mich ist das Problem damit gelöst.

Ähm nein, du hast gar nichts gelöst.

<a href="https://www.bilderhoster.net/users/usr/3wyf1ww1.jpg" target="_blank" >
<img src="https://www.bilderhoster.net/users/usr/3wyf1ww1.jpg" height="200" width="150" alt="https://www.bilderhoster.net/users/usr/3wyf1ww1.jpg" border="1" align="center">
</a>

Dass es völlig sinnfrei ist, für Thumbnail und für die große Darstellung dieselbe Dilddatei zu verwenden, hat dir @Rolf B wiederholt gesagt. Und was tust du? Verwendest für Thumbnail und für die große Darstellung dieselbe Dilddatei‽ 🤡

Welche übrigens weder für Thumbnail noch für die große Darstellung taugt. Fürs Thumbnail ist sie mit 50 kB zu groß; das sollten maximal 20 kB sein. Für die große Darstellung ist das Bild viel zu unscharf.

Du musst zwei Bilddateien erstellen.^[1] Dabei kann es sich anbieten, Höhe und Breite doppelt so groß zu machen wie das Bild dargestellt werden soll, aber hohe Kompression zu wählen. (Der hier oft verlinkte Artikel „Retina Revolution“ scheint depubliziert worden zu sein, ich finde nur noch dieses Follow-up auf niederländisch.)

Es hat geklappt, allerdings muss ich zum vergrössern auf das verkleinerte Bild mit der rechten Maustaste klicken und dann auf den Befehl "Bild im neuen Tab öffnen". Das Originalbild wird dann separat geöffnet.

Ähm nein, da muss man nicht mit rechter Maustaste und Kontextmenü ran. Das funktioniert mit der Verlinkung, siehe Lightbox, fallback with no JavaScript.

Mit JavaScript kann man da progressive enhancement machen: anstatt auf eine neue Seite zu wechseln öffnet die große Darstellung in einem modalen Fenster (dialog-Element) auf der bestehenden Seite.

Per JavaScript wird das Linkziel als src des Bildes im modalen Fenster gesetzt. (Was mit data-src auf einen anderen Wert gesetzt werden kann. Ebenfalls möglich: data-srcset für responsive images.) Lightbox, showModal()

Ein Gimmick ist das Thumbnail als Hintergrundbild. Kostet ja nix, das wurde ja bereits übertragen. Und für die kurze Zeit, in der das Bild für die große Darstellung geladen wird, ist ein unscharfes Bild besser als gar kein Bild.

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

Für mich ist dennoch das Problem gelöst: Das Thumbnail sieht sauber und klar aus und auch die Vergrösserung aufs Originalbild auf einer separaten Seite ist klar und deutlich abgebildet. Also für mich alles ok.

---

1. Ich hab das in meinen Beispielen deutlich gemacht, indem ich nicht das gleiche Bild in zwei verschiedenen Größen, sondern verschiedene Bilder für Thumbnail und für die große Darstellung verwendet habe. ↩︎