Effektvolle Diashows

Der exotische Tauchgang, der romantische Winterspaziergang, die Hochzeit des besten Freundes, die Taufe eines Kindes - es gibt im Leben immer wieder außergewöhnliche Momente, die mehr verdienen, als auf der externen Festplatte zu verschwinden. Wir zeigen Ihnen, wie Sie Ihre schönsten Bilder auf Ihrer Website zu einem bewegten Erlebnis für Ihre Besucher machen.

Bevor Sie sich an die eigentliche Arbeit machen, benötigen Sie vielleicht noch etwas Arbeitsvorbereitung. Für mehr Spaß und Geschwindigkeit beim Ausprobieren lohnt es sich, Kopien der ausgewählten Fotos anzulegen und auf etwa dasselbe Maß zu bringen, zum Beispielal le in derselben Breite. Das gibt später beim Abspielen weniger Unruhe. Auch die Ladezeiten werden kürzer, wenn Sie sich für ein kleineres Bildformat entscheiden. Für eine Diashow reichen 600 bis 800 Pixel Breite aus, zumaldie Qualität von JPG-Bildern dann auch etwas besser sein darf.

Haben Sie mehrere Bilderserien, die auf Veröffentlichung warten, teilen Sie diese übersichtlich in Ordner mit eindeutigen Albennamen auf. Die werden später von Generatoren automatisch übernommen. Sobald Sie Ihre Fotos geordnet und griffbereit haben, kann es losgehen.

Klassiker JAlbum

Ein immer wieder gerne genommenes Werkzeug ist das kostenlose Open-Source-Projekt JAlbum. Mit wenigen Klicks stellt es Ihnen effektvolle Bilderalben zusammen und verpasst Ihren Fotoserien mit so genannten Skins unterschiedliche Gesichter. Nicht alle sind allerdings diashowtauglich. Die beiden hier vorgestellten Layouts gehören nicht zur Ausstattung des Standardpakets. Sie finden sie auf der Website https://jalbum.net/skins. Ein Doppelklick auf die jeweilige Datei installiert die neue Vorlage automatisch und reiht sie umgehend in die Liste verfügbarer Skins ein. Lightbox2 ist eine dieser Vorlagen mit integrierter Diashowfunktion, die Sie mit Klick auf einen Button starten und beenden. Als Besonderheit verlassen Sie für die Bildpräsentation die Vorschauseite des gewählten Albums nicht, sie wird lediglich abgedunkelt, während im Vordergrund die Bilder mit voller Leuchtkraft zur Geltung kommen. Diese Fähigkeit verdankt das Layout der Anwendung von Ajax (siehe Kasten Die Effekte-Trickkiste). Die Umsetzung ist so einfach wie die der Standardlayouts. Nachdem Sie ein neues Album angelegt und die gewünschten Bilderordner per Drag and Drop hinzugefügt haben, wählen Sie als Skin Lightbox2 aus, und schicken Sie die Bilder mit dem Button Album erstellen durch. Sind Sie mit der Vorschau zufrieden, geht es zum Veröffentlichen via FTP gleich auf den Webserver.

Etwas kniffliger kann es werden, wenn Sie sich für den TiltViewer entscheiden. Zwar nicht als abzuspielende Diashow, aber auf Basis von Flash sehr effektvoll und interaktiv präsentiert er Ihre Bilderserien im wahrsten Sinne des Wortes bewegend. Die Steuerung von einem Bild zum nächsten erfolgt dabei wahlweise mit der Maus oder mit Hilfe der Leertaste mit Zoomfunktion und den Cursortasten für die Navigation in alle Himmelsrichtungen.

Minishowcase

Die schlichte Eleganz und der dunkle Hintergrund von Minishowcase bringt Ihre Bilder zum Leuchten. Dabei handelt es sich um ein bereits vorgefertigtes Webalbum. Es erkennt automatisch alle Bilddateien und Ordner, die Sie im Verzeichnis unter Galleries ablegen als Alben und nimmt einfach alle Bilder in die jeweilige Sammlung auf. Etwaige Nachzügler übertragen Sie einfach an den richtigen Platz auf dem Webserver, und sie sind dann auch schon in die Vorführung integriert. Selbstverständlich ist das nicht. Viele Diashow-Programme brauchen den Namen der Bilder in Konfigurationsdateien oder gar im Quelltext. DankServerfunktionalität (PHP-Skript) macht sich Minishowcase selbst schlau.

