ShadowBox For WordPress

[shadowbox]

2012-09-23 For users who still use ie (internet explorer) to access your page, make sure to force them to disable (turn off) the compatibility or shadowbox won’t work. Add this to your header.php.
<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE" />

Shadowbox is a very popular pop up plugin. Some of the options need to be modified for it to work with everything. For WordPress, I just load the scripts by adding these lines just before the </head> of the theme’s header.php.

<!–Start Shadowbox–> <script src=”<?php bloginfo(‘template_url’); ?>/pops/shadowbox/shadowbox.js” type=”text/javascript”></script> <link rel=”stylesheet” type=”text/css” media=”all” href=”<?php bloginfo(‘template_url’); ?>/pops/shadowbox/shadowbox.css” /> <script type=”text/javascript”> Shadowbox.init({ slideshowDelay: 3, animSequence:”wh”, })</script> <!–end shadowbox–>

Images

The best part about shadowbox is the ability to have pop up video players and again using links with (rel=”shadowbox[80% 80%]”) script. Since all video players are embeded in the shadowbox plugin, we don’t have to assign any player. Just need to set the height & width. The default height = 300 and width = 500. We do need to install quicktime, window media player for browsers.

Youtube

<a title=”youtube video” href=”//www.youtube.com/v/s2xAtGz_bNc&fs=1;autoplay=1″ rel=”shadowbox;height=350;width=560;player=swf”><img style=”vertical-align: baseline; border: 3px solid black;” title=”youtube with image link” src=”/media/teststuff/tn_cab04_75.JPG” alt=”” width=”250″ height=”141″ /></a>

Youtube playlist

<a title=”youtube playlist video” href=”//www.youtube.com/embed?listType=playlist&list=PLuRzvc_tEcZST27lPO1_WgftNO1pVUZZY” rel=”shadowbox;height=350;width=600″> <img style=”vertical-align: baseline; border: 3px solid black;” title=”youtube playlist with image link” src=”/media/teststuff/tn_cab04_75.JPG” alt=”” width=”250″ height=”141″ /></a>

MP4 File

<a title=”Play MP4 File” href=”/media/teststuff/tasting.mp4″ rel=”shadowbox”><img class=”aligncenter” style=”vertical-align: baseline; border: 3px solid black;” title=”MP4 using JWPlayer” src=”/media/teststuff/tn_cab04_75.JPG” alt=”Play MP4 File” width=”250″ height=”141″ /></a>

Since Quicktime player doesn’t seem to display the size of the controller correctly and fullscreen option is not there, we modified all files played by Quicktime to default JWplayer.

var jwControllerHeight=20;S.flv=function(obj,id){this.obj=obj;this.id=id;this.height=obj.height?parseInt(obj.height,10):300;if(S.options.showMovieControls){this.height+=jwControllerHeight}this.width=obj.width?parseInt(obj.width,10):500};S.flv.ext=[“flv”,”m4v”,”mp4″,”mov”];S.flv.prototype={append:function(body,dims){var tmp=document.createElement(“div”);tmp.id=this.id;body.appendChild(tmp);var height=dims.innerHeight,width=dims.innerWidth,swf=S.path+”player.swf”,version=S.options.flashVersion,express=S.path+”expressInstall.swf”,

flashvars=apply({file:this.obj.content,height:height,width:width,autostart:(S.options.autoplayMovies?”true”:”false”),controlbar:(S.options.showMovieControls?”bottom”:”none”),backcolor:”0x000000″,frontcolor:”0xCCCCCC”,lightcolor:”0x557722″},S.options.flashVars),params=S.options.flashParams;S.flash.embedSWF(swf,this.id,width,height,version,express,flashvars,params)},remove:function(){S.flash.expressInstallCallback();S.flash.removeSWF(this.id)},onWindowResize:function(){var dims=S.dimensions,el=get(this.id);el.height=dims.innerHeight;el.width=dims.innerWidth}};var qtControllerHeight=16;S.qt=function(obj,id){this.obj=obj;this.id=id;this.height=obj.height?parseInt(obj.height,10):300;if(S.options.showMovieControls){this.height+=qtControllerHeight}this.width=obj.width?parseInt(obj.width,10):500};S.qt.ext=[“dv”,”moov”,”movie”];

AVI FILE using WMP PLUGIN for FIREFOX

<a title=”dognmonkey1a1s.wmv File” href=”/media/teststuff/a8.wmv” rel=”shadowbox[demo]”><img style=”vertical-align: baseline; border: 3px solid black;” title=”WMPlayer” src=”/media/teststuff/tn_cab04_75.JPG” alt=”dognmonkey1a1s.wmv File” width=”250″ height=”141″ />

MOV FILE

<a title=”dognmonkey560b.mov File” href=”/media/teststuff/a8.mov” rel=”shadowbox[demo];height=305;width=560″>

Google Maps

<a title=”Google Map of Sixflags MarineWorld in CA” href=”//maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=1001+Fairgrounds+Dr,+Vallejo,+CA&sll=37.0625,-95.677068&sspn=51.443116,135.263672&ie=UTF8&hq=&hnear=1001+Fairgrounds+Dr,+Vallejo,+Solano,+California+94589&ll=38.146168,-122.226076&spn=0.023625,0.036478&z=14&iwloc=A&output=embed” rel=”shadowbox”>Google Map Of Sixflags Marineworld</a>

Google Map Of Sixflags Marineworld

SHADOWBOX.JS custom mods.

If we plan to use other pop-ups that use rel=”lighbox”, we need to remove all “lightbox” in the shadowbox.js. Edit with notepad++ and search for “^(light|shadow)box”, replace “(lightshadowbox)” with “(shadow)” only.

If we want to have shadowbox starts with slideshow as default but at the PAUSE mode, add “pause” to these slide timer.

var open=false,initialized=false,lastOptions={},slideDelay=0,slideStart,slideTimer;S.current=-1; (org) to var open=false,initialized=false,lastOptions={},slideDelay=0,slideStart,slideTimer=“pause”;S.current=-1;

find the first S.close replace slidetimer = “null” to slidetimer =”pause”

S.close=function(){if(!open){return}open=false;if(S.player){S.player.remove();S.player=null}if(typeof slideTimer==”number”){clearTimeout(slideTimer);slideTimer=null}slideDelay=0

S.close=function(){if(!open){return}open=false;if(S.player){S.player.remove();S.player=null}if(typeof slideTimer==”number”){clearTimeout(slideTimer);slideTimer=”pause”}slideDelay=0

ShadowBox For WordPress

3 Comments

Leave a Reply Cancel reply