Mit Beanbox kann sehr schnell eine "lightbox" für Images erstellt werden. Das jQuery Plugin bietet Funktionen, um das Layout individuell anzupassen. Textinformationen, Paginierung, Autoplay, Dimension und Color-Features werden über Attribute der Funktion bestimmt. Ein CSS-Style ist nicht notwendig.
Vorschau
Am folgenden Beispiel können die unten beschriebenen Optionen getestet werden. Eingegebene Änderungen werden sofort in der Vorschau angezeigt. Das vollständige Beispiel findet sich auch im Downloadbereich.
Installation
Der Hauptcontainer ist ein Block-Element. Dieses Element nimmt alle Mitglieder der "lightbox" auf. Ein Mitglied besteht aus einem a-Tag mit dem href-Attribut als Ziel der "lightbox" und einem img-Tag als "thumbnail". Der Text des alt-Attributes kann als Information in die "lightbox" eingeblendet werden. Mitglieder einer "lightbox" müssen einer "class" angehören. Wichtig: Es dürfen sich keine weiteren Elemente im Hauptcontainer befinden.
<div>
<a class="sample1" href="img/beanbox/bild1.jpg"><img src="img/beanbox/thumb_bild1.jpg" alt="Das erste Bild."></a>
<a class="sample1" href="img/beanbox/bild2.jpg"><img src="img/beanbox/thumb_bild2.jpg" alt="Das zweite Bild."></a>
</div>
Im Script wird die Funktion "beanbox" an der "class" der Mitglieder aufgerufen:
$('.sample1').beanbox({
});
Optionen
text: [true | false] ; default: trueIst true gesetzt, wird der Text des alt-Attributes eingeblendet; false für keinen Text.
paging: [true | false] ; default: trueIst true gesetzt, wird eine Paginierung angezeigt; false für keine Paginierung.
controls: [true | false] ; default: trueIst true gesetzt, werden Buttons zum Steuern der "lightbox" angezeigt; false für keine Buttons.
landscapeSize: ['size'] ; default: '50%'Liegt das Image im Landscape-Format vor, wird die Breite über diesen Wert bestimmt. Es können alle gültigen CSS-Values verwendet werden.
portraitSize: ['size'] ; default: '80%'Liegt das Image im Portrait-Format vor, wird die Höhe über diesen Wert bestimmt. Es können alle gültigen CSS-Values verwendet werden.
background: ['color' | 'url'] ; default: 'rgba(0,0,0,0.9)'Legt den Hintergrund bei geöffneter "lightbox" fest. Alle gültigen CSS-Values können verwendet werden. Transparenz wird über den Alpha-Wert einer Color bestimmt.
accentColor: ['color'] ; default: 'rgb(200,200,200)'Bestimmt die Farben für Borders, Paginierung und Buttons. Alle gültigen CSS-Values können verwendet werden.
accentHoverColor: ['color'] ; default: 'rgb(145,14,6)'Bestimmt die Farben für die Buttons beim Hovern. Alle gültigen CSS-Values können verwendet werden.
fontSize: ['size'] ; default: '0.9rem'Bestimmt die Schriftgröße des Textes bei "text:true". Alle gültigen CSS-Values können verwendet werden.
autoPlay: ['forward' | 'backward' | false] ; default: falseIst 'forward' gesetzt, wird bei geöffneter "lightbox" eine Slideshow aufsteigend gestartet, wenn mehr als ein Element der class angehören; 'backward' für absteigend; false für keine Slideshow.
interval: [n] ; default: 10000Bestimmt die Pausen der Slideshow in Millisekunden.