iWeb Tip #19 – Shadowbox in iWeb

126
24473

Shadowbox in iWebSo I know that I have done 3 other tips similar to this one (Fancyzoom, Highslide, and Lytebox) and I thought I was done posting tips about the fanzy popup realm, but when I found this effect I just had to post it.  This in my opinion in the mother of all popup effects.  Why? Because it supports so many formats natively to it.  You can do, of course image, but it can also do swf’s, html, flv’s, YouTube, mov (Quicktime), even wmv (windows media), and more.  It’s fantastic and works pretty much just like the other effects.  So if you have done my other fancy popup tutorials than you will kindof already understand how this one works.  But here goes the tutorial on how to do it.

View Demo of Shadowbox in iWeb »

Step 1) Make a page in iWeb and add links to your media in one of the following ways:

  • Images: Drop an image on your page and enable as a hyperlink from the hyperlink inspector and link to “a file” and choose the same image (preferably a higher res version of the photo, at least 800 x 600).
  • SWF’s (Flash Files): Drop an image to represent the swf (could be an image, a shape, text, you could even launch your swf and do a screen capture (command + shift + 4) and drag over it to get an image to add in.)  Basically just get something that will be clickable that we can link to the swf.  After adding that image or whatever enable it as a hyperlink and link to the swf file itself.
  • HTML: Simply enable as a hyperlink your image, shape, text to an external page.
  • FLVs (Flash Video): Same as the swf, get/make a graphical representation of the video (an image, shape, or text) and enable it as a hyperlink and link to “A File” and choose the .flv file.
  • QuickTime: Same as the FLV and SWF.  Get/make a graphical representation of the video (an image, shape, or text) and enable it as a hyperlink and link to “A File” and choose the .mov file.
  • WMV (Windows Media Video): Same as the FLV,SWF, and MOV.  Get/make a graphical representation of the video (an image, shape, or text) and enable it as a hyperlink and link to “A File” and choose the .wmv file.
  • YouTube: Get/make a graphical representation of the video (an image, shape, or text) and enable it as a hyperlink and link to an external page.  Copy the you tube URL from you tube and paste it in URL field in iWeb hyper link inspector.  Then here your going to do one more step.  You need to alter the URL just slightly.  Your YouTube video code will look like something like this: https://www.youtube.com/watch?v=qKiIm5EcQ7A you need to alter it so it looks like this: https://www.youtube.com/v/qKiIm5EcQ7A, basically you delete the “watch?”, put a slash after the v, and get rid of the “=” sign. If you don’t do this your YouTube video for this effect won’t work.  So this is an important step for you YouTube users.
  • This effect works with many other video services like Vimeo, Google Video, Yahoo Video, etc.  For those sites you don’t need to alter the code like the YouTube, simply make a graphical representation for them and link them to an external page with the URL of the video in it.

Step 2) Publish your iWeb file to a folder, MobileMe, or FTP

Step 3) Download the Shadowbox .zip file by clicking the download link at the top of this page or click here ».

Step 4) Unzip the shadowbox.zip file (if your mac didn’t unzip it for you), and drop the folder called “shadowbox” into your site folder.  Not your page folder, your site folder.  You want the shadowbox folder to be right next to your html page.

Step 5) Open your html page (the one with your hyperlinks of course) with an HTML editor.  I prefer to use Coda, but again you could use an array of other ones out there (Espresso, TextWrangler, Even TextEdit)(if you use text edit be sure to check the checkbox in the textedit prefs that says ignore rich text commands in html files).

Step 6) Add this code before the </head> tag of your HTML page:

<!-- Start of Shadowbox Code -->

<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({

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

});

</script>

<!-- End of Shadowbox Code -->


OR you could also just do a find and replace by finding:

</head>

and replace with

<!-- Start of Shadowbox Code -->

<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({

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

});

</script>

<!-- End of Shadowbox Code -->

</head>


Where it says players, go ahead and delete any/all the players that you don’t need.  So for example if your not linking to an swf flash file, delete the ‘swf’, code.

Step 7) Find your hyperlinks that we created in iWeb in the html code here and add a

rel="shadowbox"

to your image links so it looks like this

<a href="myimage.jpg" rel="shadowbox" title=“Whatup”>My Image</a>

An easy way to find your links is to do a search for “title”, then you can spot the link code and put the rel=”shadowbox” right before the title tag.

For your video links you need to add a width and height dimension to it, so for all flv, swf, mov, wmv, html, and youtube like links you’ll need to add this code instead:

rel="shadowbox;width=640;height=480"

Just adjust the dimension to match your swf, webpage, or video. Here’s an example for a quicktime video.

<a href="mymovie.mov" rel="shadowbox;width=480;height=640" title=”My Movie”>My Movie</a>

You can also group items to together in a slideshow like way by adding a grouping text to all the shadowbox code you add to the links.  Here’s what it would look like:

