iWeb 09 ShadowBox.js Demo: Flash Player with .MOV Movie

This is to test out the ShadowBox.js 3 script to use it in iWeb. With our Custom Flash Player, while making a few adjustments to the main file. The page we will need to edit is our actual page that is showing so this will be ShadowBox.js.html and some coding as well. If you would like to download the original files from the developer here is his site link.

ShadowBox.js 3: http://www.mjijackson.com/shadowbox/index.html

Please be sure to save your work to a folder and keep a backup copy especially if you resave or upload your site to mobile me.

STEP 1: Now this step requires you to use the HTML Sniipet Widget, so we will put in our code that we will be using in this example. Keep in mind that this code is actually linked to a html page which I will show as the last step cause it’s so long, but you should already have it done prior to testing everything out.

STEP 2: Save your work to a FOLDER. Here is my current markup of the code I used in the HTML Snippet: We will need to open up our html page which in my case is Shadowbox.js.html in a html editor. Run a search for this line.

STEP 3: Now directly below that line of text is where you will insert the script code shown below for shadowbox, if you place it anywhere else it will not work. Original credit for the above line goes to unclejezza over at iwebfac.org however that is where I stopped and then started out on my own.

Shadowbox.init({

language: 'en',

players: ['img', 'html', 'iframe', 'qt', 'wmp', 'swf', 'flv']

});

</script>

STEP 4: If you only inserted one video to be displayed then in the folder you saved your work to you will find a page titled widget0_markup.html so basically in the html page we created you will run a search for widget0 so on and so on if you added multiple videos.

Find this line of text,.....

var widget0_htmlMarkupURL = ".//ShadowBox.js_files/widget0_markup.html";

//--><!]]></script>

Replace with the code we used in the HTML Snippet,.....

STEP 5: Save your work & upload the newly edited pages to your website or mobile me account. Again make sure you save a copy of it cause it your re-save your iweb page it will erase all your work you just did.

The code below is from the html page I created that was linked to the HTML Snippet I used. However you can link to your video in many different ways I just choose to do it this way.

Now the actual HTML PAGE that I’m linking to is marked up like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Join .VOB Files</title>

</head>