Photo Viewer Galerie (Tutorial zum Einbau in NOF)


Hier könnt Ihr Euch die kostenlosen, notwendigen Dateien downloaden:

http://www.search-this.com/tools/

... und hier geht es zu meiner Beispiel-Ansicht dieser Galerie

Nach dem Download erhaltet Ihr unter anderem folgende 3 Dateien, die Ihr in das Verzeichnis kopiert, in dem Ihr diese Galerie einbaut. Dies ist bei der Startseite (index.html) das “Stammverzeichnis” Eures Projektes, also dort wo sich auch Eure index.html befindet und bei allen anderen Seiten (normalerweise) der Ordner html.

1.) photos.swf (die eigentliche Flash-Player-Datei)
2.) sample.xml (die Konfigurations-Datei mit der Angabe Eurer Fotos. Hier umbenannt in “photos.xml”)
3.) swfobject.js (die zur Anwendung gehörende Javascript -Datei)

Diese 3 Dateien kopiert Ihr in das Verzeichnis wie oben beschrieben der “lokalen Publizierung”, um es auch lokal zu sehen und dann mittels FTP-Programm auf Euren Server in das gleiche Verzeichnis.


Nun klickt Ihr auf das Layout der Seite auf der Ihr den Player einbauen wollt und dann

> Fenster “Layout-Eigenschaften” > Button “HTML” > und fügrt den Code unten “Zwischen Head Tags” ein

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

... jetzt zieht Ihr Euch an der Stelle, wo die Galerie auf der Seite angezeigt werden soll, ein Textfeld auf.

> Textfeld aufziehen (Cursor blinkt) > Fenster “Textfeld-Eigenschaften” > mittlere Button “Textfeld”
> Button “HTML” > Code unten in den HTML-Code Editor einfügen

<div id="flashcontent" style="text-align:center;">
Bitte den Flash Player von Adobe downloaden um den Photo Viewer zu sehen.
</div>
<script type="text/javascript">
var so = new SWFObject("photos.swf", "webPod", "600", "590", "8", "#ffffff");
so.addParam("quality", "best");
so.addParam("wmode", "transparent");
so.addParam("flashvars", "loadXmlFile=photos.xml");
so.write("flashcontent");
</script>

... nun habt Ihr noch die Datei:

sample.xml (die Konfigurations-Datei, die Ihr bearbeiten müsst)

erhalten. Diese habe ich umbenannt in:

photos.xml

weil mir diese Bezeichnung nicht gefiel. Das könnt Ihr auch bereits oben in dem Code sehen. Diese Datei müsst Ihr entsprechend bearbeiten und Eure Fotos und Bezeichnungen angeben


Ich habe nun für meine Piktogramme (thumbs) und meine großen Fotos (images) noch eigene Ordner in einem neuen Verzeichnis

viewer

erstellt, welches ich wieder in meinem Stammverzeichnis erstellt habe (auch wieder lokal und Server). Also in dem gerade erstellten Ordner “viewer” dann noch die Ordner

thumbs (für die kleinen Piktogramme)
images (für die großen Fotos)

erstellt, damit meine Fotos einen “ordentlichen” Platz haben.

Jetzt müsst Ihr alle Fotos mit Eurem Bild-Bearbeitungsprogramm genau auf eine vom Script vorgeschriebene Größe von 500 x 333 px bringen und in dem Ordner images speichern. Ebenso verfahrt Ihr mit den Piktogrammen, die eine Größe von 75 x 50 px haben müssen und kopiert diese entsprechend in den Ordner thumbs, damit das alles nachher in die vorbereiteten Plätze passt.

Nun müsst Ihr noch die relative Pfadangabe zu den Bildern beachten. Hier habe ich die Galerie auf meiner index.html (Startseite) eingebaut, daher nur ein Punkt (./). Wenn Ihr die Galerie auf einer Unterseite einbaut, die sich im Ordner HTML befindet, dann eben zwei Punkte (../)

Hier meine Datei “photos.xml”

... wollt Ihr zwei oder mehr Galerien auf einer Seite haben, dann müsst Ihr Euch lediglich eine neue .xml Datei erstellen und dem Skript eine andere ID geben. Meine zweite Galerie “Garten” sieht dann so aus.

<div id="garten" style="text-align:center;">
Bitte den Flash Player von Adobe downloaden um den Photo Viewer zu sehen.
</div>
<script type="text/javascript">
var so = new SWFObject("photos.swf", "webPod", "600", "590", "8", "#ffffff");
so.addParam("quality", "best");
so.addParam("wmode", "transparent");
so.addParam("flashvars", "loadXmlFile=garten.xml");
so.write("garten");
</script>

nach oben

zur Galerie