How do you use shadowbox in iweb 09

enka · **Joined:** Thu Apr 09, 2009 8:48 pm **Posts:** 10

hello to everyone,

i'm making a site in iweb 09 and i want to play my videos using the shadowbox effect and quick time as a player.

I understand the part that i have to use html snippets in iweb to put the codes inside.
and i have the implemented the shadowbox folder inside my site directory. But the result is that it's not working.
I'm struggling for a weeks now to get it to work and i've searched on internet but there is no tutorial for shadowbox in iweb...

Can someone tell me how to do it correctly?

thanks in advance

gr,
nk

unclejezza · **Joined:** Thu Apr 23, 2009 5:35 pm **Posts:** 11

Hi there,

I have (after much turmoil, blood, sweat and tears!) managed to get shadowbox up and running in an iWeb created site. I use iWeb 08 but this method will work for any version.

Basically, using the html snippet feature will not do you any good here. The reason for this is that you must edit the code on your page AFTER you publish it. There is a shadowbox javascript entry which must be placed in the <head> section of the page/s you wish to use shadowbox on.

This entry must be placed directly AFTER any other javascripts you may be running on your page INCLUDING the native iWeb '<script type="text/javascript" src="Scripts/iWebSite.js"></script>'
The Shadowbox javascript can be found on the shadowbox website but I will paste it here so you can see it:

<link rel="stylesheet" type="text/css" href="shadowbox/shadowbox.css">
<script type="text/javascript" src="shadowbox/shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init();
</script>

Once you have published you iWeb site to a folder, navigate to it and open the 'whateveryourpageis.html' file using a text editing program of your choice (I use Coda but this not a freebie!).
Paste your Shadow box javascript directly after the iWeb javascript. The head section will most probably end up looking something like this:

[color=#0000FF]<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<meta name="Generator" content="iWeb 2.0.4" />
<meta name="iWeb-Build" content="local-build-20090418" />
<meta name="viewport" content="width=900" />
<title>My Shadowbox Page</title>
<link rel="stylesheet" type="text/css" media="screen,print" href="My_Shadowbox_Page_files/My_Shadowbox_Page.css" />

<script type="text/javascript" src="Scripts/iWebSite.js"></script>
<link rel="stylesheet" type="text/css" href="shadowbox/shadowbox.css">
<script type="text/javascript" src="shadowbox/shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init({
language: 'en',
players: [''qt', 'wmp', 'flv']
});
</script> <script type="text/javascript" src="My_Shadowbox_Page_files/My_Shadowbox_Page.js"></script>
</head>

Next, make sure you have placed the entire Shadowbox program (which you would have downloaded from the Shadowbox site) into a folder within your web site files. In the above example, I have called my folder 'shadowbox' just to keep it really simple. You will see this in the above code: href="shadowbox/shadowbox.css">

It's important that both the 'href:' AND 'src:' parts of your shadowbox javascript point to the exact location of your shadowbox folder!

