WebsiteBaker Community Forum
WebsiteBaker Support (2.8.x) => jQuery => Topic started by: mr-fan on January 21, 2010, 11:19:00 PM
-
EDIT:// The Pluginsfolder with the lightbox scripts isn't included in the WB packege anymore -please put this scripts manually in your installation and change the paths!
or use some sort of snippets...
regards martin
hi,
this jquery Droplet here (https://forum.WebsiteBaker.org/index.php/topic,16616.0.html) seems to interesting nobody... :roll:
no problem - this droplet will be more interesting.... :wink:
This Droplet is a real Easy Way to use the two Lightbox Scripts that comes with WB in the /include/jquery/ folder
Slimbox2 & Fancybox 1.2.6
Dropletname: [[Lightbox]]
Code:<?php //ingore this line
/************************************************************************************
* Droplet to load WB included Lightbox Plugins - Global or on a page if you need it!
* @autor: Martin Freudenreich (mr-fan) 29-12-09
*
* @param where=head or body to setup where you wanna load the js files //default </head>
*
* Slimbox is only loaded if a rel tag with "lightbox" was found!
* Gallerys with SLimbox2 made with rel="lightbox-cats"!
* Fancyboy only loaded if one of the classes (fb, inline, iframe, group, bounce) was found!
* Gallerys with Fancybox made with class="group" and the same rel tag like rel=fancybox"!
* Simple check if Jquery core is loaded twice...
*/
//simple methode to check if this Droplet loaded twice!
$pos1 = strpos($wb_page_data, 'jquery-slimbox2-min.js');
$pos2 = strpos($wb_page_data, 'jquery-slimbox2.css');
$pos3 = strpos($wb_page_data, 'jquery.fancybox-1.2.1.pack.js');
$pos4 = strpos($wb_page_data, 'fancybox.css');
$pos5 = strpos($wb_page_data, 'fancybox.js');
if ($pos1 !== false or $pos2 !== false or $pos3 !== false or $pos4 !== false or $pos5 !== false) {
return "<!--Lightbox Plugins loaded twice-->\n";
} else {
$lightbox_js = "<!--Lightbox Plugins-->\n";
$lightbox_css = "<!--Lightbox CSS-->\n";
}
//set to </head> or </body> to load the Jqueryscripts where you want
$places = array ("head", "body");
if (!isset($where)) $where= $places[0];
else $where = in_array($where, $places) ? $where : $places[0];
$where = "</".$where.">";
//Slimbox2 for simple lightboxeffects usage: http://www.digitalia.be/software/
$sb1 = strpos($wb_page_data, 'rel="lightbox"');
$sb2 = strpos($wb_page_data, 'rel="lightbox-cats"');
//only loaded if a rel tag for the lightbox is on a page...
if ($sb1 !== false or $sb2 !== false) {
$lightbox_js .= "<!--Slimbox2-->\n";
$lightbox_js .= "<script src='".WB_URL."/include/jquery/plugins/jquery-slimbox2-min.js' type='text/javascript'></script>\n";
$lightbox_css .= "<link href='".WB_URL."/include/jquery/plugins/jquery-slimbox2.css' rel='stylesheet' type='text/css' media='screen' />\n";
}else{
$lightbox_js;
$lightbox_css;
}
//setup for the CSS selectors to use a fancybox effect
$script = "<!--Fancybox Setup-->\n";
$script .= "<script type='text/javascript'>\n";
$script .= "$(document).ready(function() {\n";
//normal fancybox effect
$script .= "$('a.fb').fancybox({'zoomOpacity': true,'zoomSpeedIn': 300,'zoomSpeedOut': 300});\n";
//iframe for webpages with bigger frame
$script .= "$('a.iframe').fancybox({'hideOnContentClick': false,'overlayShow': true,'zoomSpeedIn':300,'zoomSpeedOut':300,'frameWidth': 800,'frameHeight': 600});\n";
//inline content may for a hidden #sample div or other content
$script .= "$('a.inline').fancybox({'hideOnContentClick': false,'overlayShow': true,'zoomSpeedIn':300,'zoomSpeedOut':300,'frameWidth': 560,'frameHeight': 340});\n";
//group for a gallery don't forget to set the rel tag to the same
$script .= "$('a.group').fancybox({'hideOnContentClick': false,'zoomOpacity': true,'overlayShow': false,'zoomSpeedIn': 500,'zoomSpeedOut': 500,'easingIn': 'easeOutBack','easingOut': 'easeInBack'});\n";
//special easing plugin effect more on http://gsgd.co.uk/sandbox/jquery/easing/
$script .= "$('a.bounce').fancybox({'zoomOpacity': true,'overlayShow': false,'zoomSpeedIn': 500,'zoomSpeedOut': 500,'easingIn': 'easeOutBounce','easingOut': 'easeInBounce'});\n";
$script .= "});\n";
$script .= "</script>\n";
//Fancybox 1.2.6 for special lightboxeffects usage: http://fancybox.net/howto
$fb1 = strpos($wb_page_data, 'class="fb"');
$fb2 = strpos($wb_page_data, 'class="iframe"');
$fb3 = strpos($wb_page_data, 'class="inline"');
$fb4 = strpos($wb_page_data, 'class="group"');
$fb5 = strpos($wb_page_data, 'class="bounce"');
//only loaded if a rel tag for the lightbox is on a page...
if ($fb1 !== false or $fb2 !== false or $fb3 !== false or $fb4 !== false or $fb5 !== false) {
$lightbox_js .= "<!--Fancybox-->\n";
$lightbox_js .= "<script src='".WB_URL."/include/jquery/plugins/fancybox/jquery.fancybox-1.2.1.pack.js' type='text/javascript'></script>\n";
$lightbox_js .= "<script src='".WB_URL."/include/jquery/plugins/fancybox/jquery.easing.1.3.js' type='text/javascript'></script>\n";
$lightbox_js .= $script;
$lightbox_css .= "<link href='".WB_URL."/include/jquery/plugins/fancybox/fancybox.css' rel='stylesheet' type='text/css' media='screen' />\n";
}else{
$lightbox_js;
$lightbox_css;
}
//insert the CSS to your page output - always to the head section!
$wb_page_data = str_replace("</head>",$lightbox_css."</head>", $wb_page_data );
//insert the JS to your page output
$wb_page_data = str_replace($where,$lightbox_js.$where, $wb_page_data );
//output
return true;
Usage of this Droplet:
Just put it in your Backend under Options/page_footer .......it will do the job automatic....
(http://www.websitebakers.de/media/autoren/mr-fan/nutzung-droplets-gross.jpg)
you must have loaded jQuery before in one of the possible ways...
and maybe there is more stuff to get this jquery things started...like the Scroll to Top Droplet here (https://forum.WebsiteBaker.org/index.php/topic,16834.0.html)
regards martin
-
Hello Martin,
the Link to the German Tutorial doesn´t work
Regards
Klaus
-
Hello Martin,
the Link to the German Tutorial doesn´t work
Regards
Klaus
EDIT:// The Pluginsfolder with the lightbox scripts isn't included in the WB packege anymore -please put this scripts manually in your installation and change the paths!
or use some sort of snippets...
regards martin
....it's not working while jQuery Plugins aren't available in the 2.8.1 of WB...so i delete all tuts regarding to this topics....+
links off now - thanks for the hint!
regards martin