Shadowbox Take 2 – screencast and demo (approx 13minutes)

ShadowBox – advanced integration
Developers Site: http://mjijackson.com/shadowbox/ (no relation to the singer :) )

So what ?
This readme covers the hard coded integration for ShadowBox and to have this available in all your pages, if you require :)
Here you can see the demo page with the finished result. This also works with Blocks, Accordion and Carousel (well partially :( ) and even Pluskit import.. how cool is that!

Integrating to RapidWeaver!
After my first try, I though I needed to do something a bit more integrated so it is used on all pages (thanks to seemore for the hint). just to recap some basics, shadowbox will use the Mootools 1.11 framework which should keep things tidy with all the other Mootools related plugins that are produced by YourHead.

I will walk though all this in the screencast …. so please watch (feel free to pause at any time) read through compare notes and what is actually happening on the screencast and then finally you can use this in your Theme of choice :)

First of all
- Duplicate your Theme (Ctrl- Click Duplicate) and give it a name

- download(see below download files in the comments) the files that we are going to add in the Theme contents , add all the files (except the readme) from the Shadowbox folder into the duplicated Theme contents, this includes the javascript, the images and Jeroens FLV player.
Open the Themes.plist in your text editor (I’m using Textmate)
Things to add to the Theme.plist see image below
        loading.gif
        overlay-85.png
        mootools.js
        shadowbox-mootools.js
        shadowbox.js
        shadowbox.css
        flvplayer.swf
Figure 1.

Add the javascript Header information following RapidWeaver conventions. This includes the relevant information for your pages to find the mootools, shadowbox javascript and shadowbox css. In addition it also initialises the shadowbox with extra path information to find the images and flvplayer as you can see below.

    <script type=“text/javascript” src=“%pathto(mootools.js)%”>script>
    <script type=“text/javascript” src=“%pathto(shadowbox-mootools.js)%”>script>
    <script type=“text/javascript” src=“%pathto(shadowbox.js)%”>script>
    <script type=“text/javascript”>
                    window.addEvent(‘domready’,function(){
            var options = {
                loadingImage:‘%pathto(loading.gif)%’,
                flvPlayer:‘%pathto(flvplayer.swf)%’,
                overlayBgImage:‘%pathto(overlay-85.png)%’,
            };

            window.addEvent(Shadowbox.init(options));
                    });
    script>

Screenshot of what it should look like
figure 2.

Add the following to find the shadowbox css
rel=“stylesheet” type=“text/css” media=“screen” href=“%pathto(shadowbox.css)%”  />

Screenshot again
Figure 3.

-Install the snippets I have created first of all from the download pack
Create a new project or Test Page
- Add the ShadowBox JS Header to the Header Section in the Page Inspector

Looks like we are good to go so lets add a page to our ShadowBox modified Theme and see if it works.
As a note this will work in preview mode and export also.

To call a Shadowbox (without going into too much detail) just add shadowbox to the rel tag. You can see more at the developers site :)

Some examples… it is worth noting you can change the default size at initialisation. Web page content goes full size :)
Figure 4.

Change size of Shadowbox, using a FLV asset
Figure 5.