Bilder mit Zoom

Erstellt am 30.10.2024 Lesedauer 5 - 6 Min.

Inhalt

Erforderliches HTML
Erforderliches CSS
Beispiele

Anforderung:: Mit einem einzigen Modul soll das Einfügen von Bildern realisiert werden, die einen Standard haben (40% breit, Text fließt vorbei), der mit ergänzendem CSS verfeinert werden kann (rechts, links, volle Textbreite). Dem Bild können eine Beschreibung, ein Titel und ein Untertitel für die Vergrößerung mitgegeben werden. Diese wird durch Anklicken des Bildes aktiviert und kann durch Anklicken eines „Schließen“-Buttons geschlossen werden.

Voraussetzungen:

Damit es „einfach“ verwendbar ist, werden einige CSS-Formate benötigt, die sowohl die „Aggregatzustände“ »normal« und »vergrößert«, als auch die Formatierung ermöglichen.

Dazu kommt eine HTML-Struktur, die vom OSE -Modul eingefügt wird.

Erforderliches HTML

Der erforderliche HTML-Code wird in einem Modul mit Platzhaltern notiert. Das darf natürlich kompakter ausfallen, als hier zwecks besserer Lesbarkeit dargestellt (Keine Leerzeile nach der Parameter-Zeile des Moduls, keine Einrückungen, …). Er ist kompakt, die eigentliche Arbeit leisten die CSS-Formate (s.u.).

imgmag "href=datei" "Alt=Keine Bildbeschreibung verfügbar" "Titel=§§2" "ID=imag%id%" "css=right" "Untertitel=§§2"
 
<div class="imgmagbox §§§css§§§">
  <img id="§§§ID§§§" class="imgmag" loading="lazy" src="§§§href§§§" alt="§§§Alt§§§" title="§§§Titel§§§" tabindex="0">
  <a class="imgmagauf" href="#§§§ID§§§">🔍</a><div class="imgmagbg"></div><div class="imgmagzu">&#10006;</div>
  <div class="imgmagutxt">
    §§§Untertitel§§§
  </div>
</div>

Ein alles umschließenden Container enthält das Bild und die erforderlichen Elemente. Auf dem Bilder wird im »normal«-Zustand eine Lupe oben rechts platziert, »vergrößert« wird ein Schließknopf angeboten, der ebenfalls auf dem Bild liegt, falls es vergrößert den gesamten Bildschirm einnehmen sollte. Grundsätzlich schließt die Vergrößerung, sobald das ausgewählte Bild den Fokus verliert, d. h. wenn „irgendwo außer auf das Bild“ geklickt wird. Das folgt der etablierten Bedienung auf Mobiltelefonen.

Wichtige Besonderheit

Es wird ein einziges Bild verwendet, das allein mittels CSS verkleinert wird. Bei der vergrößerten Anzeige des Bildes wird es maximal in der Originalgröße angezeigt – wenn die Größe des Browserfensters das zulässt.

Das Bild muss dafür in der vorgesehen, maximalen Größe vorbereitet und – idealerweise – auf das kleinsmögliche Dateivolumen reduziert worden sein.

Selbst bei Verwendung eines hochauflösenden Großbildschirms kostet eine Bildhöhe jenseits 1000 Pixel oder Breite jenseits 1600 Pixel sinnlos Ladezeit, ohne dass es für den Betrachter einen Vorteil bietet.

Ebenso ist abzuwägen, ob ein paar Kompressionsartefakte, weniger Bild-Farben, zugunsten der Dateigröße akzeptabel sind oder ein anderes Bildformat (WEBP, AVIF, PNG, JPEG) mit kleinerem Dateivolumen eine ausreichende Darstellungsqualität mit dem Charme kurzer Ladezeiten verbindet.

Für das hier beschriebene Modul gibt es auch eine Modulbeschreibung.

Erforderliches CSS

