Suche
| Besucherstatistik | |
| Besucher gesamt: | 52.734 |
| Besucher heute: | 1 |
| Besucher gestern: | 94 |
| Seitenstatistik | |
| Seitenaufrufe gesamt: | 288.001 |
| Seitenaufrufe diese Seite: | 1.937 |
| Online | |
| gerade online: | 1 |
|
|
Wie binde ich FancyBox ein
( Diese Seite ist noch im Aufbau )
Zuerst stellen wir sicher, dass ein gültiger DOCTYPE verwendet wird. Das ist für FancyBox erforderlich, damit es so aussieht wie es aussehen soll und funktioniert.
Wo liegt der Vorteil FancyBox als Pagemodul einzusetzen. Wir brauchen keine Funktion mehr ins Template einzubinden und können mit dem WYSIWYG-Editor Fancyboxbilder im Content platzieren wo wir möchten.
Zuerst binden wir die benötigten Javascript files ein, wenn noch nicht geschehen. In Website Baker 2.8 können die Jquery Core Files automatisch eingebunden werden.
<script type="text/javascript" src="path-to-file/jquery-min.js"></script> <script type="text/javascript" src="path-to-file/jquery-insert.js"></script>
Folgende Files müssen nicht eingebunden werden, da diese erst eingebunden wenn di auch benötigt werden um die Ladeziet der Seite klein zu halten.
<script type="text/javascript" src="path-to-file/jquery.fancybox.js"></script> <script type="text/javascript" src="path-to-file/jquery.easing.js"></script> <link rel="stylesheet" href="path-to-file/fancybox.css" type="text/css" media="screen">
Easing.js ist optional, um FancyBox animiert aufzurufen, da jQuery standardmässig nur "swing" and "linear" unterstürtzt
Der Aufruf der Scripte in Website Baker 2.8 erfolgt auf diese Art und Weise
$(document).ready(function()
{
if($('.fancybox').length)
{
$.insert(WB_URL+'/modules/fancybox/css/fancybox.css');
$.insert(WB_URL+'/modules/fancybox/js/jquery.easing.1.3.js');
$.insert(WB_URL+'/modules/fancybox/js/jquery.fancybox-1.2.1.js');
}
.............
});
Wir erstellen ein Link element (<a href>) für Bilder
<a id="single_image" href="image_big.jpg"><img src="image_small.jpg" alt=""/></a>
Die Einbindung der fancyBox Funktion als Javascript sieht so aus
Ohne Parameter mit Standardwerten
$("a#single_image").fancybox();
Mit Parametern, Standardwerte überschreiben
$("a#single_3").fancybox({
'overlayShow' : false,
'zoomSpeedIn' : 600,
'zoomSpeedOut' : 500,
'easingIn' : 'easeOutBack',
'easingOut' : 'easeInBack'
});
Wie bekommen wir das FancyBox Plugin am Laufen
Wie binden wir Fancymodul auf der Seite ein? Ganz einfach, als erstes fügen wir den Abschnitt fancyBox v1.1 ein, dann die Module wo wir fancybox einbinden möchten. Im Normalfall ist dies wysiwyg
Jetzt gehen wir in die Bearbeitung der einzelnen Abschnitte. Für die Fancybox muss weiter nichts mehr eingestellt werden. Der Aufruf der Scripte und Abfragen erfolgt über die frontend_body.js bzw alternativ über die frontend.js.
So sieht die frontend_body.js aus.
$(document).ready(function()
{
if($('.fancybox').length)
{
var FANCYBOX = true;
$.insert(WB_URL+'/modules/fancybox/css/fancybox.css');
$.insert(WB_URL+'/modules/fancybox/js/jquery.easing.1.3.js');
$.insert(WB_URL+'/modules/fancybox/js/jquery.fancybox-1.2.1.js');
}
$("a#single_1").fancybox();
$("a#single_2").fancybox({
'zoomOpacity' : true,
'overlayShow' : false,
'zoomSpeedIn' : 500,
'zoomSpeedOut' : 500
});
$("a#single_3").fancybox({
'overlayShow' : false,
'zoomSpeedIn' : 600,
'zoomSpeedOut' : 500,
'easingIn' : 'easeOutBack',
'easingOut' : 'easeInBack'
});
$("a.group").fancybox({
'centerOnScroll' : false,
'hideOnContentClick' : false,
'frameWidth' : 600,
'frameHeight' : 400
});
$("a.video").fancybox({
'centerOnScroll' : false,
'overlayShow' : true,
'hideOnContentClick' : false,
'frameWidth' : 425,
'frameHeight' : 355
});
/* from old snippet modul */
$("a.fb").fancybox();
$("a.page_fb").fancybox({
'hideOnContentClick': false,
'zoomSpeedIn':0,
'zoomSpeedOut':300
});
$("a.pic_fb").fancybox({
'hideOnContentClick': true });
$("a.pic1_fb").fancybox({
'hideOnContentClick': true,
'overlayShow': true
});
$("a.video_fb").fancybox({
'hideOnContentClick': false,
'overlayShow': true,
'frameWidth': 425,
'frameHeight': 355
});
$("div#use_fb a").fancybox();
});
