NOF-Forum  |  Referenzen  |  Kontakt  |  Impressum  |  Sitemap

NetObjects Fusion - Tutorials
NOF Tutorials und Hilfe von Thomas Frei-Herrmann

Magic Zoom in NOF einbauen - (hier erstellt mit NOF 11).

Zunächst bitte auf den Link (unten) klicken um die Skripte downzuloaden.

Download Magic Zoom


... unten mal einige Beispiele.

großes Foto ca. 48 KB

großes Foto ca. 58 KB

großes Foto ca. 118 KB

großes Foto ca. 5 MB

Loading zoom ...

... nachdem Ihr Euch die Skripte von “Magic Zoom” herunter geladen habt, entpackt bitte diese .zip Datei in irgendeinen Ordner.

Ich habe dann folgendes gemacht:

1) Ich habe mir einen Ordner:

magiczoom

in meinem lokalen Stammverzeichnis meines Projektes, sowie in dem Stammverzeichnis meines Servers (also dort wo sich auch die index.html befindet) mittels FTP-Programm
erstellt, damit die Skripte einen “ordentlichen” Platz haben.

Dort benötigt Ihr dann folgende Dateien aus dem Download:

1. magiczoom.css
2. magiczoom.js

Bemerkung: Bei mir heißt diese Datei mz-packed.js (anstatt magiczoom.js). Dies ist die Datei, die ich mit meiner käuflich erworbenen Lizenz erhalten habe. Einen Unterschied im Einbau gibt es nicht.

... die Ihr dann in diesen neuen Ordner “magiczoom” kopiert.

... wenn Ihr besonders große Bilder habt (wie bei meinem Leoparden), könnt Ihr auch noch dieses
“Loader-Bildchen” mit in diesen Ordner kopieren

3. ajax-loader.gif

ajax-loader

2) Ihr erstellt Euch von den Fotos jeweils eine kleine und eine große Version mit Eurem Fotobearbeitungs-Programm. Die kleinen Fotos fügt Ihr nun auf der Seite ein.


3) Ihr fügt den unten stehenden Code auf Eurer Seite ein. Dazu klickt Ihr einmal auf das Layout und anschließend im Fenster “Layout-Eigenschaften” auf den Button “HTML”. Wollt Ihr diesen Code gleich für alle Seiten in Euer Projekt einbinden, dann klickt Ihr natürlich auf den “Master-Rahmen-Bereich” und fügt ihn dort in die “HTML” ein.

Dieser Code gehört dann “Zwischen Head-Tags” (NOF 11 “headInner”).


Auf allen “Unterseiten”, die sich (normalerweise) im Ordner “HTML” befinden, sieht die
relative Pfadangabe zu dem von Euch erstelltem Ordner “magiczoom”, dann so aus:

<link rel="stylesheet" href="../magiczoom/magiczoom.css" type="text/css" />
<script src="../magiczoom/magiczoom.js" type="text/javascript"></script>

... solltet Ihr das auf der “Home” (Eurer Startseite) einbauen wollen, dann sieht die relative Pfadangabe zu diesem Ordner so aus (nur ein Punkt):

<link rel="stylesheet" href="./magiczoom/magiczoom.css" type="text/css" />
<script src="./magiczoom/magiczoom.js" type="text/javascript"></script>

4) Nun müsst Ihr noch die großen Fotos verlinken. Dazu macht Ihr folgendes:

> Klickt auf das kleine Foto und dann im Fenster “Bild-Eigenschaften” auf “Link”.

> Bei “Linktyp” (ganz oben) wählt Ihr “Datei-Link” aus und sucht das große Foto auf Eurer Festplatte und klickt dann auf den Button “Speichern”.

> anschließend klickt Ihr gleich in diesem Fenster (ganz unten links) auf den Button “HTML” und fügt dort den Code (unten) “Im Link” (NOF 11 “innen”) ein, also Euren Titel des Fotos und die “class”. Den Titel Eures Fotos müsst Ihr natürlich in dem Code abändern.

Ebenso könnt Ihr hier die Zoom-Breite oder Zoom-Höhe und die Position des Magic Zoom Fensters angeben.

title="unsere Katze Alina am 09.07.2000" class="MagicZoom" rel="zoom-width: 400px; zoom-height: 300px; zoom-position: top"

... nun könnt Ihr noch dieses “Loader-Bildchen” “nach dem Link” (NOF 11 “nachher”) mit in der HTML angeben.

<img class="MagicZoomLoading" src="../magiczoom/ajax-loader.gif" width="16" height="16" alt="Loading zoom ..."/>

... nun die Seite noch publizieren und fertig.


Viel Erfolg!

zurück

Tutorials von Thomas Frei-Herrmann

diese Seite weiter empfehlen


Counter Statistik