Next, as you want to play quicktime movies, you have to make sure that the shadowbox javascript loads the player/s that you intend to use. Note this line from the above code: players: players: [''qt', 'wmp', 'flv']
In this instance, I have instructed Shadowbox to load the quicktime, windows media player and flash video players although you will only need the 'qt' for quicktime.

Lastly, you will need to change the html of the thumbs on your page to make them links that invoke shadowbox and play your videos. Ideally, you should make the thumbnails of your videos and stick them on your page wherever you like BEFORE doing any of this! Make sure you also have your videos in a folder amongst your website files.

Here is an example of a piece of iWeb html that I turned into a shadowbox quicktime video link:

BEFORE: <div style="height: 110px; width: 120px; height: 110px; left: 89px; position: absolute; top: 623px; width: 120px; z-index: 1; " class="tinyText style_SkipStroke_1">
<img src="My_Shadowbox_Page_files/thumb.png" alt="" style="border: none; height: 110px; width: 120px; " />
</div>

AFTER: <div style="height: 110px; width: 120px; height: 110px; left: 89px; position: absolute; top: 623px; width: 120px; z-index: 1; " class="tinyText style_SkipStroke_1">
<a rel="shadowbox;height=280;width=370;player=qt" href="Media/movie.mov" img src="My_Shadowbox_Page_files/thumb.png" height: 110px; width: 120px<a/>

</div>

You will notice that I added the '<a rel="shadowbox;height=280;width=370;player=qt" which invokes shadowbox with the 'rel=shadowbox' Also to note is that you must enter the height and width of your video here so the box knows how far to open up! You will also see that I used the 'player=qt' which tells shadowbox to use the quicktime player. The href="Media/movie.mov" tag points directly to the video that I want shadowbox to play.

When done, upload it all directly to your server and check it out.... You should have a fully functioning shadowbox iWeb site!

IMPORTANT!
Please remember that if you open your site with iWeb and save some changes, all your shadowbox html will be LOST! iWeb saves over all foreign html so be prudent and make a copy of your entire website which you can use as the editable copy! A Good idea is to make sure you have everything the way you want it BEFORE adding your shadowbox code!

I hope this all makes sense! If not, just let me know and I will try to help you out!

Good Luck!

Jez.

enka · **Joined:** Thu Apr 09, 2009 8:48 pm **Posts:** 10

WOW!

i have been struggling for 2 months now to get it to work, subscribed to 5 or 6 different forums for it and still nothing!
You are the first that gives such an answer! Really thank you so much!
I can't wait to go and try it!

thanks again!

gr,
nik

unclejezza · **Joined:** Thu Apr 23, 2009 5:35 pm **Posts:** 11

No problem! Glad to be of help.... I wish someone could have helped me out also, would have saved me a lot of tears! Let me know how you get on. If you have any problems, just reply here or email and I will help you out if I can

Jez.

enka · **Joined:** Thu Apr 09, 2009 8:48 pm **Posts:** 10

Hey Jez,

it din't work.
As you said i put the shadowbox after any other javascript.
The files i'm trying to play are the following

ark.mp4
i.jpg is the thumb on this video

am i missing something?

here is the code of my entire site
i made the letters blue were you should take a look, so you don't have to search.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<meta name="Generator" content="iWeb 3.0.1" />
<meta name="iWeb-Build" content="local-build-20090425" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta name="viewport" content="width=700" />
<title>Portfolio</title>
<link rel="stylesheet" type="text/css" media="screen,print" href="Nikos_Kandarakis_files/Nikos_Kandarakis.css" />


<script type="text/javascript" src="Scripts/iWebSite.js"></script>
<script type="text/javascript" src="Scripts/Widgets/SharedResources/WidgetCommon.js"></script>
<script type="text/javascript" src="Scripts/Widgets/Navbar/navbar.js"></script>
<script type="text/javascript" src="Scripts/iWebImage.js"></script>
<link rel="stylesheet" type="text/css" href="shadowbox/shadowbox.css">
<script type="text/javascript" src="shadowbox/shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init({
language: 'en',
players: [''qt', 'wmp', 'flv']
});</script>
<script type="text/javascript" src="Nikos_Kandarakis_files/Nikos_Kandarakis.js"></script>
</head>
<body style="background: rgb(56, 56, 56); margin: 0pt; " onload="onPageLoad();" onunload="onPageUnload();">
<div style="text-align: center; ">
<div style="margin-bottom: 0px; margin-left: auto; margin-right: auto; margin-top: 0px; overflow: hidden; position: relative; word-wrap: break-word; background: rgb(56, 56, 56); text-align: left; width: 700px; " id="body_content">
<div style="float: left; height: 0px; line-height: 0px; margin-left: 0px; position: relative; width: 700px; z-index: 10; " id="header_layer">
<div style="height: 0px; line-height: 0px; " class="bumper"> </div>
</div>
<div style="margin-left: 0px; position: relative; width: 700px; z-index: 0; " id="nav_layer">
<div style="height: 0px; line-height: 0px; " class="bumper"> </div>
<div style="height: 1px; line-height: 1px; " class="tinyText"> </div>
<div class="com-apple-iweb-widget-navbar flowDefining" id="widget0" style="margin-left: 0px; margin-top: 24px; opacity: 1.00; position: relative; width: 700px; z-index: 1; ">

