Bilder zoomen: FancyZoom
8. February 2008 – 22:26 Uhr
Bin soeben via deep-resonance auf eine einfach einzubindende Möglichkeit gestoßen, ausgehend von kleinen Vorschaubildern (Thumbnails) das jeweilige große Bild per Javascript unmittelbar am Ort aufzoomen zu lassen:
Das Päckchen besteht aus zwei Javascript-Dateien (33,8 Kb) und ein paar kleinen Bildelementen für Rahmen, Schatten und Schließknopf und ist kinderleicht auf der eigenen Website einzubinden. Sofern man übliche HTML-Bildlinks <a href=”…”><img src=”…”></a> verwendet, funktioniert das Ganze automatisch, ohne dass man noch im eigenen Quelltext editieren müsste.
Bei ausgeschaltetem Javascript funktionieren die Links einfach und gewohnt HTML-mäßig.
Welche Browser Probleme damit haben (na? welche?), gibt der Autor an, in den Kommentaren gibt es mehr dazu.
Arrrg … wenn mir beim Zwinkern ständig ein paar Wimpern vom oberen und vom unteren Augenlid zusammenkleben bleiben, werde ich schier irre!! Moment …
Ich habe diese Skripte soeben einmal testweise auf meiner Bilder-Domain augenstille.de eingebunden und bin ganz angetan. Im Firefox unter Linux gibt es kein Problem, im Opera öffnen die großen Bilder zu weit unten und rutschen aus dem Fenster heraus (das Problem ist dem Entwickler wohl bekannt). Nachher schaue ich vielleicht noch unter Windows nach.
Ein kleines Problem
Die Sache mit dem Schlagschatten um das gezoomte Bild wird jedoch problematisch, wenn man für die Vorschaubilder (img-Tags) im Stylesheet Paddings oder Margins definiert hat. Ich habe das vorläufig für die ersten paar Bilderserien so gelöst, dass ich eine Klasse für die Links-Tags eingesetzt habe und über diesen Umweg den Vorschau-Links etwas Platz zueinander verschafft habe. Das muss aber doch eleganter lösbar sein.
Hier im Blog würde das auf diese Weise nämlich nicht funktionieren, da ich um Vorschaubilder (Bilder in meinen Artikeln) per Padding einen orangefarbenen Rahmen absetze. Deswegen müsste ich erst eine passende Lösung für diese Schatten finden, wenn ich FancyZoom auch hier einsetzen wollte. Ich könnte die Schatten natürlich im Skript wegdefinieren …
Nutzen und Kosten?
Hier mag nun ein Knackpunkt für die Nutzbarkeit liegen: Der Entwickler gibt das Programm frei und kostenfrei für nicht-kommerzielle Websites. Für die Nutzung auf kommerziellen Websites (»i.e. makes you money«) verlangt er eine einmalige Lizenzgebühr von $39.
Bei grundsätzlichem Interesse an den Skripten lest bitte auch in den Kommentaren auf der Entwicklerseite, denn über diese Angelegenheit – was als kommerziell anzusehen ist – wird dort diskutiert.
Dieser Inhalt (Textbeitrag und Fotos) ist unter einer Creative-Commons-Lizenz BY-NC-ND lizenziert.
Am 9. February 2008 um 15:46 Uhr
Erinnert mich (auch vom Preis her) an HighslideJS: http://vikjavev.no/highslide/, das ich vom Preis abgesehen ganz famos finde, weil es mehrere Bilder gleichzeitig öffnen kann und man die Bilder verschieben kann.
Am 10. February 2008 um 03:15 Uhr
was mir sehr gut gefällt, ist, das man die bilder, so wie bei dir auf augenstille gesehen, erstmal anklicken muss zum größerwerden, ist insgesamt ne sehr schöne lösung.
bei mir auf b2evo blogsystem gibts ein modul bzw plugin, das ich schon mal nutzte, da gehen die bilder allerdings sofort auf, sobald die maus drüber fährt. vieleicht hast du das schon mal gesehen bei mir. das kommt zwar im ersten moment ganz nett als effekt, ist aber nervig, will man die bilder eben nicht aufmachen. sie poppen einfach auf.. zudem nach unten, aus dem fenster raus je ach dem.
augenstille: sehr sehr schön übrigens
Am 10. February 2008 um 08:51 Uhr
@Lyrasia: Danke! Ich müsste da eigentlich mehr machen, komme aber irgendwie nicht mehr so richtig dazu. Wollte das mal zu so etwas wie einem Bilder- oder Fotoblog erweitern. Dazu ein Fotoblog-Plugin für WordPress testen usw.
Der Effekt ist mir bei dir noch nicht aufgefallen, was aber daran liegen kann, dass ich normalerweise Javascript per NoScript blockiere.
Ich werd’ mal schauen …
@Gregor: Ich habe eben gerade mal auf diese Seite geschaut und dort die Beispiele getestet: Das scheint ja sogar noch besser zu funktionieren als FancyZoom. Wirkt bei mir im Firefox/Linux etwas weicher, flüssiger. Und es ist wohl etwas »browserkompatibler«
Der Knackpunkt für viele wird aber am Ende die Tatsache sein, dass beide Lösungen für kommerzielle Seiten (also auch schon für Seiten mit Adsense usw.) kostenpflichtig sind.