/* Farbvariablen vorweg */
:root{--vgdark:rgba(0,0,0,0.8)}
@media screen and (prefers-color-scheme:light){:root{--bgcolor:#fdfdfd}}
@media screen and (prefers-color-scheme:dark){:root{--bgcolor:#111}}
/* Ausrichtung */
.left{float:left;margin:0 1em 0 0}
.right{float:right;margin:0 0 0 1em}
.center{display:block;margin:0 auto}
/* ImgMag */
.imgmagbox{position:relative;max-width:40%;padding:0;display:inline-block;}
.max .imgmagbox {max-width:100%}
.center .imgmagbox{display:block;margin:0 auto}
.imgmagbox img{max-width: 100%;max-height: 100%;animation: none;filter:none;}
.imgmagbg,.imgmagutxt,.imgmagzu{display:none;}
.imgmagauf{position:absolute;display:table-cell;height:2rem;width:2rem;text-align:center;vertical-align:middle;border-radius:50%;background:white;border:0.1rem solid black;line-height:1.3;font-size:1.2rem;right:1rem;top:1rem;color:black;}
.imgmag:focus{position:fixed;max-width:95vw;height:auto;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;}
.imgmag:focus ~ .imgmagbg{display:block;position:fixed;top:0;left:0;width:100vw;height:100vh;background:var(--vgdark);transition:opacity .3s;;z-index:1;}
.imgmag:focus ~ .imgmagauf{display:none;}
.imgmag:focus ~ .imgmagzu{position:fixed;display:table-cell;height:5rem;width:5rem;font-size:3.5rem;line-height:1.3;text-align:center;vertical-align:middle;border-radius:50%;background:black;border:0.2rem solid white;right:2vw;top:2vw;color:white;z-index:5;}
.imgmag:focus ~ .imgmagutxt{position:fixed;display:block;width:94vw;bottom:1vh;left:2vw;padding:1vw;background-color:var(--bgcolor);text-align:center;z-index:4;}

Der Basisstil imgmagbox legt für den Grundzustand eine Breite von 40 % der Textbreite an der aktuellen Position fest. Als Inline-Block wird nur der tatsächlich benötigte Platz beim Browser angefordert, die Position soll relativ zur Einfügeposition sein (was im Ergebnis „absolut“ ist) und keinen Abstand zur Umgebung haben. Der wird je nach Erfordernis innerhalb des Blocks festgelegt.

Das Bild innerhalb der umschließenden Klasse darf sich proportional im bereitgestellten Platz bis zur maximalen Bildgröße ausdehnen. Die Lupe bzw. der Schließer werden abhängig davon, ob das Bild den Fokus hat („angeklickt wurde“), ein- bzw. ausgeschaltet. Mit Fokus wird das Bild aus dem Basisstil herausgenommen und auf die Fenstergröße des Browsers maximiert, genauer: auf maximal 95 % der Breite, damit sehr große Bilder ggf. noch einen kleinen Rand haben, unter dem die Webseite erkennbar bleibt. Die Fläche darunter wird abgedunkelt. Mit dem Fokus wird zusätzlich eine Textbox am unteren Fensterrand gesteuert, in der ein Bildkommentar angezeigt wird.

Die eigentliche Ausrichtung des »normalen« Bildes erfolgt mit den Klassen „left“ oder „right“, die einen Textumfluss auf der gegenüber liegenden Seite zulassen.

Ist das Modul von der Klasse max umschlossen, wird die »normale« Bildbreite auf 100 % der aktuellen Textbreite gesetzt ( OSE -Notation):

<div class="max">
[imgmag …]
</div>

Das Bild kann ohne Textumfluss mit der Basisgröße zentriert werden. Dafür muss sowohl das Modul den Stil center zugewiesen bekommen, als auch damit umschlossen sein ( OSE -Notation):

<div class="center">
[imgmag "datei" "Bildbeschreibung" "§§2" "imag%id%" "center" "§§2"]
</div>

Mit dieser Einfügung wird im dritten und sechsten Parameter (§§2) auf den Text Bildbeschreibung verwiesen – was Schreibaufwand erspart, wenn identische Inhalte gewünscht sind. Mit %id% wird eine eindeutige Zufalls-ID erzeugt, der (hier) ein imag vorangestellt wird. Eine eindeutige ID ist zwingend erforderlich, damit das Bild zuverlässig referenziert werden kann.

Der Modulaufruf (→ aus dem globalen oder Projekt-Modul-Ordner) sieht so aus:

[imgmag "href=datei" "Alt=Keine Bildbeschreibung verfügbar" "Titel=§§2" "ID=imag%id%" "css=right" "Untertitel=§§2"]

Mit STRG P können die Parameter abgearbeitet werden. Mit §§x kann ein Parameter von links nach rechts referenziert werden, damit es Schreibarbeit spart, wenn der gleiche Text mehrfach verwendet werden kann (oder soll). §§1 ist die Datei, §§6 der Untertitel.

Das Modul muss vor dem Text eingefügt werden, der das Bild umfließen soll.

Je nach grundsätzlicher Anlage der verwendeten Stile kann es zu Konflikten bei Abständen, etc. kommen. Das lässt sich mit Schrittweisem aktivieren der einzelnen Stile herausfinden und lösen.

Die Stilvorlagen können – natürlich – an die eigenen Vorstellungen angepasst werden, z.B. eine kleiner/größere Standardbreite.
Die Referenzierung und auch die oben erwähnte ID-Variable steht für alle Module zur Verfügung.
Ganz Eilige können die Referenzierung wenn der Parameter ausgewählt ist, mit ALT←/→ runter/hochzählen. Das gilt allgemein für alle rechtsbündig in Hochkommata stehenden, markierten Zahlen (die davor eine beliebige Zeichenfolge haben dürfen).

Beispiele

Die Untertitel der Bilder enthalten Hinweise zur jeweiligen Formatierung.

🔍

✖

Beispielbild mit zusätzlichem CSS „left“

Weit hinten, hinter den Wortbergen, fern der Länder Vokal und Konsonant, leben die Blindtexte. Abgeschieden wohnen Sie in Buchstabhausen an der Küste der Semantik, einem Ausläufer des Phonetik-Ozeans. Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regularien. Es ist ein paradigmatisches Land, in dem Besuchern Mustertexte füllende Satzteile in den Mund fliegen. Selbst die allmächtige Interpunktion muss sich in die Blindtexte einfügen. Ein ausfüllendes, orthografisch korrektes Wortgebilde.

🔍

✖

Beispielbild mit zusätzlichem CSS „right“

🔍

✖

Beispielbild maximiert
Das Modul ist von der Klasse „max“ umschlossen und verwendet diese auch für die Größeneinstellung.
Allerdings ist das Beispielbild zu schmal für die verfügbare Textbreite. Das lässt sich mit dem nachfolgenden, zentrierten Bild prüfen, dass „vergrößert“ genauso groß ist, wie das hier gezeigte »normal« große (Mit dem Mausrad wird der Hintergrund gerollt…).

🔍

✖

Beispielbild zentriert
„center“ umschließt das Bild und ist die Bildklasse.