WordPress: FancyBox – Bilder schöner zoomen lassen

8. Februar 2009 Kategorie: mit eigene Photos, WordPress, geschrieben von: caschy

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):

CIMG0423 DSC_7244 DSC_7353

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.

Über den Autor: caschy
Dortmunder im Norden. Blogger, Freund gepflegter Technik, BVB-Maniac und Hausmeister dieses Blogs. Auch zu finden bei Twitter, Google+, Facebook, XING und YouTube.

55 Kommentare

Funkmaster Flow (twitter ) 8. Februar 2009 um 02:03 Uhr

Naaa, haste das ganz alleine gefunden? ;-)

b-age (twitter ) 8. Februar 2009 um 02:12 Uhr

jau, schlicht und funktionell, so wünscht man sich das. und extrem einfach in der anwendung! (hihi, klingt wie werbung für haftcreme oder so)

Funkmaster Flow (twitter ) 8. Februar 2009 um 02:35 Uhr

@b-age:
da hast Du recht… ;-)
Ist aber echt ein saugeiles JavaScript.
Wertet so manche Screenshot-Popups ziemlich auf.

Sascha (twitter ) 8. Februar 2009 um 02:47 Uhr

Sehe in Opera erst gar kein Bild. Nur das kleine “X” zum schließen.

Ralf 8. Februar 2009 um 03:11 Uhr

Erinnert mich ein wenig an Highslide, wobei sich Highslide wesentlich stärker anpassen lässt. Was mir an Highslide am besten gefällt, ist das man die Bilder auch verschieben kann. Somit kann man z.B. eine erklärende Grafik einbinden die der Besucher sich anschauen und trotzdem den Text lesen kann.
Für WP gibt es zwar ein paar Plugins, für meinen Blog habe ich mir allerdings selber eine Lösung zusammen gestrickt.

Ute 8. Februar 2009 um 09:30 Uhr

Danke Dir für den Tipp – ich bin immer interessiert an Möglichkeiten zur Bilderpräsentation – ich mochte das Fancy Zoom eigentlich ganz gerne, was mich da eben störte, war, dass man in der Galerie die Bilder nicht weiter blättern konnte…das ist ja mit diesem plugin nun gelöst! Schön! Werde es mal ausprobieren!

Volker 8. Februar 2009 um 09:42 Uhr

Kann man denn verhindern, dass der mit Rechts- oder Linksklick durch alle Bilder zoomt? Also nur auf die aktuellen (hier drei) Bilder beschränken?

Florian 8. Februar 2009 um 10:00 Uhr

Danke für den Hinweis! Fancy Zoom hab ich auch nicht zum laufen bekommen.

SonicHedgehog (twitter ) 8. Februar 2009 um 10:18 Uhr

Also den Fehler, dass man eine kurze Zeit lang ein “X” sieht, habe ich leider auch manchmal, speziell bei langsamen Verbindungen (EDGE). Werden da gar keine width- und height-Attribute angegeben?

Wie auch immer, ich wollte nur sagen, dass der Effekt auch so halbwegs am iPhone funktioniert :D

PS: @caschy Liegt das an mir, oder hast du das iPhone-Theme / WP-Touch deaktiviert?

caschy 8. Februar 2009 um 10:23 Uhr

@Sascha: Scheinbar gibt es es bei Opera tatsächlich Probleme, habe das eben mal selber getestet. Habe den Entwickler mal angeschrieben.

@Sonic: Nö, alles wie bisher. Nichts geändert.

Rene 8. Februar 2009 um 10:37 Uhr

schick. danke für den tip.

Dirk Paehl (twitter ) 8. Februar 2009 um 10:43 Uhr

Habe es mal getestet. Es funktionieren nicht alle Bildern damit ein JPG klappt das andere nicht (jedenfalls bei mir). Getestet mir Chrome und dem IE

Horst Scheuer (twitter ) 8. Februar 2009 um 10:50 Uhr

