AutoViewer

... zurück zur Galerie

Bitte ladet Euch zunächst die Skript des “AutoViewers” hier herunter:

http://www.simpleviewer.net/autoviewer/

Nach dem entpacken der ZIP-Datei erhaltet Ihr einen Ordner:

autoviewer

... öffnet diesen Ordner und startet mal zum Testen die Datei “index.html”.


Im Ordner:

images

befinden sich lediglich 2 Fotos als Beispiel dieser Anwendung. Bitte kopiert alle Eure Fotos, die Ihr verwenden wollt, in diesen Ordner “images”.

Weiterhin findet Ihr dort noch folgende Dateien, die für die Ausführung dieser Anwendung benötigt werden:

autoviewer.swf (Flash-Datei vom “AutoViewer”)
swfobject.js (Javascript-Datei vom “AutoViewer”)

sowie die Konfigurations-Datei:

gallery.xml (Konfigurations-Datei mit Angaben Eurer Fotos)


Bitte kopiert den Code unten in den “Head-Bereich” Eurer Seite.

> Auf das Layout klicken > Fenster “Layout-Eigenschaften” > Button “HTML” > “Zwischen Head Tags”

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

... nun kopiert Ihr diese Ordner und Dateien in das Verzeichnis, in dem sich die Seite befindet auf der Ihr das anzeigen wollt. Also entweder auf der Startseite in das Stammverzeichnis, wo sich Eure “index.html” befindet oder (wenn Ihr das auf einer Unterseite einbaut) in den Ordner “html”. Dies macht Ihr im Ordner Eurer “Lokalen Publizierung” auf dem PC und natürlich auch mittels FTP-Programm auf Eurem Server.


Die Datei

gallery.xml


müsst Ihr nun noch anpassen. Hier müsst Ihr Eure Fotos eintragen, sowie alle Beschriftungen. Dabei ist es möglich auch HTML-Code einzubringen, um z.B. Links zu setzen oder Schrift in anderer Formatierung darzustellen. HTML Code muss von dem Befehl <![CDATA[Der Text]]> eingekleidet werden.

In dieser Zeile (oben im Skript) könnt folgende Anpassungen vornehmen:

frameColor = Rahmen-Farbe der Fotos (hier 999999)
frameWidth = Rahmen-Breite um die Fotos (hier 5px)
imagePadding = Zwischenraum zwischen den Fotos (hier 20px)
displayTime = Zeit, die das einzelne Bild bei der Slide-Show angezeigt wird (in Sekunden, hier 6)
enableRightClickOpen = erlaubt mittels Rechtsklick auf das aktive Foto, dieses in einem neuen Fenster zu öffnen (“false” für nein)

<gallery frameColor="0x999999" frameWidth="5" imagePadding="20" displayTime="6" enableRightClickOpen="true">

Als Beispiel hier der Inhalt meiner XML-Datei:

Jetzt müsst Ihr Euch noch ein Textfeld an der Stelle aufziehen, wo die Galerie angezeigt werden soll:

> Textfeld aufziehen > Fenster “Text-Eigenschaften” > mittlerer Button “Textfeld” > Button “HTML”

... und fügt den Code (unten) in den “HTML Code-Editor” des Textfeldes ein:

<div id="flashcontent">AutoViewer requires JavaScript and the Flash Player. <a href="http://www.macromedia.com/go/getflashplayer/">Get Flash here.</a> </div>
<script type="text/javascript">
var fo = new SWFObject("autoviewer.swf", "autoviewer", "890px", "640px", "8", "#E4E4E4");

//Optional Configuration
fo.addVariable("langOpenImage", "Bild in neuem Fenster öffnen");
fo.addVariable("langAbout", "Über");
//fo.addVariable("xmlURL", "gallery.xml");

fo.write("flashcontent");

</script>

... alle diese Codes findet Ihr in der vom “AutoViewer” bereit gestellten “index.html”, die Ihr mit Eurem “Windows-Editor” öffnen könnt.

Dabei werdet Ihr feststellen, dass ich hier, zur Anpassung an meine Seite, einige Änderungen vorgenommen habe, die ich oben im Code fett markiert habe, wie z.B. die Größe der Galerie in Pixeln, anstatt in Prozent (da ich diese passend in meiner grauen Fläche des Layouts anzeigen wollte) oder auch die Hintergrundfarbe auf meine graue Layout-Farbe.

Weiterhin habe ich zwei Zeilen zur Anzeige der Flash-Optionen (rechte Maustaste auf aktives Bild) in deutsch umgeschrieben und durch löschen der beiden // am Anfang dieser Zeilen aktiviert.


Bitte guckt Euch auch die möglichen Optionen dieser Galerie hier an:

http://www.simpleviewer.net/autoviewer/support/options.html

nach oben

Viel Erfolg!