Voraussetzung ist natürlich, dass der Webserver mindestens PHP 4.2.x unterstützt. Die GD/GD2-Erweiterungen benötigt PHP, um die Vorschaubilder (Thumbnails) zu erzeugen. In der Konfiguration können Sie die Funktion auch ausschalten, so dass als einzigesMuss die geeignete PHP-Version bleibt, wovon Sie grundsätzlich ausgehen dürfen.

Den Überblick bewahren Sie am besten, wenn Sie das Album an dieselbe Stelle Ihrer lokalen Websitekopie speichern, wo es dann auch auf dem Server liegen soll. Löschen Sie das Beispielalbum in Galleries und fügen Sie darunter einen oder mehrere eigene Fotoordner ein.

Minishowcase bringt unter anderem eine deutsche Sprachdatei mit und ist flexibel konfigurierbar. Daher seien hier nur die wichtigsten Einstellungen erwähnt. Diese nehmen Sie in der Datei settings.php vor, die Sie im Verzeichnis config finden. In Zeile 60 geben Sie die Webadresse Ihrer Diashow an.

Die deutsche Sprachdatei integrieren Sie in Zeile 70, ersetzen Sie das Kürzel en, so dass die Zeile wie folgt aussieht.

Welche der unter themes verfügbaren Layoutvorlagen Sie einbinden, entscheiden Sie in der Zeile 103, voreingestellt ist hier

Den Namen Ihrer Diagalerie legen Sie in der Zeile 190 unter

fest. Beschränken sie sich dabei auf ein Wort, denn Leerzeichen sind hier nicht gestattet. In den Zeilen 308 und 313 ersetzen Sie die englischen Begriffe my und picture durch meine und Bilder. Andernfalls würde Ihre Diashowvorschau mit my [Albumname] pictures vorgestellt.

Die Zeile 349 entscheidet darüber, wie lange ein einzelnes Bild während des Abspielens der Diashow angezeigtwird. Voreingestellt ist hier "10", das strapaziert die Geduld des Zusehers womöglich. Fünf Sekunden reichen auch, probieren Sie es selbst aus.

Den individuellen Text der Startseite gestalten Sie mit HTML in der Datei _info.txt im Verzeichnis galleries. Damit ist Ihre Diashow bereit für die Übertragung auf den Webserver. Der letzte Schritt besteht darin, das Verzeichnis cache mit Schreibrechten zu versehen. Es dient dem Programm für die automatische Generierung der Thumbnails. Der Vorgang ist nicht zwingend. Haben Sie keine Gewalt über Schreibrechte auf dem Server, funktioniert trotzdem alles. Die Albumübersicht lädt dann nur länger.

Die Effekte-Trickkiste

Flash ist ein von Macromedia und später Adobe übernommenes Programm zur Gestaltung animierter Filme und bewegter Präsentationen. Mit Hilfe eines Plugins zeigen Internetbrowser sie an. Die Dateien mit der Endung swf sind im HTMLQuelltext eingebunden.

Silverlight Silverlight von Microsoft ist eine plattformübergreifende Plug-in-Technologie für multimediale browserbasierte Webanwendungen und damit ein direkter Konkurrent zu Flash. Es erlaubt die Entwicklung aufwändiger, interaktiver Funktionen, die überall ausgeführt werden können, beispielsweise in Browsern auf verschiedenen Geräten und Desktop-Betriebssystemen.

Ajax Ajax ist die Abkürzung für Asynchronous Javascript And XML. Ajax trug wesentlich zur Reichhaltigkeit interaktiver Dienste und Effekte des Web 2.0 bei. Damit können die Inhalte einer Webseite verändert werden, ohne die Seite neu zu laden. Ein Plug-in ist dafür nicht erforderlich.

DHTML Dynamic HTML ist schon etwas älter und hier der Vollständigkeit halber erwähnt. Es kombiniert HTML, CSS und JavaScript. Das Verhalten von HTML und CSS-Elementen wird mit JavaScript gesteuert und somit dynamisch. Damit sind zum Beispiel bewegliche Überlagerungen und Überblendeffekte machbar. Auch hierfür ist kein Plug-in erforderlich. Die Technik ist aktuell in Ajax aufgegangen, das dieselbe Basis nutzt.

