anica
IT-Beratung, Projektleitung, Entwicklung
CH-6000 Luzern
| Mit anica FotoShow können Sie Ihre eigene Diashow einfach in Ihre Website integrieren. Es sind keine Voraussetzungen an dieses Programm gebunden, es kann in jede Webseite integriert werden. Mit anica FotoShow können Sie zu jedem Bild einen Text definieren und das Aussehen und die Funktionsweise nach Ihren Anforderungen beeinflussen. | Sprache
| JavaScript
| Platform
| offen
| | Copyright | anica | | Version | 1.1 | Seit
| 03.03.09 | | Lizenz | Postcard |
|
Lösunganica stellt die Programmroutine zur Verfügung, die Sie einfach in Ihre HTML-Seite integrieren können. Über Textdateien können Sie die Einstellungen vornehmen und die Texte selber bestimmen. Für die Reibungslose Darstellung sorgt eine Vorladefunktion, welche die Bilder vor der Präsentation in den Cache lädt. Die Programmiersprache JavaScript wird im Browser auf dem Client ausgeführt, sodass keine Anforderungen an den WebServer bestehen. Variablenerklärung settings.ini
| tableWidth | Breite der Tabelle in Pixel oder Prozent, in dem das Bild zentriert dargestellt wird. | errorTextColor
| Textfarbe für Systemnachrichte,
gültige Hexwerte (Bsp. #00ff00) oder Farbcode (Red, Green, ....) | imgDescriptionPosition
| Position der Bildbeschreibung
gültige Werte: top = oberhalb des Bildes, bottom = unterhalb des Bildes | showImgData
| Anzahl Bilder, sowie Pfad und Bildnamen des aktuellen Bildes einblenden
gültige Werte: true, false | scrollToPosition
| Billdaufliste auf gewünschte Position scrollen,
Werte in Pixel, 999 = nicht scrollen | divID
| Identifikation des Div-Bereiches.
Muss mit der id im HTML-Code übereinstimmen (<div id=???>) Default ist foto | showLeaveButtonÂ
| Zeige den Verlassen-Link. FotoShow wird beendet und eine definerte Webeite aufgerufen. | goToByLeave
| Webseite, die aufgerufen werden soll beim Verlassen-Link.
Absoluter oder relativer Pfad | navigation | Darstellungsart der Navigationsleiste, die Texte werden in der Datei texte.txt definiert.
gültige Werte: text, button | anzPreload
| Anzahl der bilder die in den Cache geladen werden bevor die Präsentation startet. Währedn der Präsentation werden laufend die nächsten Anzahl Bilder vorgeladen.
| Variablenerklärung texte.txt | str1 | Text für den Start der FotoShow. In einem bestimmten Intervall werden die definierten Bilder und Texte gezeigt.
HTML-Werte sind erlaubt (Bsp: <img src='icons/start.png' />
| stp1
| Text für das Anhalten der FotoShow.
HTML-Werte sind erlaubt (Bsp: <img src='icons/start.png' /> | fwd1
| Text für das manuelle Aufrufen des des nächsten Bildes.
HTML-Werte sind erlaubt (Bsp: <img src='icons/next.png' /> | bwd1
| Text für das manuelle Aufrufen des des vorhergenden Bildes.
HTML-Werte sind erlaubt (Bsp: <img src='icons/back.png' /> | | lve1 | Text für das Verlassen der FotoShow. Eine definerte Webseite wird geladen:
HTML-Werte sind erlaubt (Bsp: <img src='icons/exit.png' /> | beginAgain
| Nachricht, dass erstes Bild wieder geladen wurde. Diese Nachricht wird nur gezeigt, wenn vom letzten Bild auf das Erste gewechselt wird.
| | lastPicture | Nachricht, dass letztes Bild erreicht wurde. FotoShow hält hier an und beginnt nicht automatisch wieder von vorne.
|
VoraussetzungVoraussetzungen
Registierung
| Hostname Ihre Webseite bei anica registieren lassen
Für den lokalen Gebrauch (localhost oder Filesystem) ist keine Registrierung notwendig.                                                | Voraussetzungen für Joomla-Nutzer| Joomla 1.5.x | Das OpenSource CMS System
> Hier downloaden | includePHP
| Plugin includePHP muss installiert und aktiviert sein um Javascript Code in einen Artikel zu integrieren.
| InstallationVorgehens-Schritte
Bildernamen auflisten, Bilder müssen mit einem Komma un einem Leerzeichen getrennt sein (Bsp: "Foto1.jpg; Foto2.jpg; Foto3.jpg")
| Bildertexte in der gleichen Reihenfolge auflisten (Bsp: "Text zu Bild 1; ; Text zu Bild 3")
Das Beispiel zeigt, das es für Bild 2 keinen Text hat. | Folgenden Javascipt-Code in ihre HTML-Seite im <head-Bereich einfügen: <script type="text/javascript">
<!--
// Variables
 var delay = 5000;                                        // Set DelayTime between pictures
 var imgpath = "Pictures/MyAlbum/";               // Slash at the end !!!
 var images = "xxx".split("; ");                       // Replace xxx with your imagelist. Ex. Foto1.jpg; Foto2.jpg; Foto3.jpg
 var descriptions = "zzz".split("; ");                 // Replace zzz with your descriptionslist. Ex. Text zu Bild 1; ; Text zu Bild 3
//--></script>
 |
blau = Variablen, auf eigene Bedürfnisse anpassen | Div-Bereich für die Präsentation definieren. Folgenden Code in Ihren <body>-Bereich einfügen
<div id="foto" style="left: 0px; width: 400px; top: 100px; height: 300px"></div>
 |
blau = Variablen, auf eigene Bedürfnisse anpassen
| Programm in den <body>-Bereich nach dem Div-Bereich einbinden <script type="text/javascript" src="http://www.anica.ch/scripts/moduls/FotoShow/FotoShow.js"></script> | | Diese Dateien auf Ihren Webserver laden. Ordner FotoShow muss im gleichen Ordner wie Ihre HTML-Datei sein: - root
   - FotoShow
          - texte.txt
          - settings.ini
   - myFotoShow.html | |  | Testen
| | Bei Bedarf, die Einstellungen und Texte anpassen. | |  | | Nur für Joomla-Nutzer: Plugin includePHP installieren und aktivieren. | Anstelle der Javascripts folgenden HTML-Code in Ihren Artikel platzieren:
 <div id="foto" style="left: 0px; width: 400px; top: 100px; height: 300px"></div>
Â
|
blau = Variablen, auf eigene Bedürfnisse anpassen
 | Alles anderen wie gehabt, oben beschrieben.
| Testen
| Â Â Versionsinfo
| V 1.0 | Erste freigegebene stabile Version
| |  V 1.1 | Vorladefunktion der Bilder für die reibunglose Darstellung der Bilder
| Â |
Created by www.anica.ch.
Powered by Joomla!.
anica FotoShow