rel="shadowbox[Group]"

Just be sure to add that [Group] to all the links you want to be connected.  You can have 2 or more seperate groupings by just making a different text group like [Group2], and add it to the other ones you want to group.

For YouTube videos you have to use this code:

rel="shadowbox;width=425;height=344;player=swf"

Same princible goes with adjusting the width and height for your YouTube video.  So your YouTube link would look something like this:

<a href="https://www.youtube.com/v/qKiIm5EcQ7A" rel="shadowbox;width=425;height=344;player=swf" title="YouTube Video"><img src="my_webpage_files/flash_in_iweb-youtube.jpg"

Step 8 ) While your in adjusting your links adding rel=”shadowbox” code, you should probably change your “title” code to say something more relevant than just the path to your file.  So where you see the title=”big_long_link_files/this_is_not_a_good_title.html”, change it to say something else like title=”Check out my cool photo” or whatever.

Step 9) Hit Save and your done! Yay!  Make sure all your files are online, test it out to make sure it’s working properly and your set.

There are many other options that you can add for advanced users that I won’t go into here, but you can check them out by going to https://www.shadowbox-js.com/options.html.

Note: Shadowbox can be used for free for non-commercial websites.  If you are going to use it for commerical purposes you must purchase a license.  You can do that by visiting their website at www.shadowbox-js.com.  Also included with the iWeb version of shadowbox that I have made is a JW FLV Player.  It also can be used for free for non-commercial websites.  If you use the JW FLV Player to play flv files for commercial purposes you must purchase a license.  You can do that by visiting https://www.longtailvideo.com/players/order2.

**Also note that this effect cannot be used with links using a shape or text box. Link only a true graphic (jpg, png, gif, etc) or link the text itself.

I know it can get a bit complex getting into the code, especially if you’ve never really dealt with html code much before.  But just take it slow and go step by step and you’ll get it.  If you mess up, just go back to iWeb and republish and you can start over.   I think this is the best of the popup effects cause it deals with all media formats so easily.  So I hope you enjoyed the tip and if you feel like this helped you in some way consider donating to the iWeb cause.  The more donations I get the more time I’ll put into making more tips like this.

Thanks for visiting iWebUnlimited.com

—iJason

