Bilder zoomen mit JavaScript

23. Juli 2008 Kategorie: Internet, WordPress, geschrieben von: caschy

Vielleicht für den einen oder anderen hier mitlesenden Blogger oder Webmaster interessant: FancyZoom. FancyZoom zoomt die Bilder mittels JavaScript heran. Dies hat für mich den praktischen Nutzen, dass ich die hier eingeschränkte Größe der Screenshots sprengen kann. Klar hätte ich auf das Bild in Originalgröße verlinken können – aber das ist auch nicht so schick. Klickt einfach mal auf das Bild um zu testen:

1979604.d1e58d84.1024

Wie bindet man FancyZoom in eine vorhandenes WordPress ein (die Methode von Hand)? Ganz einfach – nachdem man das Paket heruntergeladen und entpackt hat kopiert man die beiden Ordner in den Standardordner eures Themes. Öffnet nun die Datei header.php und fügt folgenden Code ein.

Die automatische Methode: Benutzer eines WordPress-Blogs können auch dieses Plugin nutzen (Danke Max!).

In Zukunft werden alle Bilder (sofern ihr dies wollt) per schickem Zoom dargestellt. [via]

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

44 Kommentare

caschy 23. Juli 2008 um 10:49 Uhr

Danke Max, habe es mal oben zusätzlich eingefügt und den Tippgeber verlinkt =)

mööp 23. Juli 2008 um 10:53 Uhr

@Cashy
Setze das mal bitte bei deinen Screenshots ein … Auf den kleinen Bildern erkennt man immer (fast) nichts.

thx

caschy 23. Juli 2008 um 10:56 Uhr

@mööp: es ist bereits eingebaut. Allerdings dachte ich bisher, das relevante auf den Screens zu zeigen….

olli (twitter ) 23. Juli 2008 um 11:12 Uhr

Das Plugin ist scheiße! Stellt in meinem Theme nur auf der ersten Seite die Bilder mit dem JavaScript dar, sobald es ins Archiv geht, ist nichts mehr… Stuhl!

caschy 23. Juli 2008 um 11:16 Uhr

Olli, dann mach per Hand, hab ich hier auch drin.

Bernd (twitter ) 23. Juli 2008 um 11:29 Uhr

Warum nicht Lightbox? Gibt es schon ewig und funktioniert genauso, wenn nicht sogar schöner.

olli (twitter ) 23. Juli 2008 um 11:35 Uhr

ich finde es besser weil schneller als lightbox, und ich werde es wohl per hand machen müssen :(
lightbox ist auch schon ein wenig ausgelutscht, finde ich

souli 23. Juli 2008 um 11:38 Uhr

Sehr schade, dass das Plugin nichts nützt, wenn man mit Greasemonkey unter Firefox Greased Lightbox verwendet. Da wird nämlich einfach das “große” Bild geladen… Aber ansonsten eine nette Idee.

chevygnon 23. Juli 2008 um 11:41 Uhr

In Zukunft werden alle Bilder (sofern ihr dies wollt) per schickem Zoom dargestellt.

Wollen wir! Ich zumindest finde die Funktion ausgesprochen praktisch und auch hübsch anzusehen. :)

@caschy
Danke für dein neues blau. ;)

Sascha (twitter ) 23. Juli 2008 um 11:50 Uhr

Nutze bei mir auf der Seite Highslide JS. Nachteil daran ist, dass man jeden Link mit einem onklick-Event ausstatten muss. Grundlegend aber schöner, da dieses “X” nicht angezeigt wird, wobei man das bei Fancyzoom sicherlich ausschalten lässt.

Horst Scheuer (twitter ) 23. Juli 2008 um 11:57 Uhr

Solche Scripte gibt es ja wie Sand am Meer. Wobei das Script Slideshow das interessanteste ist.

mööp 23. Juli 2008 um 12:07 Uhr

@ Cashy

Wurde hier schon nen paar mal angesprochen, aber kannst du deine Kommentare mal bitte wieder hervorheben ^^

caschy 23. Juli 2008 um 12:14 Uhr

Ist schon seit über zwei Stunden geschehen – eben so die Anzeige der Uhrzeit. Oder ist dir das hellblau nicht grell genug? ;)

olli (twitter ) 23. Juli 2008 um 12:41 Uhr

warum habe ich ein bug bei den pfaden der zoom-images? hast du das HTML.js auch noch händisch bearbeitet??

mark 23. Juli 2008 um 12:53 Uhr

Nettes Plugin.

wegen der Kommentare: Ganz schön blöd, dass CSS-Dateien erst bei Strg+F5 neugeladen werden.

Sascha (twitter ) 23. Juli 2008 um 13:02 Uhr

@ Mark: Opera nutzen, dann tritt das Problem nicht auf ;)

mark 23. Juli 2008 um 13:09 Uhr

@ Sascha: Aber ist doch blöd, wenn ich allen Besuchern meiner Seite sagen muss, sie sollen bitte Opera nutzen oder explizit die Seite neu laden, nur damit ein paar CSS-Änderungen angezeigt werden.

Sascha (twitter ) 23. Juli 2008 um 13:56 Uhr

Ich denke Patrick meint folgenden Code:

meta http-equiv=”pragma” content=”no-cache”

Die Zeichen fürs öffnen und schließen des Meta-Tags müssen natürlich noch gesetzt werden.

Bernd (twitter ) 23. Juli 2008 um 13:57 Uhr

Ob die CSS nun sofort geladen wird oder erst irgendwann, ist doch wurscht. Der Inhalt wird ja trotzdem korrekt dargestellt.

Bei mir wurde übrigens ohne neu laden Carstens Kommentar richtig in dem Türkis angezeigt. Ich hab einfach die Seite aufgerufen und alles war gut.

mark 23. Juli 2008 um 14:00 Uhr

Wäre ne Lösung :)
Am besten wäre es aber tzrotzdem Softwareseitig, wenn einfach überprüft würde, ob die CSS-Datei auf dem Server neueren Datums ist.

Bernd (twitter ) 23. Juli 2008 um 14:11 Uhr

Keine Ahnung ob der Firefox das kann bzw. ob man das vielleicht sogar in der about:config festlegen kann, aber im Meta den Cache auszuschalten halte ich grundsätzlich für verkehrt. Denn dann werden ja auch ständig die ganzen Bilder neu geladen und das muss dann doch nicht sein, macht nur die Seite unnötig langsam.

Außerdem müsste es meta http-equiv=”cache-control” content=”no-cache” heißen, laut http://www.swishzone.de/client.....-6294.html
Mit Pragma beeinflusst man wohl nur den Proxy.

Yanni 23. Juli 2008 um 14:20 Uhr

Nettes Plugin, hat Jemand das WP-PLugin erfolgreich getestet? Die händische Version funzt auf meinem lokalen WP 2.6 nicht…

caschy 23. Juli 2008 um 14:22 Uhr

Muss händisch gehen. Haste es so eingebunden wie ich beschrieb?? Was geht nicht

Yanni 23. Juli 2008 um 14:33 Uhr

Genau so wie beschrieben, die zwei Ordner (images-global und js-global) in das Theme (./wp-content/themes/default-de)kopiert und den Text/Code in die header.php eingefügt.

caschy 23. Juli 2008 um 14:34 Uhr

Schau mal, ob die Pfade in der HTML.js stimmen

Yanni 23. Juli 2008 um 14:44 Uhr

???
Welche HTML.js?

olli (twitter ) 23. Juli 2008 um 15:53 Uhr

Ich hatte selbst bei Korrektur des Pfades Probleme mit der Darstellung bzw. der nicht erfolgreichen Darstellung, habe es wieder gekickt, leider…



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