Website Baker und jQuery
Einbau des jQuery Plugins ColorBox
Die ColorBox ist ein jQuery Plugin und eigentlich nichts anderes als die allseits bekannte Lightbox. Ich für meinen Teil habe mich für die ColorBox entschieden weil sie für mich am besten und verständlichsten dokumentiert ist und mit nur 9kb auch ein Leichtgewicht unter den Plugins ist. Die globale Einbindung hat den Vorteil das die ColorBox dem gesamten System zur Verfügung steht und wir somit jedes eingefügte Thumbnail, jeden YouTube Link, eine Galerie (z.B. Foldergallery) oder andere Verweise in der gleichen Box öffnen können. Das ergibt für den Besucher ein stimmiges gesamt Bild ähnlich wie das CI Ihrer Firma.
Ich benutze für diese Anleitung das Template Round als Beispiel.
Voraussetzungen:
WB 2.8 mit eingebundenem jQuery Framework
Addon File Editor
Sicherer Umgang mit dem Texteditor.
Installierter FTP -Client und der sichere Umgang mit diesem.
Vorbereitung:
Als erstes laden Sie sich das Plugin von der Entwicklerseite auf Ihren Rechner und entpacken das zip-File. Im Ordner des entpackten zip-Files finden Sie 5 Beispiele (Example) wie die ColorBox nachher aussehen kann. Diese Beispiele lassen sich über die index.html im Browser öffnen.
Nun starten Sie Ihren FTP-Client, verbinden sich mit Ihrer Webseite und gehen in den Ordner include/jquery/plugins. Dort erstellen Sie den Ordner colorbox, öffnen diesen, übertragen den Ordner images und die css-Datei aus dem Beispiel welches Ihnen am besten gefällt und die Datei jquery.colorbox-min.js aus dem Ordner colorbox des zip-Files auf den Server. Dieser Teil ist soweit abgeschlossen. Sie können den FTP-Client schließen und sich in das Backend Ihrer Website Baker Installation einloggen.
Einbindung
Im Backend gehen wir wieder den schon für das Einbinden des Frameworks aufgezeigten Weg.
Admin Tools > Addon File Editor > Liste der installierten Templates > Ihr Template > index.php
Im Texteditor fügen wir als erstes den Pfad zur CSS-Datei hinzu.
<link rel="stylesheet" type="text/css" href="<?php echo WB_URL; ?>/include/jquery/plugins/colorbox/colorbox.css" media="screen,projection" />
Danach den Pfad zur Plugin Datei.
<script type="text/javascript" src="<?php echo WB_URL;?>/include/jquery/plugins/colorbox/jquery.colorbox-min.js"></script>
Als drittes und letztes müssen wir nun noch den Aufruf / die Funktion einfügen damit das Plugin auch weiß was wann wie zu tun ist.
<!-- 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 -->
Damit wäre die Einbindung soweit abgeschlossen und Ihr head-Bereich beim Template Round sollte nun so ausssehen.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=<?php echo defined('DEFAULT_CHARSET') ? DEFAULT_CHARSET : 'utf-8'; ?>" />
<meta name="description" content="<?php page_description(); ?>" />
<meta name="keywords" content="<?php page_keywords(); ?>" />
<link rel="stylesheet" type="text/css" href="<?php echo TEMPLATE_DIR; ?>/template.css" media="screen,projection" />
<link rel="stylesheet" type="text/css" href="<?php echo TEMPLATE_DIR; ?>/print.css" media="print" />
<link rel="stylesheet" type="text/css" href="<?php echo WB_URL; ?>/include/jquery/plugins/jquery-ui.css" media="screen,projection" />
<link rel="stylesheet" type="text/css" href="<?php echo WB_URL; ?>/include/jquery/plugins/colorbox/colorbox.css" media="screen,projection" />
<script language="JavaScript" type="text/javascript">
//<![CDATA[
var URL = '<?php print WB_URL ?>';
var WB_URL = '<?php print WB_URL ?>';
var TEMPLATE_DIR = '<?php print TEMPLATE_DIR ?>';
//]]>
</script>
<script type="text/javascript" src="<?php echo WB_URL;?>/include/jquery/jquery-min.js"></script>
<script type="text/javascript" src="<?php echo WB_URL;?>/include/jquery/jquery-ui-min.js"></script>
<script type="text/javascript" src="<?php echo WB_URL;?>/include/jquery/jquery-insert.js"></script>
<script type="text/javascript" src="<?php echo WB_URL;?>/include/jquery/plugins/colorbox/jquery.colorbox-min.js"></script>
<!-- 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 -->
<title><?php page_title('', '[WEBSITE_TITLE]'); ?></title>
<?php
// automatically include optional WB module files (frontend.css, frontend.js)
if (function_exists('register_frontend_modfiles')) {
register_frontend_modfiles('css');
register_frontend_modfiles('js');
} ?>
</head>
Wie Sie die ColorBox nun verwenden, was die Funktionen und Parameter bedeuten die wir eingefügt haben, erkläre ich Ihnen dann im nächsten Tutorial.
ältere Artikel:
Die ColorBox als Modul (Snippet)
ColorRating als Modul (Snippet) A PHP/jQuery based 5-star Ajax rating script.
Icon und automatisches Öffnen in einem neuen Browserfenster für externe Links