Da ich schon länger nach einer guten, jedoch nicht allzu komplexen, JavaScript Bildergalerie gesucht habe, kam ich nun zu dem Entschluss mir selbst eine zu basteln. Diese Bibliothek wird sicherlich in der nächsten Zeit noch ausgebaut und besitzt drei Grundmerkmale:
- Interaktion mit Shadowbox zur Vollbildanzeige von Bildern*
- Einfach zu definierende Bilderliste
- Diamodus mit Modusbuttons
*) Shadowbox wurde nicht direkt integriert, so dass Photojow auch ohne Shadowbox betrieben werden kann. Der einzige Unterschied besteht darin, dass große Bilder in einem neuen Fenster, statt im selben mit Shadowbox, geladen werden.
Einbinden von Photojow
Der folgende Code illustriert wie man Photojow am einfachsten in sein HTML-Dokument einbindet.
<head>
...
<link rel="stylesheet" href="photojow.css" type="text/css" media="screen" />
...
</head>
<body>
...
<div id="jowcase" width="500" height="200">
<img src="preview.jpg" big="path/to/full/image.jpg" small="path/to/thumbnail.jpg" alt="Description" title="Title" />
...
</div>
...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="photojow.js"></script>
</body>
Hierbei wurden die JavaScripts aus Performancegründen aus dem Head-Tag entfernt und die jQuery Version, welche von Google gehostet wird, benutzt. Mit Hilfe des Stylesheets können die Elemente der Galerie frei angepasst werden. Das Stylesheet wird zur korrekten Arbeitsweise des Skripts benötigt.
Die Benutzeroberfläche
Sobald die Maus des Benutzers über die Oberfläche der Bildergalerie fährt (der DIV-Block mit der ID jowcase), werden die Steuerbuttons der Galerie angezeigt. Diese Buttons haben folgende Funktionalität:
- Vorheriges Bild anzeigen
- Abspielen der Diashow / Pausieren der Diashow (je nachdem ob bereits eine Diashow läuft)
- Nächstes Bild anzeigen
- Den Bildtitel anzeigen / verstecken (je nachdem ob der Bildtitel bereits angezeigt wird)
Neben diesen vier Buttons gibt unter der Bildvorschau noch eine Liste mit Miniaturbildern zu allen Bildern. Die Liste ist statisch wenn die Breite aller Miniaturbilder kleiner ist als die Breite des Containers. Ansonsten wird im rechten Drittel nach rechts gescrollt, im linken Drittel nach links. Beim Klick auf ein Miniaturbild wird das Vorschaubild zum gewählten Bild angezeigt.
Minimale Einstellungen
Im oben angegebenen Code wurden alle Angaben zum Bild gemacht, d.h. eine Beschreibung, ein Titel, ein größeres Exemplar und ein Miniaturbild. Alternativ hätte man auch folgendes schreiben können (Minimalistische Version):
<img src="preview.jpg" />
In diesem Beispiel würde kein großes Bild geöffnet werden, außerdem wird das gleiche Bild (preview.jpg) auch als Miniaturbild verwendet (und nur vom Browser auf die kleine Größe interpoliert). Des Weiteren wird weder ein Titel noch eine Beschreibung zum Bild angezeigt.