Author Topic: Lightbox Droplet -setup for WB 2.8.1 included jQuery Plugins [[outdated]]  (Read 5164 times)

mr-fan

  • Guest
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 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:
Code: [Select]
<?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, &#39;jquery-slimbox2-min.js&#39;);
$pos2 strpos($wb_page_data, &#39;jquery-slimbox2.css&#39;);
$pos3 strpos($wb_page_data, &#39;jquery.fancybox-1.2.1.pack.js&#39;);
$pos4 strpos($wb_page_data, &#39;fancybox.css&#39;);
$pos5 strpos($wb_page_data, &#39;fancybox.js&#39;);

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, &#39;rel="lightbox"&#39;);
$sb2 strpos($wb_page_data, &#39;rel="lightbox-cats"&#39;);

//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=&#39;".WB_URL."/include/jquery/plugins/jquery-slimbox2-min.js&#39; type=&#39;text/javascript&#39;></script>\n";
$lightbox_css  .= "<link href=&#39;".WB_URL."/include/jquery/plugins/jquery-slimbox2.css&#39; rel=&#39;stylesheet&#39; type=&#39;text/css&#39; media=&#39;screen&#39; />\n";
}else{
$lightbox_js;
$lightbox_css;
}

//setup for the CSS selectors to use a fancybox effect
$script  "<!--Fancybox Setup-->\n";
$script .= "<script type=&#39;text/javascript&#39;>\n";
$script .= "$(document).ready(function() {\n";
//normal fancybox effect
$script .= "$(&#39;a.fb&#39;).fancybox({&#39;zoomOpacity&#39;: true,&#39;zoomSpeedIn&#39;: 300,&#39;zoomSpeedOut&#39;: 300});\n";
//iframe for webpages with bigger frame 
$script .= "$(&#39;a.iframe&#39;).fancybox({&#39;hideOnContentClick&#39;: false,&#39;overlayShow&#39;: true,&#39;zoomSpeedIn&#39;:300,&#39;zoomSpeedOut&#39;:300,&#39;frameWidth&#39;: 800,&#39;frameHeight&#39;: 600});\n";
//inline content may for a hidden #sample div or other content
$script .= "$(&#39;a.inline&#39;).fancybox({&#39;hideOnContentClick&#39;: false,&#39;overlayShow&#39;: true,&#39;zoomSpeedIn&#39;:300,&#39;zoomSpeedOut&#39;:300,&#39;frameWidth&#39;: 560,&#39;frameHeight&#39;: 340});\n";
//group for a gallery don&#39;t forget to set the rel tag to the same
$script .= "$(&#39;a.group&#39;).fancybox({&#39;hideOnContentClick&#39;: false,&#39;zoomOpacity&#39;: true,&#39;overlayShow&#39;: false,&#39;zoomSpeedIn&#39;: 500,&#39;zoomSpeedOut&#39;: 500,&#39;easingIn&#39;: &#39;easeOutBack&#39;,&#39;easingOut&#39;: &#39;easeInBack&#39;});\n";
//special easing plugin effect more on http://gsgd.co.uk/sandbox/jquery/easing/
$script .= "$(&#39;a.bounce&#39;).fancybox({&#39;zoomOpacity&#39;: true,&#39;overlayShow&#39;: false,&#39;zoomSpeedIn&#39;: 500,&#39;zoomSpeedOut&#39;: 500,&#39;easingIn&#39;: &#39;easeOutBounce&#39;,&#39;easingOut&#39;: &#39;easeInBounce&#39;});\n";
$script .= "});\n";
$script .= "</script>\n";

//Fancybox 1.2.6 for special lightboxeffects usage: http://fancybox.net/howto
$fb1 strpos($wb_page_data, &#39;class="fb"&#39;);
$fb2 strpos($wb_page_data, &#39;class="iframe"&#39;);
$fb3 strpos($wb_page_data, &#39;class="inline"&#39;);
$fb4 strpos($wb_page_data, &#39;class="group"&#39;);
$fb5 strpos($wb_page_data, &#39;class="bounce"&#39;);

//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=&#39;".WB_URL."/include/jquery/plugins/fancybox/jquery.fancybox-1.2.1.pack.js&#39; type=&#39;text/javascript&#39;></script>\n";
$lightbox_js .= "<script src=&#39;".WB_URL."/include/jquery/plugins/fancybox/jquery.easing.1.3.js&#39; type=&#39;text/javascript&#39;></script>\n";
$lightbox_js .= $script;
$lightbox_css .= "<link href=&#39;".WB_URL."/include/jquery/plugins/fancybox/fancybox.css&#39; rel=&#39;stylesheet&#39; type=&#39;text/css&#39; media=&#39;screen&#39; />\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....


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

regards martin

« Last Edit: March 05, 2010, 04:58:10 PM by mr-fan »

Offline peterherman

  • Posts: 125
Hello Martin,

the Link to the German Tutorial doesn´t  work

Regards
Klaus

mr-fan

  • Guest
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