Dein Fancy Zoom hat mir schon immer gefallen!

Joerg 8. Februar 2009 um 10:56 Uhr

Vielleicht solltet Du das “Click para Cerrar” noch übersetzen. ;-)

Knut (twitter ) 8. Februar 2009 um 11:31 Uhr

Naja was mir an dem Plugin nicht gefällt ist, dass die folgenden Bilder nicht vorgeladen werden. Also wenn ich gerade ein Bild betrachte wird in Lightbox schon das nächste geladen, während ich hier die volle Ladezeit warten muss. Für User wie mich, die noch mit ISDN oder schlimmer noch mit Modem unterwegs sind einfach ein graus.

fred 8. Februar 2009 um 11:38 Uhr

@Knut
das stimmt, ich habe eh immer das gefühl jquery ist langsamer als mootools. aber das kann auch nur einbildung sein :)

mark 8. Februar 2009 um 11:55 Uhr

“Click para Cerrar” steht bei mir als Tooltip in der Box, was Nicht-Spanier (falls das Spanisch ist) verwirren könnte.

Matthias 8. Februar 2009 um 12:15 Uhr

Sehr nettes Plugin.
Aber: ich habe auch noch NGGallery am laufen. Klicke ich in der Beitragsansicht auf ein Gallerie-Bild, wird das Bild 2x angezeigt. Es wird also von beiden Scripten geladen. Kann man das irgendwie verhindern?

Gequeoman (twitter ) 8. Februar 2009 um 13:09 Uhr

Wieder mal ein Premium-Tipp, Danke :-)
Vor allem löst es bei mir das Problem, das ich mit FancyZoom hatte: es funktionierte nicht auf Unterseiten.

Joni 8. Februar 2009 um 14:45 Uhr

Mausklick rechts oder links zoomt zum nächsten):
Das funktioniert bei mir nicht. FF 3.0.6

René (twitter ) 8. Februar 2009 um 14:46 Uhr

Leider funktioniert es erst, wenn alle Inhalte der entsprechenden Webseite geladen sind. Vorher tut sich nichts, außer das kleine schwarze Kreuz.

MaxFragg (twitter ) 8. Februar 2009 um 18:12 Uhr

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

Volker 8. Februar 2009 um 18:13 Uhr

Mausklick rechts oder links funktioniert bei mir auch nicht. Ubuntu 8.10 mit Firefox 3.0.5.

caschy 8. Februar 2009 um 18:13 Uhr

@Volker:

Hier im Blog ist das auch nicht eingesetzt ;) Steht aber auch oben im Text.

Urgixgax 8. Februar 2009 um 18:29 Uhr

Geuel…danke, für den Tipp … hab ich mir gleich “eingebastelt”. Habe nur den Close-Button etwas geändert.

funkygog 8. Februar 2009 um 19:58 Uhr

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.

Thomas 8. Februar 2009 um 20:37 Uhr

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.

Martin 8. Februar 2009 um 23:13 Uhr

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!

Philipp 10. Februar 2009 um 16:27 Uhr

Ich habe hier nie auf die bekannten Plugins Slimbox oder Lightbox gesetzt die den Hintergrund dabei abdunkeln.

Bei Lightbox kann man das Abdunkeln übrigens auch ausstellen ;)



Du willst nichts verpassen?
Neben der E-Mail-Benachrichtigung habt ihr auch die Möglichkeit den Feed dieses Beitrags zu abonnieren. Wer natürlich alles lesen möchte, der sollte den Hauptfeed abonnieren. Alternativ könnt ihr euch via E-Mail über alle neuen Beiträge hier im Blog informieren lassen. Einfach eure E-Mail-Adresse hier eingeben, dann bekommt ihr 1x täglich eine Zusammenstellung.

Deine Meinung ist uns wichtig...

Name*


E-Mail* (wird nicht veröffentlicht)


Webseite


Twitter-Name


Blogverzeichnis - Blog Verzeichnis bloggerei.de