Der Grundlegende Einbau der ColorBox ist recht einfach. Natürlich muss jQuery ebenfalls geladen und eingebunden sein, anschließend müssen sowohl die JavaScript-Datei als auch die CSS-Datei der ColorBox im Head der Seite eingebunden werden.

<script type="text/javascript" src="jquery.colorbox-min.js"></script>
<link media="screen" rel="stylesheet" href="colorbox.css" />

Nun geht es darum den Effekt einzubauen. Das Beispiel unten setzt die maximale Breite und Höhe der ColorBox auf 95% wodurch die Box auch bei sehr großen Bildern nie größer angezeigt wird als der Monitor des Benutzers darstellen kann. Große Bilder werden dadurch kleiner dargestellt, was allerdings weit weniger störend ist als eine Ebene über der Seite zu haben bei der man im schlimmsten Fall nicht mehr an den Button zum Schließen kommt. Zudem wurden die Texte der Box ins Deutsche übersetzt.

<script type="text/javascript">
$(document).ready(function(){
	$("a[rel='colorbox']").colorbox({
		maxWidth:"95%",
		maxHeight:"95%",
		close:"schließen",
		next:"nächstes",
		previous:"vorheriges",
		current:"Bild {current} von {total}"
	});
});
</script>

Die Angabe a[rel='colorbox'] kann natürlich abgeändert werden um auf andere Kennzeichnungen, etwa bestimmte Klassen, zu reagieren. Für das Beispiel eignet es sich aber am besten. Nun fehlt nur noch die Einbindung von Bildern. Natürlich kann sowohl ein Text als auch ein Thumbnail zur Vorschau verwendet werden, wichtig ist, dass das eigentliche Bild verlinkt wird. Zudem muss natürlich die Kennzeichnung, im Beispiel als rel=”colorbox” in den Link integriert werden.

<a href="gross.jpg" rel="colorbox"><img src="thumbnail.jpg" alt="ColorBox" /></a>

Weitere Beispiele, auch für die Einbindung von anderen Inhalten als Bildern sind auf der Seite der ColorBox zu finden. Im Download-Paket sind zudem ausführliche und hilfreiche Beispiele enthalten.

ColorBox Website

Ich möchte mit diesem Beitrag auch nicht zu sehr in den Aufbau und die Arbeit mit jQuery eingehen, viel mehr möchte die es vorstellen, schließlich wird es hier sicher noch in mehr als nur einem Artikel eine Rolle spielen. jQuery ist kostenlos und frei verfügbar und weit einfacher zu nutzen als normales JavaScript. Zudem gibt es eine Vielzahl an Plugins und fertigen Scripten von denen ich sicher auch einige hier ansprechen werde.

Die Hauptfrage die sich natürlich stellt ist: Wozu kann ich jQuery einsetzen? Eine generelle Antwort lässt sich hier nicht geben, die Möglichkeiten sind zu vielfältig. Fangen wir klein an: Sie möchten einen Mouseover-Effekt für bestimmte Elemente verwenden. Das geht natürlich recht einfach mit CSS, wobei die Pseudo-Klasse :hover bekanntlich Probleme mit dem Internet Explorer hat. Zudem ist der Effekt recht abgehackt, schöner wäre da doch ein Einblend-Effekt. Hier kommt jQuery ins Spiel.

Demo

Quellcode

<a class="demo" href="http://www.google.de">MouseOver</a>
<script type="text/javascript">
$("a.demo").mouseover(function(){
	$("a.demo").animate({
		backgroundColor: "#DD0000"
	}, 300);
});
$("a.demo").mouseout(function(){
	$("a.demo").animate({
		backgroundColor: "#FFFFFF"
	}, 300);
});
</script>

Das gezeigte Beispiel benötigt allerdings, um die Hintergrundfarbe zu animieren, ein erstes jQuery Plugin: Color Animations. Animationen mit Größe, Deckkraft oder Rahmenstärke lassen sich auch ohne diese Erweiterung realisieren.

Wer bisher noch nie mit jQuery gearbeitet hat sollte dies unbedingt einmal versuchen. jQuery ist gut dokumentiert und es gibt eine große Anzahl an Tutorials.

jQuery Website