View Full Version : Help me put shadowbox into my site please...

Feb 27th, 2009, 10:19 AM
I have this simple site to show off my music and art. I want to use shadowbox to display vimeo videos but simply cannot work out how to integrate it into dreamweaver.

Can someone please put it in for me on the music page for the 4 small images?

site is in a zip file here:


Otherwise if it can be put into laments terms I hope to work it out...

Feb 27th, 2009, 02:29 PM
Hi kittt,

As JC recommended (http://codingforums.com/showpost.php?p=786495&postcount=2), please either post your code (in [CODE][/CODE] tags) or post a link to your page (preferred). Making us download a zip file just to view your code is very tiresome and it makes it more difficult for us to use our browser-based debugging tools. Help us help you.

but simply cannot work out how to integrate it into dreamweaver

I don't know if you're coding by hand by chances are that's what you're going to have to do in order to integrate Shadowbox into your page. Dreamweaver is a tool that helps you create pages which use the Shadowbox script, but you don't put Shadowbox "into" Dreamweaver.

Again, post a link to your page or your full code (in [CODE][/CODE] tags) and we'll see if we can put it in layman's terms. We're good at that. :D

Feb 27th, 2009, 04:56 PM
<title>WebDesignHelper.co.uk - Page Template 81</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="description" content="FW MX DW MX HTML">

<script language="JavaScript" type="text/JavaScript">
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
<link href="ssheet1.css" rel="stylesheet" type="text/css">
<body bgcolor="#666666" topmargin="50" marginheight="50">
<div align="center">
<table border="0" cellpadding="0" cellspacing="0" width="701">

<!-- Shim row, height 1. -->
<td width="700"><img src="images/spacer.gif" width="700" height="1" border="0" alt=""></td>
<td width="10"><img src="images/spacer.gif" width="1" height="1" border="0" alt=""></td>
<!-- row 1 -->
<td><img src="images/about_r1_c1.gif" alt="" name="about_r1_c1" width="700" height="36" border="0" usemap="#about_r1_c1Map"></td>
<td><img src="images/spacer.gif" width="1" height="36" border="0" alt=""></td>
<!-- row 2 -->
<td><img name="about_r2_c1" src="images/about_r2_c1.gif" width="700" height="15" border="0" alt=""></td>
<td><img src="images/spacer.gif" width="1" height="15" border="0" alt=""></td>
<!-- row 3 -->
<td><img name="about_r3_c1" src="images/about_r3_c1.gif" width="700" height="12" border="0" alt=""></td>
<td><img src="images/spacer.gif" width="1" height="12" border="0" alt=""></td>
<!-- row 4 -->
<td height="205" align="left" valign="top" background="images/about_r3_c1.gif"><blockquote class="maintxt">
<table width="640" border="0" align="left">
<td width="272"><span style="visibility:visible;">
<embed src="http://assets.myflashfetish.com/swf/mp3/mp3player.swf" quality="high" wmode="transparent" flashvars="myid=3278667&path=2007/07/10&mycolor=919191&mycolor2=B8B8B8&mycolor3=&autoplay=false&rand=0&f=4&vol=100&pat=0&grad=false" width="270" height="298" name="myflashfetish" align="middle"type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" border="0"/>
<td width="286"><table width="41%" border="0">
<td width="42%"><div align="center"><img src="content/hope_of_ruins.jpg" width="138" height="104"></div></td>
<td width="58%"><div align="center"><img src="content/germart.jpg" width="138" height="104"></div></td>
<td><div align="center"><img src="content/germ.jpg" width="138" height="104"></div></td>
<td><div align="center"><img src="content/figment.jpg" width="138" height="104"></div></td>

<p><span style="visibility:visible;"><br>
<td><img src="images/spacer.gif" width="1" height="205" border="0" alt=""></td>
<!-- row 5 -->
<td><img name="about_r5_c1" src="images/about_r5_c1.gif" width="700" height="28" border="0" alt=""></td>
<td><img src="images/spacer.gif" width="1" height="28" border="0" alt=""></td>
<map name="about_r1_c1Map">
<area shape="rect" coords="514,15,550,32" href="page_template_example81.html" target="_self" alt="MAIN">
<area shape="rect" coords="556,16,587,31" href="about.html" target="_self">
<area shape="rect" coords="593,15,620,32" href="profile.htm" target="_self">
<area shape="rect" coords="625,16,681,33" href="portfolio.htm" target="_self">
<map name="Map">
<area shape="rect" coords="10,8,80,43" href="#" alt="LINK TO YOUR WEB PORTFOLIO">
<map name="Map2">
<area shape="rect" coords="9,10,84,45" href="#" alt="LINK TO YOUR PRINT PORTFOLIO">
<map name="Map3">
<area shape="rect" coords="3,11,92,45" href="#" alt="LINK TO YOUR MEDIA PORTFOLIO">
<!--Do not remove this comment - site by jerryc [email protected] - email me if you need help with this template - if i have time i'll help you out - the image was downloaded from www.deviantart.com and may be used for non-commercial projects - i take no responsibility if you use the image for any other purposes. -->

Feb 27th, 2009, 04:59 PM
please bear in mind I didnt write this. I just took this code and modified in the design panel...

Feb 27th, 2009, 05:29 PM
Hi kittt,

Okay. Frankly, that page is a coding disaster. I'm relieved you didn't code it. It has a slew of issues (no DOCTYPE (http://www.alistapart.com/articles/doctype/); invalid (http://validator.w3.org/docs/why.html), non-semantic markup (http://www.boagworld.com/technology/semantic_code_what_why_how/) using tables for layout (http://phrogz.net/css/WhyTablesAreBadForLayout.html)) and is actually pretty state-of-the-art for 1997. Rather than using a tool like Dreamweaver which lets you get by in design view without learning the nuts and bolts of how your page actually works, consider learning how to build a page using semantic, modern XHTML and CSS (http://www.w3schools.com/).

To proceed with adding a flashy element like Shadowbox is kind of like putting 20" chrome rims and a spoiler on a car whose engine is falling apart. First fix the engine (code your page well), then add the "bling" (the more sophisticated effects). Otherwise it's just putting lipstick on a pig.

That said, the Usage link (http://mjijackson.com/shadowbox/doc/usage.html) on the Shadowbox site (http://mjijackson.com/shadowbox/) has a great step-by-step walk-through on how to integrate the script. It looks like it's not much more complex than downloading the required files, adding the links to the head of your HTML file, e.g.:

<script type="text/javascript" src="shadowbox-base.js"></script>
<script type="text/javascript" src="shadowbox.js"></script>
<script type="text/javascript">

Shadowbox.loadSkin('classic', 'my/skin/dir'); // use the "classic" skin
Shadowbox.loadLanguage('en', 'my/lang/dir'); // use the English language
Shadowbox.loadPlayer(['img', 'qt'], 'my/player/dir'); // use img and qt players

window.onload = Shadowbox.init;


and calling the script in the body of your page:

<a href="mymovie.swf" rel="shadowbox;height=140;width=120">My Movie</a>

As far as obtaining links to Vimeo videos to put in the link tags, their site should have some documentation on that as well.