XML für die Bildergalerie II
Nach dem Einstieg in das Spry Framework von Adobe sollte das Ergebnis mit JavaScript und CSS noch etwas ansprechender gestaltet werden:
Die Daten für die Bildergalerie kommen weiterhin aus einer XML-Datei. Die einfache Web-Galerie aus dem ersten Teil ist jetzt aber mit viel Javascript erweitert worden: Der Betrachter kann jetzt aus mehreren Bilderalben die gewünschte Sammlung auswählen. Außerdem vergrößert sich das kleine Vorschaubild, wenn man mit der Maus darüber fährt, und die Web-Anwendung enthält nun auch eine automatisch startende Slideshow. Die fertige Ajax-Anwendung gehört zum Showcase für das Spry-Framework und wurde von Adobe bereits 2007 vorgestellt, aber seitdem mehrfach weiterentwickelt. Für die Einrichtung des XML-Datensatzes und dessen Einbindung in eine Webseite waren zwei Javascript-Dateien erforderlich:
<script src="../../includes/xpath.js" type="text/javascript"><!--mce:0--></script> <script src="../../includes/SpryData.js" type="text/javascript"><!--mce:1--></script> |
Zwei weitere kommen für die dynamische Gestaltung der Bildergalerie zum Einsatz:
<script src="../../includes/SpryEffects.js" type="text/javascript"><!--mce:2--></script> <script src="gallery.js" type="text/javascript"><!--mce:3--></script> |
Alle JavaScript-Dateien sind Bestandteil des Spry-Frameworks, das zurzeit in der Version 1.6 im Zip-Paket heruntergeladen werden kann. Wer die Spry-Galerie für ein eigenes Projekt übernehmen will, baut dieses am einfachsten anhand der Beispieldaten auf, die in diesem Zip-Paket enthalten sind und sich im Verzeichnis demos/gallery finden:
Die Alben, die in der Web-Galerie zur Auswahl angezeigt werden, sind in der Datei galleries.xml definiert:
<galleries> <gallery base="orchideen/" file="photos.xml"> <sitename>Orchideen</sitename> <photographer>Meister Eder</photographer> <contactinfo>http://www.eder.de</contactinfo> <email>meister@eder.de</email> <security><![CDATA[]]> </security> </gallery> <gallery base="Enziane/" file="photos.xml"> <sitename>Enziane</sitename> <photographer>Heidi</photographer> <contactinfo>...</contactinfo> <email>heidi@...</email> <security><![CDATA[]]> </security> </gallery> <gallery base="lilien/" file="photos.xml"> <sitename>Lilien</sitename> <photographer>Lilly Fee</photographer> <contactinfo>...</contactinfo> <email>lilly@...</email> <security><![CDATA[]]> </security> </gallery> </galleries> |
Die Beispieleinträge lassen sich einfach überschreiben. Im gleichen Ordner wie diese Datei befinden sich die Ordner für die einzelnen Bilderalben – jeder enthält eine Datei photos.xml als XML-Verzeichnis der zu zeigenden Bilder sowie zwei Unterordner für die Fotos in großer Auflösung und als Thumbnails für das Mosaik mit den Mini-Abbildungen. Um die Bildergalerie an das Layout des eigenen Webauftritts anzupassen, kann man zum Schluss noch die index.html und die screen.css ändern. Das fertige Beispiel mit den Orchideen findet sich hier.