<div id="widget0-navbar" class="navbar">

<div id="widget0-bg" class="navbar-bg">

<ul id="widget0-navbar-list" class="navbar-list">
<li></li>
</ul>

</div>

</div>
</div>
<script type="text/javascript"><![CDATA[//><!]]></script>
<div style="clear: both; height: 0px; line-height: 0px; " class="spacer"> </div>
</div>
<div style="margin-left: 0px; position: relative; width: 700px; z-index: 5; " id="body_layer">
<div style="height: 0px; line-height: 0px; " class="bumper"> </div>
<div style="height: 120px; width: 700px; height: 120px; left: 0px; position: absolute; top: 0px; width: 700px; z-index: 1; " class="tinyText">
<div style="position: relative; width: 700px; ">
<img src="Nikos_Kandarakis_files/shapeimage_1.png" alt="" style="height: 120px; left: 0px; position: absolute; top: 0px; width: 700px; " />
</div>
</div>
<div style="height: 1px; line-height: 1px; " class="tinyText"> </div>
<div style="margin-left: 442px; margin-top: 519px; position: relative; width: 258px; z-index: 1; " class="style_SkipStroke shape-with-text flowDefining">
<div class="text-content style_External_258_104" style="padding: 0px; ">
<div class="style">
<p style="padding-top: 0pt; " class="paragraph_style"><span style="line-height: 24px; " class="style_1">Contact</span> <br /></p>
<p class="paragraph_style_1"><br /></p>
<p style="padding-bottom: 0pt; " class="paragraph_style_2">Due to server space I can't host all my work here. Please contact me for a more detailed portfolio at <a class="class1" href="mailto:nikosk@planet.nl" title="mailto:nikosk@planet.nl">nikosk@planet.nl</a></p>
</div>
</div>
</div>

<div id="id1" style="height: 41px; left: 40px; position: absolute; top: 78px; width: 620px; z-index: 1; " class="style_SkipStroke_1 shape-with-text">
<div class="text-content graphic_shape_layout_style_default_External_620_41" style="padding: 0px; ">
<div class="graphic_shape_layout_style_default">
<p style="padding-bottom: 0pt; padding-top: 0pt; " class="Title">Portfolio</p>
</div>
</div>
</div>

<div id="id2" style="height: 65px; left: 163px; position: absolute; top: 172px; width: 211px; z-index: 1; " class="style_SkipStroke_2 shape-with-text">
<div class="text-content graphic_textbox_layout_style_default_External_211_65" style="padding: 0px; ">
<div class="graphic_textbox_layout_style_default">
<p style="padding-top: 0pt; " class="paragraph_style_3">Soundtrack nominated for The Battle contest.<br /></p>
<p class="paragraph_style_3"><br /></p>
<p class="paragraph_style_3">Music composition: Nikos Kandarakis<br /></p>
<p style="padding-bottom: 0pt; " class="paragraph_style_3">Sound design: Nikos Kandarakis</p>
</div>
</div>
</div>

<div id="id3" style="height: 65px; left: 163px; position: absolute; top: 275px; width: 187px; z-index: 1; " class="style_SkipStroke_2 shape-with-text">
<div class="text-content graphic_textbox_layout_style_default_External_187_65" style="padding: 0px; ">
<div class="graphic_textbox_layout_style_default">
<p style="padding-top: 0pt; " class="paragraph_style_3">Soundtrack nominated for STC contest.<br /></p>
<p class="paragraph_style_3"><br /></p>
<p class="paragraph_style_3">Music composition: Nikos Kandarakis<br /></p>
<p style="padding-bottom: 0pt; " class="paragraph_style_3">Sound design: Nikos Kandarakis</p>
</div>
</div>
</div>

<div style="height: 100px; width: 135px; height: 100px; left: 11px; position: absolute; top: 177px; width: 135px; z-index: 1; " class="tinyText style_SkipStroke_3">
<img src="Nikos_Kandarakis_files/o.jpg" alt="" style="border: none; height: 101px; width: 135px; " />
</div>

<div style="height: 108px; width: 135px; height: 108px; left: 11px; position: absolute; top: 280px; width: 135px; z-index: 1; " class="tinyText style_SkipStroke_4 shadow_0"><a rel="shadowbox;height=280;width=370;player=qt" href="Media/ark.mp4" img src="Nikos_Kandarakis_files/i.jpg" height: 108px; width: 135px<a/>
</div>
<div style="height: 0px; line-height: 0px; " class="spacer"> </div>
</div>
<div style="height: 100px; margin-left: 0px; position: relative; width: 700px; z-index: 15; " id="footer_layer">
<div style="height: 0px; line-height: 0px; " class="bumper"> </div>
</div>
</div>
</div>
</body>
</html>

gr,
nik

unclejezza · **Joined:** Thu Apr 23, 2009 5:35 pm **Posts:** 11

Hi Nik,

I think I see the problem. You have to paste your shadowbox js DIRECTLY after the iwebsite.js..... like this:

<script type="text/javascript" src="Scripts/iWebSite.js"></script>
<link rel="stylesheet" type="text/css" href="shadowbox/shadowbox.css">
<script type="text/javascript" src="shadowbox/shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init({
language: 'en',
players: [''qt', 'wmp', 'flv']
});</script>
<script type="text/javascript" src="Scripts/Widgets/SharedResources/WidgetCommon.js"></script>
<script type="text/javascript" src="Scripts/Widgets/Navbar/navbar.js"></script>
<script type="text/javascript" src="Scripts/iWebImage.js"></script>
<link rel="stylesheet" type="text/css" href="shadowbox/shadowbox.css">
<script type="text/javascript" src="shadowbox/shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init({
language: 'en',
players: [''qt', 'wmp', 'flv']
});</script>
<script type="text/javascript" src="Nikos_Kandarakis_files/Nikos_Kandarakis.js"></script>

