Photobox

Photobox ist eine einfache auf jQuery basierende Bilder-Slideshow. Die anzuzeigenden Bilder werden aus einer JSON-Quelle dynamisch geladen; Verhalten und Aussehen können individuell konfiguriert werden. Großer Wert wurde auf eine sehr einfache Einbindung gelegt.

Geschrieben habe ich Photobox, damit ich im Bereich Fotos eine einfache Slideshow-Funktion anbieten kann. Dort kann die Photobox also auch ausgiebig getestet werden.

Ein Beispiel sowie eine rudimentäre Dokumentation sind im Download enthalten.

Download

Benutzung

Zunächst müssen jQuery, photobox.js und photobox.css in die HTML-Datei eingebunden werden:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="../photobox.js"></script>
<link href="../photobox.css" rel="stylesheet">

Anschlie├čend kann eine Photobox erstellt werden, indem photobox() instanziiert wird und die init()-Methode aufgerufen wird. Der erste Parameter ist erforderlich und gibt die JSON-kodierte Liste der anzuzeigenden Bilder an. Der zweite Parameter ist optional und kann eine Reihe von Konfigurationsoptionen enthalten.
Die Photobox wird an Ort und Stelle erzeugt. Es können auf einer Seite beliebig viele Photoboxen erzeugt werden.

<script type="text/javascript">
    var box = new photobox();
    box.init('provider.js', {
        width:          398,
        height:         398,
        shadowType:     'stripes2',
        playbackMode:   'shuffle'
    });
</script>

Kompatibilität

Getestet wurde Photobox mit den aktuellsten Versionen des Internet Explorers, von Safari, Firefox und Chrome. In älteren Versionen funktioniert aufgrund der fehlenden Unterstützung von CSS-Transformations unter Umständen die Zoom-Animation nicht; die Slideshow selbst aber sollte dennoch funktionieren.

Konfigurationsoptionen

width
Integer. Die Breite der Photobox in Pixel. Standardmäßig gibt es einen zusätzlichen Rahmen in Pixelbreite um die Box. Standardwert: ohne Vorgabe bzw. volle Breite.
height
Integer. Die Höge der Photobox in Pixel. Standardmäßig gibt es einen zusätzlichen Rahmen in Pixelbreite um die Box. Dieses ist der einzige Parameter, der im Prinzip immer angegeben werden sollte, wenn man vernünftige Ergebnisse erzielen möchte. Standardwert: 200.
sizeFactorMin
Float. Gröszlig;enfaktor für die Bilder zu Beginn der Zoom-Animation. Standardwert: 1.0.
sizeFactorMax
Float. Gröszlig;enfaktor für die Bilder zum Ende der Zoom-Animation. Standardwert: 1.4.
durationFading
Integer. Dauer der Überblendanimation in Millisekunden. Standardwert: 1000.
durationStill
Integer. Dauer der Animationspause vor einem Bilderwechsel in Millisekunden. Standardwert: 500.
durationMoving
Integer. Dauer der Zoom-Animation in Millisekunden. Standardwert: 10000.
shadowType
String. Art des Overlays bzw. der Abschattung. Der hier angegebene String wird als Klassenname auf den Shadow-Container übernommen. Somit können eigene Effekte einfach selbst umgesetzt werden. Vordefinierte Schatten sind: stripes, stripes2, linear und inset. Standardwert: leer.
scalingMode
String. Gibt die Art und Weise an, wie die Bilder skaliert werden, wenn ihre Größe nicht der Größe der Photobox entspricht. Mögliche Werte: min (die Breite des Bildes wird auf die Breite der Box gestreckt; die Höhe wird unter Beibehaltung des Seitenverhältnisses angepasst) und fit (die Bilder werden in beide Richtungen auf die Größe der Box gestreckt oder gestaucht). Standardwert: min.
playbackMode
String. Art der Wiedergabe. Entweder linear (in Reihenfolge laut JSON-Quelle) oder shuffle (Zufallswiedergabe).
showTitles
Boolean. Wenn true, wird ein Overlay mit Bild-Titel angezeigt. Mit false wird dieses Overlay ausgeschaltet. Standardwert: true.
titleHeight
Integer. Höhe des Titel-Overlays in Pixel. Das Overlay besitzt eine feste Höhe, die gegebenenfalls an die eigenen Bedürfnisse angepasst werden muss. Standardwert: 95.
autoHideTitles
Boolean. Gibt an, ob das Titel-Overlay (falls eingeschaltet) abhängig vom Mauszeige automatisch ein- und ausgeblendet werden soll. Mit false wird dieses Verhalten ausgeschaltet. Standardwert: true.
borderStyle
String. Legt eine Zeichenkette fest, die als Inline-Style für das Border-Attribut des Photobox-Rahmenelementes übernommen wird. Hiermit kann also der Rahmen um die erzeugte Photobox eingestellt werden. Alternativ können auch entsprechende CSS-Regeln in die eigene HTML-Datei eingebunden werden. Standardwert: solid black 1px.