126 comments

  1. Eric 20 March, 2011 at 16:28 Reply

    Hello,
    Having some problems. I’ve got the html code written the way it should be and I have the Shadowbox folder where it should be. However, when I click on the video I want to play, the shadowbox pops up like normal, but the video will not load or play. After inspecting it in Chrome it looks like it’s saying it can’t find the shadowbox language file. Have you ever run into this issue before? I’ve used shadowbox for flash videos on other websites and it worked fine. The only difference here is that I moved hosting from MobileMe to Godaddy.com. I don’t think that’s the reason, but who knows…any help is appreciated!

  2. Anna 22 March, 2011 at 20:24 Reply

    Hi
    Thanks for this- I have sort of got it working but the problem is that when ever I return and even just look at it in iWeb and then visit the site again it disappears. Is there a work around for this?

    Great site by the way.

    Anna

  3. oliver reed 28 March, 2011 at 07:00 Reply

    I am looking to use shadowbox to display folders of images within my webpage rather than people clicking on the mobileme gallery link which then of course takes you out of the site, such as http://www.oliver-reed.co.uk/Land_Marks/Geo-.html

    I am unsure which bit of code to add into a html widget to display the album in a floating box within the site pages.

    I have uploaded the shadowbox folder to my idisc/web/sites.

    Sorry if it’s obvious and the answer is on this page!

    Can you help?

  4. oliver 30 March, 2011 at 08:26 Reply

    Hi I have the coding working to show a single image but I am not to show what is meant by [Group) to show a slide show of images. Do I need to name a file, folder?

  5. Jonathan Young 3 April, 2011 at 02:25 Reply

    ease someone help me, I cannot get shadow box to work I downloaded the latest shadow box, I dropped in my site folder, I am trying to shadowbox a html link on my page, here is the code, what am I doing wrong?

    Samples

    Shadowbox.init({ players: [‘img’, ‘html’, ‘iframe’, ‘qt’, ‘wmp’, ‘swf’, ‘flv’] });

    now this is the link I am trying to shadowbox below

    Wonder Care Dental

    I have everything!! please help me

  6. Jonathan Young 3 April, 2011 at 02:39 Reply

    Please someone help me, I cannot get shadow box to work I downloaded the latest shadow box, I dropped in my site folder, I am trying to shadowbox a html link on my page, here is the code, what am I doing wrong?

    Samples

    Shadowbox.init({ players: [‘img’, ‘html’, ‘iframe’, ‘qt’, ‘wmp’, ‘swf’, ‘flv’] });

    now this is the link I am trying to shadowbox below

    Wonder Care Dental

    I have everything!! please help me

  7. Jonathan Young 4 April, 2011 at 11:30 Reply

    <div class="tinyText" style="height: 44px; left: 109px; position: absolute; top: 203px; width: 263px; z-index: 1; ">
                  <img usemap="#map9" id="shapeimage_9" src="Samples_files/shapeimage_9.png" style="border: none; height: 70px; left: -12px; position: absolute; top: -12px; width: 287px; z-index: 1; " alt="Wonder Care Dental" title="" /><map name="map9" id="map9"><a href="http://www.vimeo.com/21741893&quot; rel="shadowbox" title="http://www.vimeo.com/21741893&quot; alt="http://www.vimeo.com/21741893&quot; coords="12, 12, 275, 56" /></map>
                </div>

  8. Vayabobo 2 May, 2011 at 15:32 Reply

    Bummer it was working beautifully in Safari 5.0.4 but then I tested my site with Firefox 4.0.1 and now Shadowbox no worky. QT files simply open in a new page. Anyone have any thoughts?

  9. Vayabobo 3 May, 2011 at 10:27 Reply

    Figured it out. iWeb erases the shadowbox folder anytime you update the site. So wasn’t FF at all. Jason you still rock!

  10. Eric Hartmann 5 May, 2011 at 21:48 Reply

    Wish this shadowbox code worked with the new CSS buttons you made. Had to disable Shadowbox since it opened the “Watch Movie” YouTube link in a new window and fullscreen. :-( Sad day.

  11. William 10 May, 2011 at 21:53 Reply

    Thanks for the tips. I’m working with iWeb ’08, and I placed the code exactly as it is written in the instructions. For some reason, when I execute the page, it begins to download my videos instead of executing the shadowbox.

    What am I doing wrong? I have a thumbnail picture representing my FLV video, and it is hyperlinked to “a file”, which is the FLV video I want to play in the shadowbox. Instead of the shadowbox popping up, the files begin to download…hmmm….

    Any suggestions would help. Thank you!!!

  12. Eric 23 May, 2011 at 14:27 Reply

    Hi,

    I’m using this to display a group of photos. I have a Menu bar built in flash that is embedded into the site. When the shadowbox appears, the flash menu remains the same and is in front of the shadowbox pictures. Am I just not layering things correctly, or is there another issue with Shadowbox working with flash elements on a page?

  13. TJ 23 May, 2011 at 17:53 Reply

    Hi
    I’m trying to build some pages with videos. I can get YouTube to play OK – but I can’t get .mov to play – a window opens but I get the “Q” with the question mark?
    I’ve made sure the movie is in the resource folder for the page
    I have Quiktime Pro on my machine
    But no joy

    ANy help you can give is appreciated – thanks for the website. It’s great

  14. TJ 25 May, 2011 at 06:09 Reply

    FOLLOW-ON:
    I’m still having troubles with quicktime
    But YouTube works GREAT!

    Two additional questions:
    1. I’d like to link to a couple of other sites with videos (e.g. edutopia, NBC news) but they don’t seem to work – any suggestions on how to find out the key to launching their videos within the webpage?

    2. The pages I built work great on my Mac in Safari, Chrome, FIrefox. But when I bring them up on a WIndows machine in Explorer – they don’t work. Same is true of an iPad – (but I may be asking too much)

    Any suggestions or help is GREATLY appreciated.

  15. Dave 26 May, 2011 at 07:10 Reply

    People should note if you download the latest Shadowbox – the folder is labeled shadowbox-3.03. In order for the above code to work you need to delete the “-3.03” from the folder name or change the code above to read :

    Shadowbox.init({

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

    });

  16. wholesale Hawks jerseys 19 June, 2011 at 07:49 Reply

    This was a genuinely tremendous post. In theory I’d like to dream up like this also – getting everything and staunch go to make a good peace… but what can I articulate… I tergiversate alot and in no practice appear to fall some element carried out.

  17. Marc Matoza 1 July, 2011 at 13:30 Reply

    Got mp4 files to work fine – when I am using YouTube URL – it takes me to YouTube. I don’t want to leave my page, would like it in a window that returns to my site.

    Any suggestions – am sure I missed something

  18. Jamie Moorhouse 27 July, 2011 at 15:59 Reply

    Hey everyone,

    I have managed to get this all working on multiple pages on my website (www.talkinglightmedia.com) however it only works on my Mac. When I go to the site on a PC the shadowbox doesn’t work. Anyone have any idea why this might be?

    Thanks in advance.

    Jamie

  19. Lida Brock 3 August, 2011 at 21:24 Reply

    aw, this was a really nice post. in idea i would like to put in writing like this additionally ð taking time and actual effort to make a very good articleé but what can i sayé i procrastinate alot and by no means seem to get something done.

Leave a reply

Facebook
Twitter
YouTube