Give that a try and let me know if it works! The rest of the code looks fine....

Jez.

enka · **Joined:** Thu Apr 09, 2009 8:48 pm **Posts:** 10

Hi Jez

i don't know if it works now because, the thumb link of the video i want to play disappears.
I followed your instructions on how to turn an iWeb html into a shadowbox quicktime video link.

here is the code for that, but it makes the thumb link disappear and i can't find out why....

<div style="height: 108px; width: 135px; height: 108px; left: 11px; position: absolute; top: 280px; width: 135px; z-index: 1; " class="tinyText style_SkipStroke_4 shadow_0"><a rel="shadowbox;height=280;width=370;player=qt" href="Media/ark.mp4" img src="Nikos_Kandarakis_files/i.jpg" height: 108px; width: 135px<a/>
</div>

gr,
nik

unclejezza · **Joined:** Thu Apr 23, 2009 5:35 pm **Posts:** 11

Have you adjusted the positioning of your shadowbox javascript as I mentioned in my previous post?

If yes, then please post the full page code here as before and I will tinker with it from here and see if I can fix it...

Jez.

unclejezza · **Joined:** Thu Apr 23, 2009 5:35 pm **Posts:** 11

oooooh, I just noticed you missed out a quotation mark here (I have made it red so you can see it!):

