XML-Ecke

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.