Fancy Zoom in NOF einbauen - Duckt Euch auch eine eigene Komponente an SwissKnife for NOF

Zunächst bitte auf den Link (unten) klicken um die Skripte von meinem Server downzuloaden, die ich für NOF modifizieren musste. Nach dem entpacken (extrahieren) dieser ZIP Datei erhaltet Ihr einen Ordner:

FancyZoom

Hier könnt Ihr Euch meine modifizierten Skripte downloaden. Downloads seit dem 12.08.2008: 1229

Hier die "Original-Seite" dazu, nach der ich gearbeitet habe. Natürlich könnt Ihr Euch die Skripte auch dort runter laden, allerdings müsstet Ihr dann den Pfad zu dem Ordner in der "FancyZoom.js" entsprechend selber ändern.

http://www.cabel.name/2008/02/fancyzoom-10.html


Hier der Fancy Zoom Effekt als Beispiel. Bitte klickt auf ein Foto. Oder hier im
Mehrfach-Layout von NOF 11.

Jetzt macht Ihr folgendes:

Kopiert bitte diesen Ordner FancyZoom (den ich in meiner .zip Datei angelegt habe), den Ihr gerade herunter geladen habt, in den Ordner Eurer

Lokalen Publizierung (um das auch lokal sehen zu können)

und ebenfalls auf Euren Server in die Root
(Stammverzeichnis, dort wo sich auch Eure INDEX.HTML befindet).

Nun müsst Ihr folgende Codes in Eure HTML schreiben:

1.)
Klickt in den “Layout-Bereich” und dann im Fenster “Layout-Eigenschaften” auf den Button “HTML”.
Dort fügt Ihr den 1. Code (unten) ein und zwar

“Zwischen Head Tags” (bei NOF 11 heißt das jetzt “headInner”),

dies ist der 2. Button von links oben.

Achtet bitte auf “../” (relative Pfadangabe zur Root).

Wenn Ihr das in der Startseite (Home) einbauen wollt,
müsstet Ihr eben “../” weglassen oder “./” hinschreiben.

2.)
Weiterhin müsst Ihr den 2. Code (unten) einfügen, und zwar beim Reiter

“Im Haupttext-Tag”

(bei NOF 11 heißt das jetzt “bodyAttrs”), dies ist der 3. Button von links oben.

Ihr müsst entweder den “Layout-Namen” auf FancyZoom ändern, da ich im 2. Skript auf diese “Body ID” verweise oder die “ID” eben ganz weglassen.

1. Code “Zwischen Head-Tags” (NOF 11 “headInner”) einfügen.

<script src="../FancyZoom/FancyZoom.js" type="text/javascript"></script>
<script src="../FancyZoom/FancyZoomHTML.js" type="text/javascript"></script>

2. Code “Im Haupttext-Tag” (NOF 11 “bodyAttrs”) einfügen mit “body id”

id="FancyZoom" onload="setupZoom()"

oder ...

2. Code “Im Haupttext-Tag”  (NOF 11 “bodyAttrs”) einfügen ohne “body id”

onload="setupZoom()"

Nachdem Ihr die Codes (oben) in Eure Layout-HTML eingetragen habt, müsst Ihr nun für jedes kleine Foto, das hier auf dieser Seite zu sehen ist, noch folgendes machen:

1) Titel des kleinen Fotos (wenn Ihr das wollt) einbauen:
(hier für das erste Foto: “unsere Katze Alina am 07.09.2000”)

> Auf das kleine Bild klicken und in dem Fenster “Bild-Eigenschaften” auf den Button “HTML” klicken

> “In dem Link” (“innen” bei NOF 11) den Code (unten) einfügen
(natürlich mit Eurem Text)

> Auf “OK” klicken

rel="FancyZoom" title="unsere Katze Alina am 07.09.2000"

2) Die großen Fotos dieser Bilder auf Eurer Seite, die Ihr vorher natürlich entsprechend erstellt haben müsst, verlinken. Hierzu bei “Linktyp” mittels Dropdown-Menü “Datei-Link” wählen und alle großen Fotos, die benötigt werden suchen und mittels Button “Speichern” einlesen.

Nun könnt Ihr (wenn Ihr das wollt) den “Gruppennamen” eintragen, der dann in Fancy Zoom bei jedem Foto erscheint (hier: “Unsere Katze Alina”)

> Auf den Bild-Namen klicken
> auf den Button “HTML” (unten in diesem Fenster) klicken ...

... nun öffnet sich die “Objekt-HTML” (Bild unten). Hier gebt Ihr den unten stehenden Code “In dem Link” für den Gruppennamen ein (natürlich mit Eurem Text). Anschließend auf “OK” klicken.

rel="FancyZoom[alina]" title="Unsere Katze Alina"

... nun kommt Ihr zurück in das “Link-Fenster”.

Bevor Ihr auf den Button “Link” klickt, vergewissert Euch, dass das richtige große Foto, das zu dem kleinen Foto gehört, auch markiert ist.

> Auf “Link”” klicken.

Die gleiche Prozedur macht Ihr nun mit den anderen kleinen Fotos auch.

Fertig.


Im Prinzip funktionieren alle Lightbox - Varianten sehr ähnlich. Hier mal ein Beispiel einer

Flash-Fotogalerie oder der Variante “Fancy Box”.


Viel Erfolg!

zurück