<div style="height: 108px; width: 135px; height: 108px; left: 11px; position: absolute; top: 280px; width: 135px; z-index: 1; " class="tinyText style_SkipStroke_4 shadow_0"><a rel="shadowbox;height=280;width=370;player=qt" href="Media/ark.mp4" img src="Nikos_Kandarakis_files/i.jpg" height: 108px; width: 135px"<a/>
</div>

That would def cause problems!! Try fixing that first...... It's very important to double and triple check your code as the smallest mistake can cause big big problems!

Let me know if that worked...

Jez.

enka · **Joined:** Thu Apr 09, 2009 8:48 pm **Posts:** 10

hello again,
hehe i missed the quotation cause you missed it in your post

now i got to see the thumb again but it's not linking to the file...
i also get a message in safari: "This one gets the player HTML"

i've attached a screenshot so you see what i mean.
btw the it's the pic with the "green man"

and here is the whole code

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<meta name="Generator" content="iWeb 3.0.1" />
<meta name="iWeb-Build" content="local-build-20090425" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta name="viewport" content="width=700" />
<title>Portfolio</title>
<link rel="stylesheet" type="text/css" media="screen,print" href="Nikos_Kandarakis_files/Nikos_Kandarakis.css" />


<script type="text/javascript" src="Scripts/iWebSite.js"></script>
<link rel="stylesheet" type="text/css" href="shadowbox/shadowbox.css">
<script type="text/javascript" src="shadowbox/shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init({
language: 'en',
players: [''qt', 'wmp', 'flv']
});</script>
<script type="text/javascript" src="Scripts/Widgets/SharedResources/WidgetCommon.js"></script>
<script type="text/javascript" src="Scripts/Widgets/Navbar/navbar.js"></script>
<script type="text/javascript" src="Scripts/iWebImage.js"></script>
<link rel="stylesheet" type="text/css" href="shadowbox/shadowbox.css">
<script type="text/javascript" src="shadowbox/shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init({
language: 'en',
players: [''qt', 'wmp', 'flv']
});</script>
<script type="text/javascript" src="Nikos_Kandarakis_files/Nikos_Kandarakis.js"></script>

</head>
<body style="background: rgb(56, 56, 56); margin: 0pt; " onload="onPageLoad();" onunload="onPageUnload();">
<div style="text-align: center; ">
<div style="margin-bottom: 0px; margin-left: auto; margin-right: auto; margin-top: 0px; overflow: hidden; position: relative; word-wrap: break-word; background: rgb(56, 56, 56); text-align: left; width: 700px; " id="body_content">
<div style="float: left; height: 0px; line-height: 0px; margin-left: 0px; position: relative; width: 700px; z-index: 10; " id="header_layer">
<div style="height: 0px; line-height: 0px; " class="bumper"> </div>
</div>
<div style="margin-left: 0px; position: relative; width: 700px; z-index: 0; " id="nav_layer">
<div style="height: 0px; line-height: 0px; " class="bumper"> </div>
<div style="height: 1px; line-height: 1px; " class="tinyText"> </div>
<div class="com-apple-iweb-widget-navbar flowDefining" id="widget0" style="margin-left: 0px; margin-top: 24px; opacity: 1.00; position: relative; width: 700px; z-index: 1; ">

<div id="widget0-navbar" class="navbar">

<div id="widget0-bg" class="navbar-bg">

<ul id="widget0-navbar-list" class="navbar-list">
<li></li>
</ul>

</div>

