Bildzoom ohne Javascript

Für das Vergrößern eines Bildes auf einer Webseite gibt es zwei Möglichkeiten: Javascript oder CSS. Ersteres wird von umfangreichen Bibliotheken unterstützt. Letzteres erfordert ein wenig »Hirnschmalz«.

Meine Webseiten machen einen größtmöglichen Bogen um Javascript. Falls doch, wird „Selbstgestricktes“ verwendet. Das erspart den Ballast großer Bibliotheken, aus denen lediglich ein paar Zeilen benötigt würden.

Javascript kann natürlich ohne Bibliotheken elegante Lösungen ermöglichen. Doch Skripte werden regelmäßig von (zurecht!) misstrauischen Administrator/inn/en gefiltert oder gesperrt. Das kann eine Spaßbremsen sein, doch es schützt Seiten-Besuchende – von ihnen unbemerkt – vor bösen Überraschungen.

Formatvorlagen („CSS“) einer Webseite können keine fiesen Sachen auf dem Gerät der Betrachtenden. Weshalb sie sehr zuverlässig durchkommen. Doch CSS hat ein bisschen was von Mengenlehre, deren Erläuterung zumindest in meiner Schulzeit übersichtlich war. Für die komplexere Nutzung ist deren Ansatz deshalb „gefühlt sperriger“ als ein schnuckeliges Javascript. Doch die Mühe lohnt sich – jedes Mal.

Was ich haben wollte1

Bild anklicken oder antippen, damit es „ohne Schi-Schi“ auf maximal Originalgröße skaliert wird.
Keine verschiedenen Bilder für verschiedene Größen: Ein „Maximalbild“, das ggf. vom Browser kleiner skaliert wird; das können die gut.
Vollständige Unterstützung aller Bildattribute (ALT, Title)
Ein Symbol, das »klick mich für groß« anzeigt (hier: 🔍)
Ein Symbol, das »mach wieder klein« anzeigt (hier: ✖)
Abdunkeln des Hintergrunds beim Vergrößern
Anzeigen eines formatierbaren Textes als Untertitel der Vergrößerung.

Dafür ist eine »Umschaltung« der Symbole, des Hintergrunds und des Untertitels erforderlich. Die häufig bemühte „versteckte Checkbox“ kann bei mehrere Bilder auf einer Seite unübersichtlich werden.

Zur Lösung führte ein älterer Beitrag bei „devo.to“: Es geht ohne Schalter.

Dort bestand der Anspruch, möglichst hacky zu sein, versehen mit der Warnung, dass keinesfalls so zu machen. Deshalb wird es hier anders gemacht.

Der „Kniff“ steckt in der Eigenschaft tabindex, mit der das Bild versehen wird. Alles mit dieser Eigenschaft kann den Fokus erhalten. Wird das Bild angetippt bekommt es den Fokus, der dann für die „Schalterei“ zuständig ist. Das „zoomen“ gehört damit automatisch zur Tab-Reihenfolge innerhalb der Webseite. Es lässt sich also ggf. über die Tastatur (→ TAB-Taste) öffnen.

Alle erforderlichen Elemente werden in einen Container gepackt:

<div class="imgmagbox right">
 <img id="bild" class="imgmag" loading="lazy" src="/media/2024/screenshot/faststonecapture.avif" alt="Ein Beispielbild" title="Spielerei mit Faststone Capture" tabindex="0">
 <a class="imgmagauf" href="#bild">🔍</a>
 <div class="imgmagbg"></div>
 <div class="imgmagzu">&#10006;</div>
 <div class="imgmagutxt">
  <p>Eine (sinnfreie) <em>Bastellei</em> mit <strong>Faststone Capture</strong>.</p>
<dl><dt>Vorsicht:</dt>
<dd>
<p>Dieser <a href="/index" title="Sinnloser Versuch!">Link zur Startseite</a> ist <strong>unerreichbar</strong> (s. Text)!</p>
</dd></dl>
 </div>

Dort lassen sich die „Geschwister“ („sibling“ ~) ansprechen, wenn das Bild (Klasse „imgmag“) den Fokus hat (Klasse „imgmag:focus ~ geschwisterklasse“).

So sieht das aus

🔍

✖

Eine (sinnfreie) Bastellei mit Faststone Capture.

Vorsicht:: Dieser Link zur Startseite ist unerreichbar (s. Text)!

Das Bild vom Text umflossene Bild hat oben rechts eine Lupe, die beim Anklicken verschwindet. Vergrößert steht oben rechts auf der Seite statt dessen der Schließknopf „über allem“. Das Schließen ist deshalb auch bei einem Bildschirmfüllenden Bild möglich. Der Hinweistext liegt ebenfalls über dem Bild. Das kann die Ansicht des Bildes – abhängig von der Textmenge – beschneiden. Doch von einem Bild überdeckter Text wird mutmaßlich von den meisten Besuchenden einer Seite als störender empfunden.

Einen kleinen, „akademischen“ Haken zeigt das Beispiel:: Im Untertitel des vergrößerten Bildes kann zwar beliebiges HTML verwendet werden. Sogar Hyperlinks. Die werden prima angezeigt, doch sie sind unerreichbar. Das liegt an der Kaskadierung der Vorlagen: Mit dem Klick auf den Link verliert das Bild den Fokus, womit der Untertitel mit dem Link verschwindet. Der Klick darauf geht damit „ins Leere“. Denn »alles, außer das Bild« anklicken schließt die Vergrößerung.

Die verwendeten CSS-Stile stehen in der (einzigen) Stilvorlage von BUOA! im Abschnitt /* ImgMag */.

Das war hilfreich?: 💡 Via PayPal könnten Sie mir dafür einen Kaffee spendieren!

1Auslöser war ein neues Modul für OffSiteEdit mit besseren Möglichkeiten als ein Vorhandenes.