TiltViewer Tutorial

Tutorials von Thomas Frei-Herrmann

TiltViewer von SimpleViewer

Diese Variante vom “SimpleViewer” könnt Ihr Euch hier downloaden:


http://simpleviewer.net/tiltviewer/

Nach dem Download findet Ihr folgende Ordner und Dateien:

imgs (Ordner für Eure Fotos)
gallery.xml (Konfigurations-Datei in der Ihr Eure Fotos und Texte eingebt, bitte mit Windows-Editor öffnen und Eure Fotos eintragen)
swfobject.js (JavaScript Datei zur Ausführung der Anwendung)
TiltViewer.swf (Flash-Player)

Bitte kopiert den Ordner imgs, sowie die 3 Dateien in den Ordner Eurer lokalen Publizierung, damit Ihr das zunächst testen könnt. Alles gehört in den Ordner, indem sich auch die Seite befindet, auf der Ihr das einbaut.

Später müsst Ihr den Ordner imgs und auch die 3 Dateien mittels FTP-Programm auch auf Euren Server kopieren.

> wenn auf der “Home” (Startseite) > dann in den Ordner “Lokale Publizierung” (auf dem Server in das “Stammverzeichnis”)
> wenn auf einer “Unterseite”, die sich im Ordner “html” befindet > dann in den Ordner “html” (auf dem Server auch in den Ordner “html”)


Bitte öffnet die Datei “index.html”, die sich mit im Download als Beispielseite befindet, mit Eurem Windows “WordPad” und kopiert dieses Script aus dem <head> Bereich in den den <head> Bereich Eurer Seite, auf der Ihr das einbauen wollt:

> auf das Layout klicken > im Fenster “Layout-Eigenschaften” > Button “HTML” > Script “Zwischen Head Tags” einfügen.

... hier könntet Ihr noch Änderungen am “Style” vornehmen, wie z.B. die Hintergrundfarbe ändern.

<script type="text/javascript" src="swfobject.js"></script>
<style type="text/css">
/* hide from ie on mac \*/
html {
height: 100%;
overflow: hidden;
}

#flashcontent {
height: 100%;
}
/* end hide */

body {
height: 100%;
margin: 0;
padding: 0;
background-color: #000000;
color:#ffffff;
font-family:sans-serif;
font-size:40;
}

a {
color:#cccccc;
}
</style>

Nun zieht Ihr Euch ein Textfeld auf und kopiert das Script unten, aus dem <body> Bereich der Beispielseite, in die HTML des Textfeldes:

> Textfeld aufziehen > im Fenster “Textfeld-Eigenschaften” oben auf den mittleren Button “Textfeld” klicken
> und anschließend auf den Button “HTML” und das Skript unten einfügen.

Meine Änderungen in blau.

Beim Einbau in ein Textfeld müsst Ihr die Größe der Galerie in Pixeln (hier 890 x 450 Pixel) angeben, in einem Layout oder einer Tabelle könntet Ihr das auch in Prozent “100%”,”100%” angeben, relativ zu der Größe des Layouts bzw. der Tabelle.

Gebt das größte Bild Eurer Galerie in Pixeln an (hier 640), damit alle Bilder ordentlich dargestellt werden.

<div id="flashcontent" style="color: rgb(255,255,0)">TiltViewer benötigt JavaScript und den neuesten Flash Player.
<a href="http://www.macromedia.com/go/getflashplayer/" target="_blank">Get Flash here.</a></div>
<script type="text/javascript">

// EDIT Thomas - von 100% auf Pixel-Größe gesetzt
var fo = new SWFObject("TiltViewer.swf", "viewer", "890px", "450px", "9.0.28", "#000000");

// TILTVIEWER CONFIGURATION OPTIONS
// To use an option, uncomment it by removing the "//" at the start of the line
// For a description of config options, go to:
// <http://www.airtightinteractive.com/projects/tiltviewer/config_options.html>

//FLICKR GALLERY OPTIONS
// To use images from Flickr, uncomment this block
//fo.addVariable("useFlickr", "true");
//fo.addVariable("user_id", "48508968@N00");
//fo.addVariable("tags", "jump,smile");
//fo.addVariable("tag_mode", "all");
//fo.addVariable("showTakenByText", "true");

// XML GALLERY OPTIONS
// To use local images defined in an XML document, use this block
fo.addVariable("useFlickr", "false");
fo.addVariable("xmlURL", "gallery.xml");
// Hier das größte Bild der Galerie in Pixeln angeben
fo.addVariable("maxJPGSize","640");

//GENERAL OPTIONS
fo.addVariable("useReloadButton", "false");
fo.addVariable("columns", "3");
fo.addVariable("rows", "3");
//fo.addVariable("showFlipButton", "true");
//fo.addVariable("showLinkButton", "true");
//fo.addVariable("linkLabel", "View image info");
//fo.addVariable("frameColor", "0xFF0000");
//fo.addVariable("backColor", "0xDDDDDD");
// EDIT Thomas - andere Hintergrundfarbe
fo.addVariable("bkgndInnerColor", "0x3B5998");
//fo.addVariable("bkgndOuterColor", "0x0000FF");
// EDIT Thomas - Text "Go Fullscreen" auf Text "Vollbildmodus" geändert
fo.addVariable("langGoFull", "Vollbildmodus");
// EDIT Thomas - Text "Exit Fullscreen" auf Text "Vollbildmodus verlassen" geändert
fo.addVariable("langExitFull", "Vollbildmodus verlassen");
//fo.addVariable("langAbout", "About");

// END TILTVIEWER CONFIGURATION OPTIONS

fo.addParam("allowFullScreen","true");
fo.write("flashcontent");
</script>

Unten noch eine Ansicht meiner XML-Datei (gallery.xml). Bei Verwendung von HTML-Tags muss der Text mit CDATA umschlossen werden.

nach oben

Viel Erfolg!

diese Seite weiter empfehlen



Counter Statistik