SimpleViewer in NOF einbauen (und so sieht es dann aus).

Ich beschreibe hier Version 2.0.3 im Juni 2010.

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

http://www.airtightinteractive.com/simpleviewer/

Ihr erhaltet eine Datei “simpleviewer.zip”.

Diese ZIP-Datei bitte in irgendeinen Ordner extrahieren (entpacken). Nun erhaltet Ihr einen Ordner:

simpleviewer_203

Wechselt in den Ordner “web”. In diesem Ordner werdet Ihr 2 weitere Ordner finden:

1) images
2) thumbs

In jedem dieser Ordner sind einige Beispiel-Bilder drin, die Ihr löschen könnt.

Nun kopiert Ihr zunächst alle großen Fotos für Eure eigene Galerie in den Ordner:

images

Jetzt müsst Ihr die kleinen Fotos, die Piktogramme (Thumbs) mit einem Foto-Programm, in der von Euch erwünschten Größe, erstellen und kopiert diese dann in den Ordner:

thumbs



Nun könnt Ihr die Datei:

gallery.xml

noch anpassen und die Datei-Namen Eurer Fotos und Thumbs (also z.B. “foto1.jpg”) aus dem Ordner images und thumbs, anstelle der dort eingetragenen Datei-Namen, zwischen dem Befehl <image> einsetzen.

Ebenfalls könnt Ihr die anzuzeigende Beschriftung, zwischen dem Befehlt <caption>, an Eure Bedürfnisse anpassen.

Bitte öffnet diese Datei z.B. mit Eurem Windows-Editor oder Word-Pad (siehe scrollbares Bild unten).

Wie Ihr im Code oben schon erkennen könnt, habe ich außerdem, für meine Seite hier, noch ein einige andere Änderungen vorgenommen, wie z.B. die Text-Farbe “textColor” oder die Rahmen-Farbe “frameColor” oder auch die Breite des Rahmens, um die großen Fotos herum, “frameWidth”.
Außerdem habe ich den Titel auf “Unsere Katze Alina” umgeschrieben. Ich habe das hier fett markiert. Wollt Ihr HTML Formatierungen anwenden, dann muss der Text von dem Befehl <![CDATA[ Der Text ]]> eingekleidet werden, wie Ihr es bei meinem ersten Foto erkennen könnt.


Falls Ihr eine andere Hintergrund-Farbe, als die voreingestellte Farbe “Schwarz”, haben wollt, könnt Ihr das in der mitgelieferten index.html vornehmen.

Dazu öffnet Ihr diese Datei wieder mit Eurem Window-Editor und ändert es da. Ich habe es hier auf meine Farbe “E4E4E4” eingestellt, wie im Code unten zu erkennen.

Wenn Ihr wollt, könnt Ihr natürlich diese index.html auch nach belieben umbenennnen. Ich habe sie z.B. AlinaSimpleViewer.html genannt.


Jetzt müsst Ihr noch folgendes machen:

Ich habe einen Ordner “simpleviewer” erstellt und dort dann den Inhalt meines Ordners “web” hinein kopiert. Also die Ordner (mit meinen Fotos und Piktogrammen):

images (Ordner mit Euren großen Fotos)
thumbs (Ordner mit Euren kleinen Fotos)

sowie die Dateien:

gallery.xml (die Konfigurationsdatei)
index.html (oder wie Ihr diese Datei auch umbenannt haben solltet)
simpleviewer.swf (der Player)


Kopiert mittels FTP-Programm diesen gesamten Ordner “simpleviewer”, mit Eurer bereits fertig erstellten Galerie, auf Euren Server.

Nun zieht Ihr in Eurem NOF, auf der Seite wo diese Galerie erscheinen soll, ein

Inline Frame

auf und verlinkt zu der index.html (oder wie diese nun auch immer heißt), die Ihr im Ordner “simpleviewer” (oder Eurem eigenen Ordner) ja gerade auf den Server kopiert hattet.

Natürlich könntet Ihr auch einen ganz “normalen”, externen Link zu dieser Seite setzen, um die Galerie zu starten (ohne “Inline Frame”).



Viel Erfolg!

zurück