NUCLEUSCMS...building.websites.blogs.w.nucleuscms

AUDIS NUCLEUS Techstuff pinkhouse ltooz

Translate

Latest Entries

« Multiple Blogs In Nucleus CMS   Powerpoint For NucleusCMS »

Feb
08
2010

NP_ShadowBox.zip

BackTo: PLUGINS | Viewed: 6428 times | print

Due to "Shadowbox license expressly prohibits such redistribution" the plugin download is no longer available. Sorry. The only way to have this plugin is for you to create one yourself for your nucleuscms system...

Create your own ShadowBox303 plugin (ie8 only works if compatibility mode is OFF, ie8 doesn't work if compatibility is ON, MS always creates more options & problems to web developers. We can force all ie8 users on... ... our website to be in standard mode (compatibility disable) so it will work with shadowbox. The compatibility button will never appear on ie8 as long as it's on our website so our users can't accidently click on that button, ever.

Add this line to the head of our page, in the head.inc or head.php or between the <head>...</head> of html

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8"/>

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8"/>

Since the shadowbox has been updated frequently in the last few weeks, this one is for version 3.0.3, please go there to download all the files, make sure you select the base stand alone version and all the options available (check all)

tag

Unzip this zip file, you will get a folder "shadowbox3.0.3/shadowbox3.0.3", get the inside folder (the folder that has all the files) and rename it to "shadowbox303", move this whole folder to your nucleus plugins folder (http://yourdomain.com/yournucleus/nucleus/plugins/). Now we need the NP_ShadowBox303.php.zip, download and unzip the file to the main plugin folder (NOT inside shadowbox303 folder), for the thumbnails, you need this thumbnail.php.zip, and all the buttons I used on my website here (if you are using these buttons, you must use this modified shadowbox.css, just copy and paste to a notepad and save it as shadowbox.css or download this), download and unzip it to the "shadowbox303" folder (INSIDE shadowbox303).

Now go to admin page, you will see the NP_ShadowBox303 plugin, and install it like normal if you have the old version, uninstall it first. This version 3.0.3 seems to have the JWplayer in it already. Go back to the ShadowBox plugin for usage. For all the CSS3 glowing outline, I edited the shadowbox.css, you can use it as reference or use the original one downloaded.  I'm using the modified the 3.0.3 because it's simpler, but like I said, if it works don't fix it, you can stay with the 3.0.1 for now. 

Again, this NP_ShadowBox303 plugin will consist of 2 files: NP_ShadowBox303.php and thumbnail.php (inside shadowbox folder) and 1 folder "shadowbox303" and all must be inside http://yourdomain.com/yournucleus/nucleus/plugins/ directory. For usage just close the shadowbox on this page it will take you back to ShadowBox pluginIn order for this NP_ShadowBox.php to work, remember to place <%ShadowBox303%> between <head> and </head> of your skin's head.inc, head.php... etc.

SOME IMPORTANT shadowbox.js MODS.

Make a copy of the original shadowbox.js to shadowbox_org.js, now use the notepad++ to edit the shadowbox.js.

lightbox options: If you plan to use any other pop-ups plugins that use "lightbox" like MediaboxAdv or Lightbox2, it will default to shadowbox because shadowbox.js has this command built-in. We need to remove the option inside the shadowbox.js file. Edit the shadowbox.js with notepad++ and replace all "light|shadow" with "shadow". There should be 2 replacements.

Quicktime display problems (black screen and only audio): Again, at notepad++ search for "scale: "aspect"' and delete it completely, make sure one "," still there.

Set new default sizes for all players: If you don't want to set the size everytime you add a player, the default size is 300x300, you can change the default size in shadowbox.js also. Again, at notepad++ editing shadowbox.js, search for all "obj.width=" make sure it's for a player with obj.height=, change the number in pixel, for average size of the player 16x9, the obj.width=560 and obj.height=340, but you can change to any sizes you want.

CSS3 Borders

For those who want to be fancy and put the css3 glowing borders, then just edit the "shadowbox.css" as follow and note that all ie6,7,8 browsers don't support at this time only FIREFOX, SAFARI, CHROME, OPERA  10.5+ and late IE9.

For CSS3 to work with OPERA we need to add

box-shadow: for border shadow and box-border: for rounded corner. Just look at the modified shadowbox.css above.

adding glowing border css3 for shadowbox.css

To change the overlay color default from #000 = black to any other color, edit "shadowbox.js" file with notepad++, search for "overlay" until the end of the file, you can change #000, and the opacity to .9 = almost max.

change overlay and opacity in shadowbox

Change default player for MP4, MOV to JWPLAYER  and AVI, MPG, MPEG to WMP instead of Quicktime player since quicktime player never seem to detect the size correctly and the controller is always missing or cut off. Again, edit "shadowbox.js" with notepad++, search for ".mov" and find all the players, just move the file extension "mov","mp4" from qt to flv, avi,mpg from qt to wmp.

change default players in shadowbox

***To have the fullscreen option for youtube that works on Shadowbox***

"player=swf" and "fs=1" must be added in the codes for the youtube fullscreen button to work!!!

href="http://www.youtube.com/v/PQh4MTyRMjQ&amp;fs=1" rel="shadowbox;height=360;width=600;player=swf"

***To Start Shadowbox3.0.3 In Paused Mode With Slideshow Play Option***

The NP_ShadowBox.php already load the options slideshow automatically, but shadowbox will play slideshow everytime the groups are enabled. To start it in "pause" mode, we need to edit (modify) the shadowbox.js as follows.

The first few lines will have "slideTimer;", replace it with "slideTimer="pause";"


Search for "S.close" function and replace the slideTimer=null to slideTimer="pause"

The new and improve iFrame from Youtube which supports html5 & iphone codes

<p style="text-align: center;"><a rel="shadowbox;width=500;height=335" href="http://www.youtube.com/embed/sPNzD--giVE" title="Snow 2010">YouTube iFrame</a></p>

With modified shadowbox.css, we can have more text displayed in the title like this one.

Youtube in iFrame

When everything is done, re-save and test.

For alternative pop-up scripts, please go here.


Cheers,

Louis

BackTo: PLUGINS

« Multiple Blogs In Nucleus CMS   Powerpoint For NucleusCMS »

 



Your comments will be reviewed before published.