</div>
</div>
<script type="text/javascript"><![CDATA[//><!]]></script>
<div style="clear: both; height: 0px; line-height: 0px; " class="spacer"> </div>
</div>
<div style="margin-left: 0px; position: relative; width: 700px; z-index: 5; " id="body_layer">
<div style="height: 0px; line-height: 0px; " class="bumper"> </div>
<div style="height: 120px; width: 700px; height: 120px; left: 0px; position: absolute; top: 0px; width: 700px; z-index: 1; " class="tinyText">
<div style="position: relative; width: 700px; ">
<img src="Nikos_Kandarakis_files/shapeimage_1.png" alt="" style="height: 120px; left: 0px; position: absolute; top: 0px; width: 700px; " />
</div>
</div>
<div style="height: 1px; line-height: 1px; " class="tinyText"> </div>
<div style="margin-left: 442px; margin-top: 519px; position: relative; width: 258px; z-index: 1; " class="style_SkipStroke shape-with-text flowDefining">
<div class="text-content style_External_258_104" style="padding: 0px; ">
<div class="style">
<p style="padding-top: 0pt; " class="paragraph_style"><span style="line-height: 24px; " class="style_1">Contact</span> <br /></p>
<p class="paragraph_style_1"><br /></p>
<p style="padding-bottom: 0pt; " class="paragraph_style_2">Due to server space I can't host all my work here. Please contact me for a more detailed portfolio at <a class="class1" href="mailto:nikosk@planet.nl" title="mailto:nikosk@planet.nl">nikosk@planet.nl</a></p>
</div>
</div>
</div>

<div id="id1" style="height: 41px; left: 40px; position: absolute; top: 78px; width: 620px; z-index: 1; " class="style_SkipStroke_1 shape-with-text">
<div class="text-content graphic_shape_layout_style_default_External_620_41" style="padding: 0px; ">
<div class="graphic_shape_layout_style_default">
<p style="padding-bottom: 0pt; padding-top: 0pt; " class="Title">Portfolio</p>
</div>
</div>
</div>

<div id="id2" style="height: 65px; left: 163px; position: absolute; top: 172px; width: 211px; z-index: 1; " class="style_SkipStroke_2 shape-with-text">
<div class="text-content graphic_textbox_layout_style_default_External_211_65" style="padding: 0px; ">
<div class="graphic_textbox_layout_style_default">
<p style="padding-top: 0pt; " class="paragraph_style_3">Soundtrack nominated for The Battle contest.<br /></p>
<p class="paragraph_style_3"><br /></p>
<p class="paragraph_style_3">Music composition: Nikos Kandarakis<br /></p>
<p style="padding-bottom: 0pt; " class="paragraph_style_3">Sound design: Nikos Kandarakis</p>
</div>
</div>
</div>

<div id="id3" style="height: 65px; left: 163px; position: absolute; top: 275px; width: 187px; z-index: 1; " class="style_SkipStroke_2 shape-with-text">
<div class="text-content graphic_textbox_layout_style_default_External_187_65" style="padding: 0px; ">
<div class="graphic_textbox_layout_style_default">
<p style="padding-top: 0pt; " class="paragraph_style_3">Soundtrack nominated for STC contest.<br /></p>
<p class="paragraph_style_3"><br /></p>
<p class="paragraph_style_3">Music composition: Nikos Kandarakis<br /></p>
<p style="padding-bottom: 0pt; " class="paragraph_style_3">Sound design: Nikos Kandarakis</p>
</div>
</div>
</div>

<div style="height: 100px; width: 135px; height: 100px; left: 11px; position: absolute; top: 177px; width: 135px; z-index: 1; " class="tinyText style_SkipStroke_3">
<img src="Nikos_Kandarakis_files/o.jpg" alt="" style="border: none; height: 101px; width: 135px; " />
</div>

<div style="height: 108px; width: 135px; height: 108px; left: 11px; position: absolute; top: 280px; width: 135px; z-index: 1; " class="tinyText style_SkipStroke_4 shadow_0"><a rel="shadowbox;height=280;width=370;player=qt" href="Media/ark.mp4" img src="Nikos_Kandarakis_files/i.jpg" height: 108px; width: 135px"<a/>
</div>
<div style="height: 0px; line-height: 0px; " class="spacer"> </div>
</div>
<div style="height: 100px; margin-left: 0px; position: relative; width: 700px; z-index: 15; " id="footer_layer">
<div style="height: 0px; line-height: 0px; " class="bumper"> </div>
</div>
</div>
</div>
</body>
</html>

gr,
nik