Design-Update (2): FancyZoom mit jQuery

Nachdem beim letzten Update heute Mittag die Tabs jQueriefied wurden ist nun der Lightbox-Effekt zum vergrößern der Bilder dran. Ich bin sehr glücklich, dass ich dafür eine jQuery-Variante des beliebten FancyZoom-Effekts gefunden habe. Unglücklicherweise ist der französische Autor der Meinung, der Close-Button müsse rechts sein – sicherlich ein Windows-User ;-)

FH 2008 Screenshot Zur Veranschaulichung hab ich hier mal einen Screenshot angehängt. Der Effekt ist natürlich nur im Blog und nicht im Reader sichtbar. ;-)

Zum kostenlosen Download gibt’s das Plugin hier. Der Einbau in den Blog ist mit Handarbeit verbunden, aber dennoch nicht allzuschwer. Ein fertiges WordPress-Plugin gibt es meines Erachtens noch nicht. Einfache jQuery-Kenntnisse bzw. grundlegendes Verständnis für das Prinzip sollten jedoch ausreichen.

Im Blog ist nun das „händisch“ eingebaute Javascript komplett auf Basis von jQuery, was es später stark vereinfachen sollte alles in eine JS-Datei einzudampfen. Das ist zwar nicht gerade Wartungsfreundlich, verringert aber die Serverlast bei höheren Zugriffszahlen deutlich.

P.S.: Den Beitrag hier habe ich eben schon mal abgeschickt. Leider hat ecto offenbar die Hälfte inkl. Screenshot gefressen. Kennt jemand von den ecto-Usern das Problem? Evtl. ein Beta3-Bug?

Kommentare

10 Antworten zu „Design-Update (2): FancyZoom mit jQuery“

  1. Avatar von Dirk Olbertz

    Auf seiner Homepage die Beispiele haben den Schließen-Button aber oben links…

  2. Avatar von Micha

    sorry, aber es fällt mir jetzt erst auf. Warum hast du YAML über Bord geworen?

  3. Avatar von Frank Helmschrott

    @Dirk: Bei FancyZoom selbst ja, das ist aber die nicht-jQuery-Variante. Beim unteren Link gibt’s die jQuery-Version und da sind die (zumindest bei mir) rechts.

    @Micha: Ich schreib dazu später noch nen Beitrag aber vorab schon mal: Warum nicht? :-)

  4. Avatar von Micha

    Ich freue mich schon auf den Beitrag, hatte dich als bekennenden YAMLer in Erinnerung. Aber du wirst schon deine Gründe dafür haben.

  5. Avatar von Johannes

    Dieses FancyZoom sieht echt nicht schlecht aus. Bin ich mal glatt dem Reader entflohen. ;) Bei „Zum kostenlosen Download gibt’s das Plugin hier“ hat ecto wohl auch einen Link gefressen?

  6. Avatar von Frank Helmschrott

    oder ich ihn vergessen – danke für den Hinweis – hol ich gleich mal nach.

  7. FH2008 – ein paar Infos zum neuen Design » Design, gedanken, info, Intern, layout, wordpress » Frank Helmschrott

    […] XHTML/CSS-Code basiert nicht mehr auf YAML. Die Frage nach dem Warum tauchte vorhin bereits in den Kommentaren auf und so einfach ist die gar nicht zu beantworten, denn es war eigentlich keine bewusste […]

  8. Avatar von Frank

    FancyBox ist wesentlich schlanker, vielleicht eine Überlegung wert und basiert auch auf jQuery.
    Eingebunden als Bsp. gibt’s hier

  9. Avatar von Christoph
    Christoph

    Finde das Teil Super. wo aber finde ich den Download? Kann kein Französisch.
    vielen Dank

  10. Avatar von Frank Helmschrott

    Die Seite des Plugins existiert wohl nicht mehr. Die Fancy-Zoom-Seite ist jedoch englisch, der Einbau in WordPress auch ohne Plugin kein großer Aufwand.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.