Anwendung der ColorBox und Ihre Parameter

Voraussetzung:

WB 2.8, Template mit integriertem jQuery-Framework und eingebundener Colorbox

Kenntnis über das Einfügen von Bildern und das Verlinken von Bildern und Texten mit dem Wysiwyg-Editor

Auf geht´s

Die Benutzung der Colorbox stellt sich relativ simpel dar und mit dem von mir im Tutorial, wo es um die Einbindung der Colorbox geht, angegebenen Code haben Sie schon mehr eingebunden als für das einfache Benutzen eigentlich nötig ist. Die Colorbox wird durch Klassen und Relationen aufgerufen, je nach Verwendungszweck.

Gehen wir den Code einmal durch und Schlüsseln ihn auf.

<!-- Beginn ColorBox --> 
<script type="text/javascript">
$(document).ready(function(){
			$("a[rel='csingle']").colorbox();
			$("a[rel='cfade']").colorbox({transition:"fade"});
			$("a[rel='cslide']").colorbox({
                                                     slideshow:true,
                                                     slideshowSpeed:6000,
                                                     slideshowAuto:true,
                                                     transition:"elastic",
                                                     opacity: "0.6",
                                                     current: "Bild {current} von {total}",
                                                     slideshowStart: "Diashow starten",
                                                     slideshowStop: "Diashow anhalten"});
			$(".colorbox").colorbox();
			$(".youtube").colorbox({iframe:true, width:650, height:550});
			$(".iframe").colorbox({width:"80%", height:"80%", iframe:true});
			});
</script>
<!-- Ende ColorBox -->

Dafür dass ein Thumbnail nach dem Anklicken als großes Bild erscheint ist dieser Abschnitt zuständig.

$(".colorbox").colorbox();

In der ersten Klammer steht die Klasse .colorbox welche Sie beim Setzen des Links hinzufügen müssen. Das geschieht ganz einfach im FCK Editor beim Hinzufügen des Links. Nachdem Sie im FCK Editor ein Thumbnail in Ihre Seite eingefügt haben verlinken Sie es mit dem dazugehörigen großen Bild und gehen dann auf die Reiterkarte Erweitert. Hier tragen Sie in das Feld Stylesheet Klasse colorbox ein und bestätigen das Ganze mit OK.

Screenshot

Der Code für den Screenshot oben sieht z.B. so aus:

<a href="http://www.websitebaker.net/media/tutorial/colorboxtut/link.png" title="Bild in der Colorbox" class="colorbox" style=""><img width="200" height="170" border="0" align="left" class="colorbox" title="Bild in der Colorbox" alt="link.png" src="http://www.websitebaker.net/media/tutorial/colorboxtut/link_200.png" /></a>

Und er Code für den Textlink so: 

<a href="http://www.websitebaker.net/media/tutorial/colorboxtut/link.png" title="Screenshot" class="colorbox">Screenshot</a>

Wenn Sie nun den FCK Editor speichern sollte sich auf Ihrer Webseite Ihr Thumbnail nach anklicken in der Colorbox als großes Bild öffnen.

to be continued

zurück