jQuery Plugin ColorBox
ColorBox ist eine jQuery-Plugin zur Darstellung nahezu beliebiger Inhalte in einem über den allgemeinen Inhalt der Website gelegten Bereich. Darstellen lassen sich insbesondere: Bilder, Diashows, Galerien, andere Webseiten mittels iFrame, HTML-Code im inline-Modus und im Ajax-Modus.
Die aktuelle Version von ColorBox (1.6.1) ist angeblich kompatibel mit jQuery 1.3.2. Ich habe dabie jedoch Probleme gehabt. Auf diesen Testseiten (auf Basis eines freien Templates) setzte ich noch Version ColorBox 1.3.19 in Verbindung mit jQuery 1.7.1 ein.
Andere Testseiten mit dem Bootstrap-Template verwenden Colorbox 1.6.1 in Verbindung mit jQuery 1.11.0.
ColorBox ist gerade einmal 9.517 (Version 1.3.19) bzw. 11.900 (Version 1.6.1) Byte groß. Wenn man ohnehin auf der Website jQuery einsetzt, dann ist ColorBox eine Gute Variante, um eine Art Lightbox einzubinden.
Allerdings ist keine der hier genannte Versionen ist responsiv. Daher sollte unbedingt auch die Fancybox als Alternative geprüft werden.
ColorBox einbauen
Der Einbau der ColorBox ist denkbar einfach. Im Head werden die allgemein erforderlichen Dateien referenziert. Mit
<link rel="stylesheet" href="colorbox.css" />
wird das ColorBox -Stylesheet eingebunden. Mit
<script src="jquery.min.js"></script> <script src="jquery.colorbox-min.js"></script>
werden die jQuery- und die ColorBox-Scripte eingebunden. Im Body werden nun die in der ColorBox anzuzeigenden Objekte eingebunden. Das kann so aussehen:
<a class='gallery' href='image1.jpg'>Photo_1</a> <a class='gallery' href='image2.jpg'>Photo_2</a> <a class='gallery' href='image3.jpg'>Photo_3</a>
Bis hierher passiert aber noch gar nichts. ColorBox muss nun noch darauf hingewiesen werden, dass die Objekte verarbeitet werden müssen. Das geschieht mit einem kleinen Script:
<script>
jQuery('a.gallery').colorbox();
</script>
Mit diesem Script werden alle Inhalte in a-Tags mit der Klasse gallery an die ColorBox übergeben. Dieser Scriptcode muss ganz am Ende der Datei eingefügt werden, da anderenfalls beim Aufruf die farglichen Objekte noch gar nicht geladen sind. Das Minimalbeispiel der ColorBox-Einbindung sieht also so aus:
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="colorbox.css" />
<script src="jquery.min.js"></script>
<script src="jquery.colorbox-min.js"></script>
</head>
<body>
<a class='gallery' href='image1.jpg'>Photo_1</a>
<a class='gallery' href='image2.jpg'>Photo_2</a>
<a class='gallery' href='image3.jpg'>Photo_3</a>
<script>
jQuery('a.gallery').colorbox();
</script>
</body>
</html>
Damit hat man ein erstes Demo mit Grundeinstellungen. Allerdings werden lassen sich die Bilder immer nur einzeln aufrufen. Es gibt keinen Galerie- bzw. Slideshow-Effekt. Zu dessen Umsetzung muss man der Colorbox weiterer Parameter übergeben:
<script>
jQuery(document).ready(function () {
jQuery('a.gallery').colorbox({ opacity:0.5 , rel:'group1' });
});
</script>
Bei diesem Beispiel werden die Bilder gruppiert. Außerdem wird der Opacity-Faktor verändert. Um den Scriptaufruf schon im Head bzw. am Anfang des Body durchzuführen, wird die .ready()-Methode von jQuery genutzt. Das kann man sich hier ansehen.