I played with the shadowbox 3.0.1RC a few weeks ago and I really liked it. I modified the NP_LightBox2 to NP_ShadowBox and I got it to work for my blogs. I don't know much about codes, but I modified so I can use it efficiently. Anywho, after trials and errors and gathered information on the Internet on how to "shadowbox", I ironed out all the bugs and here it is... ... and it does even work with ie6 (the most popular but extremely hard to please browser). For those who wants to use it in an html webpage, go here .
Can't display text file with black text with black background. Can't figure out how to change the background color on the fly yet.
Modified Scripts to eliminate conflicts with LightBox2 plugins (rel="lightbox" used to work in shadowbox), without modifications, the shadowbox displays on top of the lightbox2 display.
NP_ShadowBox Usage
This plugin needs to include all the Shadowbox files & JW player5 files necessary to use, you need to download and configure since they can't be included in the plugin due to redistribution rights. Everyone needs to download the files him/herself.
To create this plugin go to NP_ShadowBox.zip
Load the NP_ShadowBox.zip to "yourweb/yournucleus/nucleus/plugins/" folder and extract.
You will have 1 folder "shadowbox" and 1 file "NP_ShadowBox.php" after extracted in plugins folder
Now we can go to the admin page to install the plugin
Then we can go to options to set up
Admin option
Now go to the head.inc (php) of every skin we have in our blogs to add <%ShadowBox%> between <head> and </head>. Make sure "S" and "B" are higher case.
Now we're ready to use the easiest overlay pop up plugin (IMHO) so far.
DISPLAYING PICTURES
So, the default root folder for all pictures and medias is set @ "http://yoursite/yournucleus/media/" as in the option we set. We put an image folder named "pictures" in "media" directory. If we want to display all pictures in this "pictures" directory with thumbnails =150px as we set it in option. We just need to place the code
"@"<%ShadowBox(pictures)%>
Since we're using tinymce editor, don't forget to put @ in front of "<"
If we want to display only 1 picture in the folder or any url then we just place the ulr and the name of the picture.
"@"<%ShadowBox(pictures/snow1.JPG)%>
If we want to display all pictures in a folder with only 1 thumbnail, we only need to place the image# that we want to display in the code
"@"<%ShadowBox(pictures(1))%>
The first picture in the folder will be the thumbnail for the folder.
***To Start The ShadowBox In PAUSED Mode Instead Of Default Autoplay For Version 3.0.1RC (the one that display pdf files)***
search for "slide_timer," or "init_options" near the bottom of the file, replace it with "slide_timer="paused","
When done editing, re-save the shadowbox.js file and the shadowbox should start in PAUSED mode.
ALL OTHER STUFF
ShadowBox is designed to work with links, any kind of links, pictures or text. It's extremely simple to use. For our NucleusCMS system, we will have to use tinymce html option everytime we want to use ShadowBox plugin for all other stuff besides images.
DISPLAY URL with TEXT LINK
in html editor
<p style="text-align: center;"><span style="font-family: comic sans ms,sans-serif; font-size: small;"><i><a href="http://ltooz.com/ltooz341/blog/nucleuscms" >This blog</a></i></span></p>
<p style="text-align: center;"><span style="font-family: comic sans ms,sans-serif; font-size: small;"><i>in html editor</i></span></p>
in the href="http://ltooz.com/ltooz341/blog/nucleuscms" add 'rel="shadowbox"' and it will look like this
<p style="text-align: center;"><span style="font-family: comic sans ms,sans-serif; font-size: small;"><i><a href="http://ltooz.com/ltooz341/blog/nucleuscms" rel="shadowbox">This blog</a></i></span></p>
<p style="text-align: center;"><span style="font-family: comic sans ms,sans-serif; font-size: small;"><i>in html editor</i></span></p>
update and edit the item and the link will display with shadowbox.
DISPLAY URL with IMAGE LINK
In html editor
<p style="text-align: center;"><a href="/ltooz341/blog/nucleuscms" rel="shadowbox"><img style="vertical-align: baseline;" src="/ltooz341/media/nucleusplugins/thisblog.jpg" width="400" height="91" /></a></p>
Again 'rel="shadowbox"' is placed after the href="..." line.
So, the idea is to place (rel="shadowbox") after any (href="...") and we're in business. Isn't that easy or what? Now how about make it a defined size instead of full size by default, just add height and width in the (rel="shadowbox;height=500;width=700") they're in pixels of course.
DISPLAY PDF FILE
Shadowbox claims NOT supporting PDF files but our NucleusCMS makes it works extremely well ONLY in version 3.01RC and NOT in current V3.03.
PDF FILE display in html editor codes, again just add the rel="shadowbox" after href=".." the url of the pdf file.
<a href="/testvideos/lockcoding.pdf" rel="shadowbox;height=500;width=800"><img style="vertical-align: baseline;" src="/ltooz341/media/nucleusplugins/pdf.jpg" width="300" height="120" /></a>
We're setting the size of the shadowbox to be 500x800 instead of default FULLSCREEN.
VIDEOS
The best part about shadowbox is the ability to have pop up video players and again using links with (rel="shadowbox;height=?;width=?") 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 VIDEOS
YOUTUBE VIDEO in HTML editor
<a title="youtube video" href="http://www.youtube.com/v/YUqMBa21rBk;fs=1;autoplay=1" rel="shadowbox;height=350;width=550"><img style="vertical-align: baseline;" src="/ltooz341/media/nucleusplugins/youtube.jpg" width="300" height="200" /></a>
size 350x550 defined for youtube player, default FULL SCREEN youtube player is used if NOT defined.
Now we can see the height & width were defined and url for the youtube, the "watch?" changed to "/" and also the "v=" changed to "v/" for playing the video only, not displaying the whole youtube page. To have a fullscreen option with youtube, we need to place "&fs=1" after youtube url and "player=swf" after "rel="shadowbox;height,width" like this (should only use for hd youtube videos): <a title="youtube video" href="http://www.youtube.com/v/YUqMBa21rBk&fs=1" rel="shadowbox;height=350;width=550;player=swf">
MP4 FILE with QUICKTIME
MP4 Quictime Player: In html editor we didn't specify the height & width, using default size @300x500
<a title="Play MP4 File" href="/testvideos/ltooz560b.mp4" rel="shadowbox"><img style="vertical-align: baseline;" src="/testvideos/ltooz560b.png" width="300" height="170" /></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.
WMV FILE using WMP PLUGIN for FIREFOX
AVI FILE using WMP PLUGIN for FIREFOX
MPEG2 FILE using WMP
FLV JWPLAYER