WordPress: FancyBox – Bilder schöner zoomen lassen

Februar 8, 2009 Kategorie: WordPress, mit eigene Photos

Teilen

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.

Ähnliche Beiträge:

  1. Bilder zoomen mit JavaScript
  2. Schnelleres WordPress durch kleinere Bilder
  3. WordPress: wpTwitBox Plugin: WordPress, Twitter und bit.ly
  4. WordPress: Notizen auf Bildern mit imgNote
  5. Meine WordPress Plugins

Trackbackadresse dieses Beitrags


    52 Kommentare zu “WordPress: FancyBox – Bilder schöner zoomen lassen”

  1. Funkmaster Flow (twitter @funkmasterflow) sagt

    Naaa, haste das ganz alleine gefunden? ;-)

    Kommentar am 8. Februar 2009 um 02:03 geschrieben.


  2. b-age (twitter @b_age) sagt

    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)

    Kommentar am 8. Februar 2009 um 02:12 geschrieben.


  3. Funkmaster Flow (twitter @funkmasterflow) sagt

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

    Kommentar am 8. Februar 2009 um 02:35 geschrieben.


  4. Sascha (twitter @sn0opy) sagt

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

    Kommentar am 8. Februar 2009 um 02:47 geschrieben.


  5. Ralf sagt

    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.

    Kommentar am 8. Februar 2009 um 03:11 geschrieben.


  6. Ute sagt

    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!

    Kommentar am 8. Februar 2009 um 09:30 geschrieben.


  7. Volker sagt

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

    Kommentar am 8. Februar 2009 um 09:42 geschrieben.


  8. Florian sagt

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

    Kommentar am 8. Februar 2009 um 10:00 geschrieben.


  9. SonicHedgehog (twitter @SonicHedgehog) sagt

    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?

    Kommentar am 8. Februar 2009 um 10:18 geschrieben.


  10. caschy (twitter @caschy) sagt

    @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.

    Kommentar am 8. Februar 2009 um 10:23 geschrieben.


  11. Rene sagt

    schick. danke für den tip.

    Kommentar am 8. Februar 2009 um 10:37 geschrieben.


  12. redsrceen sagt

    feines Teil!

    Kommentar am 8. Februar 2009 um 10:37 geschrieben.


  13. Dirk Paehl (twitter @dpaehl) sagt

    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

    Kommentar am 8. Februar 2009 um 10:43 geschrieben.


  14. Horst Scheuer (twitter @Horst_S) sagt

    Dein Fancy Zoom hat mir schon immer gefallen!

    Kommentar am 8. Februar 2009 um 10:50 geschrieben.


  15. Joerg (twitter @Stagadon) sagt

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

    Kommentar am 8. Februar 2009 um 10:56 geschrieben.


  16. Knut (twitter @Luzifer) sagt

    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.

    Kommentar am 8. Februar 2009 um 11:31 geschrieben.


  17. fred sagt

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

    Kommentar am 8. Februar 2009 um 11:38 geschrieben.


  18. mark sagt

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

    Kommentar am 8. Februar 2009 um 11:55 geschrieben.


  19. Matthias sagt

    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?

    Kommentar am 8. Februar 2009 um 12:15 geschrieben.


  20. Gequeoman sagt

    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.

    Kommentar am 8. Februar 2009 um 13:09 geschrieben.


  21. Joni sagt

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

    Kommentar am 8. Februar 2009 um 14:45 geschrieben.


  22. René (twitter @mobiFlip) sagt

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

    Kommentar am 8. Februar 2009 um 14:46 geschrieben.


  23. MaxFragg (twitter @MaxFragg) sagt

    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

    Kommentar am 8. Februar 2009 um 18:12 geschrieben.


  24. Volker sagt

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

    Kommentar am 8. Februar 2009 um 18:13 geschrieben.


  25. caschy (twitter @caschy) sagt

    @Volker:

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

    Kommentar am 8. Februar 2009 um 18:13 geschrieben.


  26. Urgixgax sagt

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

    Kommentar am 8. Februar 2009 um 18:29 geschrieben.


  27. funkygog sagt

    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.

    Kommentar am 8. Februar 2009 um 19:58 geschrieben.


  28. Thomas sagt

    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.

    Kommentar am 8. Februar 2009 um 20:37 geschrieben.


  29. Martin sagt

    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!

    Kommentar am 8. Februar 2009 um 23:13 geschrieben.


  30. Philipp sagt

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

    Kommentar am 10. Februar 2009 um 16:27 geschrieben.


  31. Stephan sagt

    @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.

    Kommentar am 10. Februar 2009 um 19:53 geschrieben.


  32. Eugen sagt

    bei mir Funktioniert es nur bei den Artikeln.
    Kann man es so einrichten, dass auch auf den manuell angelegten Seite die Fotos gezoomt werden?

    Kommentar am 17. Februar 2009 um 11:27 geschrieben.


  33. Ralf sagt

    @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.

    Kommentar am 17. Februar 2009 um 17:14 geschrieben.


  34. Eugen sagt

    @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.

    Kommentar am 17. Februar 2009 um 18:06 geschrieben.


  35. Ralf sagt

    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.

    Kommentar am 18. Februar 2009 um 17:12 geschrieben.


  36. Eugen sagt

    2.7 also daran scheitert es nicht.
    ich habe jetzt mal was anderes genommen, die Lightbox 2

    Kommentar am 18. Februar 2009 um 20:49 geschrieben.


  37. lordfiSh (twitter @lifeblogv3) sagt

    Bei den Leuten wo das Plugin nicht geht, folgende Zeile (anpassen) in bereich head (header.php) hauen:

    [script type="text/javascript" src="http://schlatterboy.wiiare.in/wp-content/plugins/fancybox-for-wordpress/jquery.fancybox.js"][/script]

    [ ] durch richtige ersetzen, geht nur hier im Blog nicht ;)

    Kommentar am 18. Februar 2009 um 22:31 geschrieben.


  38. Seb sagt

    Wo genau befindet sich denn die Datei header.php ?

    Kommentar am 8. März 2009 um 09:29 geschrieben.


  39. caschy (twitter @caschy) sagt

    @Seb: Im Verzeichnis deines Themes.

    Kommentar am 8. März 2009 um 09:53 geschrieben.


  40. Seb sagt

    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.

    Kommentar am 8. März 2009 um 11:20 geschrieben.


  41. René sagt

    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? ^^

    Kommentar am 9. März 2009 um 00:03 geschrieben.


  42. Ulf sagt

    Tolle Sache, sind solche Sripte eigentlich auch für “normale” (nicht WP) Webistes zu bekommen?

    Kommentar am 9. März 2009 um 18:25 geschrieben.


  43. Zegger sagt

    hat einer einen Tip warum das Plugin nicht bei allen Bilder funktioniert ???

    Kommentar am 19. Juni 2009 um 17:03 geschrieben.


  44. Jack sagt

    Ich hab das Plugin grad auf einer frischen Wordpress-Umgebung aktiviert und im Prinzip funktionierts auch, aber wo kann man die Ein- Ausblendzeit konfigurieren? Bei mir ist das Bild blitzschnell aufgezoomt und gleich schnell wieder weg.

    Kommentar am 10. September 2009 um 08:19 geschrieben.


  45. Krecki sagt

    Hallo,

    habe das Plugin auch installiert und aktiviert. Leider funktioniert es bei keinem Bild (siehe mein Blog). Woran kann das liegen? Muss ich noch irgendwo irgendwas einstellen? Oder bei den Bildern etwas einstellen?

    Kommentar am 22. September 2009 um 20:14 geschrieben.


  46. Stephan sagt

    Hast du diese Zeile in den Header-Bereich eingefügt?

    [script type="text/javascript" src="http://schlatterboy.wiiare.in/wp-content/plugins/fancybox-for-wordpress/jquery.fancybox.js"][/script]

    Aber mal eine andere Frage. Habt ihr das auch, dass Videos immer die Bilder überdecken? Gibt es da eine einfache Lösung für? Ich denke es hat etwas mit den Ebenen zu tun (z-index?).

    Kommentar am 23. September 2009 um 10:45 geschrieben.



  1. 8 Trackback(s)

  2. Feb 8, 2009: Tom's Diner - Club Edition
  3. Feb 8, 2009: Planet Gatze » Blog Archive » Bilder zoomen mit WP FancyBox
  4. Feb 8, 2009: WP - fancybox | Ute's Blog
  5. Feb 8, 2009: Urgixgax Blog » Aus FancyZoom, wird in meinem Blog FancyBox
  6. Feb 9, 2009: WP Plugin: FancyBox lässt Thumbnails zoomen : : Notepad.exe
  7. Mrz 30, 2009: Generation ZweiNull

Gib deine Meinung ab! Sollte nach dem Abschicken dein Kommentar nicht erscheinen, so wurde dieser als Spam erkannt. Doch keine Sorge, ich überprüfe mehrmals täglich und schalte deinen Kommentar dann frei. 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. Wer sein Bild in den Kommentaren sehen will, der sollte sich bei Gravatar registrieren.





© 2005-2010 - Caschys Blog. Gemacht mit viel Liebe & Kaffee.