Silverlight-Slideshow

Auch die Diashow von Vertigo gibt es kostenlos zum Download, sie nutzt den Flash-Konkurrenten Silverlight von Microsoft. Transparenzeffekte, Vollbildmodus und Bedienelemente, die nur sichtbar sind, wenn sie gebraucht werden, machen diese Show zum besonderen Erlebnis. Wie bei Flash ist auch hierfür ein Browser-Plug-in erforderlich, das es für IE und Firefox gibt. Lediglich die Benutzer von Opera müssen sich noch ein wenig gedulden, bis auch sie in den Genuss von Silverlight- Präsentationen kommen.

Das Opensource-Projekt Vertigo bringt mehrere Beispielvarianten mit. Der erste Schritt ist der Download der Slideshow von Codeplex. Die genaue Adresse finden Sie in der Linkliste. Für die Anpassung benötigen Sie nur, was Sie im Verzeichnis Slide.Show vorfinden. Spielen Sie es zur Ansicht komplett auf den Webserver. Die Liste verfügbarer Beispiele ist im Verzeichnis Samples abgelegt. Einen schnellen Überblick erhalten Sie, wenn Sie auf dem Webserver das Samples-Verzeichnis der Installation ansteuern. Erhalten Sie einen Fehler, rufen Sie die Datei Default.html dort direkt auf.

Bevor Sie daran denken, eigene Bilder zu verwenden, ist es empfehlenswert, zuerst die angepasste Originalversion zum Laufen zu bringen. Kopieren Sie dafür beispielsweise aus der Variante Vertigo die Dateien Configuration. xml, Data.xml und Default.html direkt in das Verzeichnis Slide.Show. Öffnen Sie Default. html mit einem Editor und berichtigen Sie nun die Verweise auf die eingebundenen JavaScript-Dateien. Aus

wird nach dem Entfernen der Punkte und Schrägstriche

In der XML-Datei ersetzen Sie alle ../../ Images durch nur Images. Der Zugriff aus dem Hauptverzeichnis auf den Bilderordner erfolgt dann ja direkt. Die Konfigurationsdatei bleibt im Beispiel Vertigo unberührt. In der Typical-Variante müssen jedoch noch die Verweise zu den JavaScript-Dateien auf die gleiche Art wie in der Default.html angepasst werden. Aus ../../Scripts wird einfach nur Scripts.

Nach diesen Änderungen sollten Sie jetzt die Original-Diashow sehen können, wenn Sie die Startseite aufrufen und das Silverlight- Plug-in installiert ist. Bedienelemente blenden sich ein, sobald Sie mit der Maus über den unteren Bildbereich fahren. Mit den Buttons rechts gelangen Sie zur Albenübersicht oder schalten auf den Vollbildmodus um. Bildkommentare und Informationen locken Sie mit der Mausberührung des oberen Bildbereichs aus ihrem Versteck, die Miniaturbildleiste öffnet Vorschaubilder.

Die SlideShow-Datendatei

Ersetzen Sie die bisherigen Bilder im Images- Verzeichnis durch Ihre eigenen. Auch wenn Sie diese in mehrere Diashows aufteilen, können sie sich dort alle gemeinsam befinden. Wünschen Sie für jedes Album ein eigenes Verzeichnis, müssen die Verweise in der XML-Liste entsprechend angepasst werden. Durchdachte Bildnamen sparen Ihnen richtig Aufwand. Benennen Sie zum Beispielal le Bilder eines Albums gleich und fügen Sie ihnen aufsteigende Nummern an. Kopieren Sie dann Ihren ersten Eintrag in der XML-Liste und ändern Sie nur noch Nummer und Beschreibung.

Für das nächste Album kopieren Sie das gesamte erste Album. Markieren Sie es dann und ersetzen Sie den Namen der Bilder des ersten Albums durch den Namen der Bilder und gegebenenfalls den Verzeichnisnamen des nächsten. Die Nummerierung bleibt erhalten, achten müssen Sie lediglich auf die Anzahl. Die data.xml könnte so aussehen: