Balauue.org / rise and shine!

Kategorien   

kategorie 20 kategorie 22 kategorie 26 kategorie 16 kategorie 24 kategorie 14 kategorie 21 kategorie 27 kategorie 801 kategorie 783 kategorie 13 kategorie 28 kategorie 23 kategorie 17 kategorie 15 kategorie 18 kategorie 19 kategorie 25


TAGS


SUCHE


LINKS

i-devel


Bilder dynamisch zoomen per JavaScript
26.06.08 | Webwork

head

Ihr kennt Lightbox …
Ihr kennt Scriptaculous …
Ihr kennt jQuery …
Ihr kennt MooTools …

Stop! Aber es gibt einen, den kennt ihr noch nicht …

Hier kommt FancyZoom!

Viele Leute haben mich gefragt, wie ich die Bilder hier im Blog zoome, ich konnte bisher nie eine zufrieden stellende Antwort geben, da ich den Link verlegt hatte und nicht mehr wiedergefunden habe, bis heute.

Ich verwende FanceZoom vom Panic (Coda, Transmit) Co-Founder Cabel M. Sasser in einer leicht modifizierten Variante.

Normalerweise würde jedes Bild gezoomt werden, solange es nicht “rel=’nozoom’” enthält.

Da ich aber schon lange diverse Lightboxen verwendet habe und somit jedes zoombare Bild ein rel=”lightbox” an der Seite hat, habe ich folgende Funktion prepZooms überarbetet:

function prepZooms() {
if (! document.getElementsByTagName) {
return;
}
var links = document.getElementsByTagName("a");
for (i = 0; i < links.length; i++) {
if (links[i].getAttribute("href") && (links[i].getAttribute("rel"))) {
if (links[i].getAttribute("rel").indexOf("lightbox") == 0) {
links[i].onclick = function (event) { return zoomClick(this, event); };
links[i].onmouseover = function () { zoomPreload(this); };

}
}
}
}

Hier nocheinmal eine Demo des Skripts:

head
Tolles Skript, relativ klein, aber ziemlich schnieke!

Tags: , , , ,

4 Kommentare »

  1. 1
    icon

    Lachkater sagte am 26.06.08 um 13:03 ,

    Gefällt auch wenn es durchaus etwas schneller von statten gehen könnte :)

    Zitieren
  2. 2
    icon

    jonas sagte am 26.06.08 um 13:55 ,

    da muss ich dir recht geben, lachkater.

    Zitieren
  3. 3
    icon

    Hoizge sagte am 26.06.08 um 14:04 ,

    Das is ziemlich cool, werd ich die Tage auch mal bei mir einbaun, wenn ichs hinbekomm :)

    Zitieren
  4. 4
    icon

    max sagte am 27.06.08 um 13:42 ,

    gibt es sogar als wordpress-plugin: http://granades.com/wp-fancyzoom-wordpress-plugin/ (benutzt fancyzoom 1.1, die aktuellste version).

    Zitieren



Smilies einblenden  Kommentare RSS   TrackBack URI

BALAUUE ♥ WORDPRESS, AMY&PINK & WEGGEROCKT.