Deep-Zoom mit Zoomify

Erst durch das tie­fe Zoo­men kom­men bei die­sen sehr gro­ßen Bil­dern die gan­zen Details rich­tig zur Geltung.

Da erin­ner­te ich mich vage an eine Web­sei­te wo man rie­si­ge Pan­ora­men — Giga­pi­xel — erkun­den konn­te indem man sich zoo­mend und schie­bend hin­durch beweg­te. Nach etwas Recher­che kam ich auf die dahin­ter lie­gen­de Engi­ne — zoo­mi­fy.

Da gibt es eine Free‑, Express‑, Pro- und Enterprise-Version. Zum Tes­ten hat­te ich mir die Free-Version her­un­ter­ge­la­den. Der Kon­ver­ter nimmt das dar­zu­stel­len­de Bild und erzeugt für jede Zoom­stu­fe eine Anzahl qua­dra­ti­sche Kachel­bil­der in einer Ord­ner­struk­tur. Zum Bei­spiel wur­de das Blumenbeet-Bild zu einer Ord­ner­struk­tur aus 7.041 Datei­en und 28 Unter­ord­nern. Zoo­mi­fy setzt dar­aus spä­ter den Aus­schnitt des Bil­des zusam­men, der gera­de betrach­tet wird und lädt gege­be­nen­falls Kacheln beim Zoo­men oder Schie­ben nach.

Mit der Free-Version kam ich aller­dings schnell an mei­ne Gren­zen und ich ent­schied mich, für etwa 40 Euro eine Pro-Lizenz zu erwer­ben. Die Fea­tures die ich für mei­ne Web­sei­te brau­che sind ZIF-One-File-Storage, Zoo­mi­fy Unli­mi­t­ed Kon­ver­ter (bei­des ab Express) sowie Anpass­bar­keit der Bedien­ele­men­te und Was­ser­zei­chen (bei­des ab Pro).

Als alles funk­tio­nier­te habe nach und nach wei­te­re Arti­kel mit gro­ßen Bil­dern ent­spre­chend erwei­tert. Nun kann man sich in so man­chen Bil­dern »ver­lau­fen«.

Jetzt wirds technisch.

Falls du auch Word­Press benutzt und gern dar­auf rie­si­ge Bil­der zoom­bar unter­brin­gen möch­test, gibt es hier eine klei­ne Anleitung.

Grund­sätz­lich soll­te man ja nicht an sei­nem The­me direkt rum­pfu­schen, denn die Ände­run­gen sind spä­tes­tens beim nächs­ten Update weg.

Als ers­tes brauchst du ein Child-Theme. Das ist nur ein neu­er Ord­ner unter­halb wp-content/themes dei­ner WordPress-Installation und eine neue functions.php mit einem Ver­weis auf das Haupt­the­me. Das wird hier super erklärt.

Du brauchst einen Ord­ner, um die Bild­da­ten (Ord­ner mit Kacheln oder ZIF-Bilder) abzu­le­gen. Für mich hat es sich als prak­ti­scher erwie­sen, die­sen außer­halb der WordPress-Installation zu ver­or­ten und die­sen Ord­ner mit einem FTP-Tool zu pfle­gen. Da kannst du z. B. auch eine Sub­do­main drauf legen (z. B. zoom.meineseite.de). Vor­teil: Unab­hän­gig von den WordPress-Gegebenheiten, ‑Updates und ‑Ände­run­gen lie­gen die Fotos immer an der glei­chen Stelle.

Zoo­mi­fy besteht aus dem Teil fürs Web (Ord­ner mit JS-Datei, CSS-Datei, But­ton­bil­der) und dem Con­ver­ter. Hier gibt es die Zoomify-Engine. Die ver­schie­de­nen Lizenz­stu­fen — Free, Express, Pro und Enter­pri­se — sind ver­schie­den aus­ge­stat­tet was die Fea­tures betrifft. Das wird alles als ZIP zum Her­un­ter­la­den ange­bo­ten. Ein­fach lokal entpacken.

Die freie Ver­si­on tut was sie soll — aller­dings kann die nur mit Ein­zel­bil­dern als Kacheln umge­hen. Und wer schon­mal 7.000 klei­ne Bil­der auf einen Web­ser­ver hoch­ge­la­den hat, weiß das kom­pak­te ZIF-One-File-Format schnell zu schät­zen. Da ist alles in einer Datei und es lädt auch viel schnel­ler. Gibt’s ab 20 Euro. Lohnt sich. Ich habe die Pro-Version für 40 Euro, weil da u. a. noch Over­lays und Klick­be­rei­che dazu kom­men. Und ich spiel’ doch so ger­ne mit sowas…

Instal­la­ti­on: Einen neu­en Ord­ner zoo­mi­fy unter­halb dei­nes Child-Themes anle­gen — also z. B. wp-content/themes/mytheme-child/zoomify - und dann den Web-Teil aus dem ent­pack­ten Archiv dort­hin hochladen.

Jetzt kommt mei­ne Zoomify-Ergänzung , die ich auf Git­hub ver­öf­fent­licht habe, ins Spiel. Das muss erst­mal alles mit in die functions.php dei­nes Child-Themes. Und dann passt du ggf. Pfa­de und Datei­na­men an dei­ne Gege­ben­hei­ten an:

Zei­le 9: my-zoomify-engine-scriptfile-min.js erset­zen durch den Namen dei­ner JS-Datei. Oder benen­ne dei­ne JS-Datei so um. 😉

Zei­le 16: Hier kommt der Pfad zu den ZIF-Bildern oder Kache­lord­nern hin, z. B. https://zoom.meineseite.de/ — beach­te hier das »/« am Ende.

Das wars eigent­lich dann schon.

Mei­ne Funk­ti­on wer­tet einen Shortcode*

[ zoomify name="myfile.zif" ... ]

aus und über­setzt die dar­in ent­hal­te­nen Optio­nen in einen Javascript-Funktionsaufruf. Nicht jedes Zoomify-Paket unter­stützt alle Para­me­ter. Ich habe auch nur die gän­gi­gen im Array in den Zei­len 21–42 der functions.php mit ihren Vor­ga­be­wer­ten ein­ge­pflegt. Das bestimmt auch, wel­che Para­me­ter im Short­code mög­lich sind. Wich­tig ist hier­bei: Im Script müs­sen die Begrif­fe genau so groß und klein geschrie­ben wer­den wie in der Zoomify-Dokumentation*, im Short­code immer alles klein.

* Beim Beispiel-Shortcode muss natür­lich das ers­te Leer­zei­chen raus. Ich woll­te aber den Code zei­gen. Das war dann ein rich­ti­ger Kampf zwi­schen Wil­len und Word­Press. Wir konn­ten uns bei­de auf die­sen Kom­pro­miss einigen

** die Zoomify-Dokumentation liegt dem Down­load als HTML-Datei bei.