WordPress: FancyBox – Bilder schöner zoomen lassen
von caschy | 54 Kommentare
Ich bin ganz oft gefragt worden wie ich das Einblenden der Bilder in diesem Blog realisiere. Ich habe hier nie auf die bekannten Plugins Slimbox oder Lightbox gesetzt die den Hintergrund dabei abdunkeln – sondern auf ein einfaches Javascript welches die Bilder nach vorne zog und vergrößerte. Fanzy Zoom nannte sich der Spaß und der musste relativ simpel in das Theme eingebaut werden. Dazu gab es dann auch noch ein Plugin – aber das habe ich auch nicht zum Laufen bekommen. Wie auch immer – ganz frisch gibt es jetzt das in der Überschrift erwähnte WordPress-Plugin namens FancyBox. Lange Rede – kurzer Sinn: die beste Lösung dieser Art die ich kenne. Vielleicht auch für Galerien interessant – denn das Plugin vergrößert nicht nur die Bilder sondern hat auch noch die Funktion zum Weiterblättern – wie aus anderen Plugins bekannt. Falls also gerade wer was in die Richtung sucht – einfach ausprobieren. Hier mal die Demo (mittig ins Bild klicken schließt es – Mausklick rechts oder links zoomt zum nächsten):
So – fröhliches Zoomen =) – hier im Blog seht ihr noch die alte Version.
Nachtrag: Scheinbar gibt es Probleme mit Opera – also am besten die aktuelle Beta der *.js-Datei von hier nehmen und ins Plugin-Verzeichnis packen.
Wird geladen ...
also hier gehts mit opera 9.63 unter windows wunderbar und mit opera 10 alpha mal schnell sehen…
im 10er ists nicht ganz so flüssig aber funktioniert auch incl einblend effekt
Mausklick rechts oder links funktioniert bei mir auch nicht. Ubuntu 8.10 mit Firefox 3.0.5.
@Volker:
Hier im Blog ist das auch nicht eingesetzt 😉 Steht aber auch oben im Text.
Geuel…danke, für den Tipp … hab ich mir gleich „eingebastelt“. Habe nur den Close-Button etwas geändert.
Der Effekt ist schön, aber das Script ist nur für nicht kommerzielle Seiten kostenlos.
Sobald man Werbung auf der Seite hat, ist die Seite schon kommerziell!?
Deshalb verwende ich immer noch das Plug-In Zap-ImgPop
nicht ganz so schick, aber sehr praktisch.
Ein Zufall, ich habe gerade mehrere Lightbox Derivate getestet, um zu entscheiden, welche ich in meine neue Web Galerie für Lightroom aufnehme.
Am Ende habe ich mich gegen diese FancyBox entschieden und stattdessen die FloatBox und HighSlide verwendet.
HighSlide ist zwar für kommerzielle Seiten lizenzpflichtig, aber wirklich beeindruckend. Voallem weil mehrere Lightboxen gleichzeitig geöffnet werden können.
Ich benutze FancyZoom und bin durch Dich darauf aufmerksam geworden. Aber mit dem WP-Plugin hatte ich zunächst auch Riesenprobleme: mal zoomten die Bilder, mal nicht. Des Rätsels Lösung ist eigentlich total simpel: in den Plugin-Einstellungen bei „Path to the plugin“ einfach einen Slash / dem Pfad voranstellen, dann ist alles so, wie es soll 🙂 und alle Bilder zoomen!
Bei Lightbox kann man das Abdunkeln übrigens auch ausstellen 😉
@Matthias
Ja kannst du. In dem du bei den Optionen von der NGGallery unter den Optionen die Effekte ausschaltest. Dann wird nur der Effekt des Fancy angezeigt.
bei mir Funktioniert es nur bei den Artikeln.
Kann man es so einrichten, dass auch auf den manuell angelegten Seite die Fotos gezoomt werden?
@Eugen: Ja, du müsstest eigentlich nur den Bildern bzw. dem Link zum Bild (von Hand) das Attribut rel=fancybox“ hinzufügen.
Also z.B.: [a href=blablubb.jpg rel=“fancybox“
Eigentlich sollte dies automatisch passieren. Ist dem nicht so, dann wird das JS-Script auf den statischen Seiten ggf. nicht geladen (warum auch immer). Musst du mal in den Quelltext schauen ob auf einer statischen Seite die Links das entsprechende rel=fancybox haben und das JS-Script geladen wird.
@Ralf
Danke für den Hinweis, aber es scheint so, dass da JS nicht geladen wird. Habe versucht rel=“fancybox“ hinzuzufügen, jedoch kein Erfolg.
Deine WP-Version wäre jetzt interessant. Das Plugin dürfte mit WP-Versionen älter als WP 2.1 nicht funktionieren.
Ist deine Version 2.1 oder höher, dann dürfte so eine Ferndiagnose schwer werden. Es gibt verschiedene Gründe warum das JS nicht geladen wird.
2.7 also daran scheitert es nicht.
ich habe jetzt mal was anderes genommen, die Lightbox 2
Bei den Leuten wo das Plugin nicht geht, folgende Zeile (anpassen) in bereich head (header.php) hauen:
[ ] durch richtige ersetzen, geht nur hier im Blog nicht 😉
Wo genau befindet sich denn die Datei header.php ?
@Seb: Im Verzeichnis deines Themes.
Danke! Bei mir funktionierts aber leider trotzdem noch nicht. Auf diesem Blog befindet sich im Tag noch ein „onclick“ (siehe folgender Ausschnitt):
[a href=“http://stadt-bremerhaven.de/wp-content/uploads/2009/02/cimg0423.jpg“ onclick=“javascript:urchinTracker(‚/file/wp-content/uploads/2009/02/cimg0423.jpg?ref=/2009/02/08/wordpress-fancybox-bilder-schner-zoomen-lassen/‘);“]
Sicher dass das plugin dies von alleine machen können soll? Wenn dem so ist, dass liegt es bei mir wahrscheinlich am safe mode, der nämlich on ist.
Funktioniert im Wp 2.7.1! Kann mich nicht beklagen. Eine Frage hätt ich trotzdem: Gibt es garkeine einstellmöglichkeiten wie die Bilder aufzoomen sollen und mit welcher Geschwindigkeit? Das ist ja eben die stärke an FancyBox.
Oder hab ich die Einstellungen nur net gefunden? ^^