iWeb Tip #19 – Shadowbox in iWeb

126
24291

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. Remko van Rhijn 12 February, 2010 at 04:58 Reply

    Hi iJason,

    First, thank you very much for all your tips and tricks. They are absolutely priceless for someone like me. Who likes to design, but has little or no knowledge of coding. Please continue this great work (and don’t delete the exisiting tricks and tips, i would be lost without them :) )

    I run into a problem though, trying to play flash video’s via the shadowbox. I got it to work with the swf files, but for some reason if I try to do it with flv’s they don’t want to load. The black box shows up but it doesn’t show the video. According to the FF error console there is a problem with the width and height parsing. It says: “Warning: Error in parsing value for ‘width’. Declaration dropped.
    Source File: http://hotelvideo-online.eu/Hotelvideo-online/Home_files/Home.css
    Line: 302″
    (same for height)

    I’ve tried to adjust the height making it a bit larger than the video. But no matter what I try, it doesn’t want to play my flv’s. I’ve switched back to swf for now, but I would really like to use the flv player. Can you help?
    Thank you very much in advance.

    Kind regards,

    Remko van Rhijn
    Hotelvideo-online.eu

    • iWebUnlimited 14 February, 2010 at 12:12 Reply

      Hi Remko, make sure that the code has the exact dimensions of the video. And your using this code
      rel="shadowbox;width=640;height=480"

  2. Jarred King 15 February, 2010 at 07:32 Reply

    I tried to install you shadowbox code on my website for QT video and was partly successful. I’m not well-versed in HTML code but followed the instructions and my videos launch, however they launch in a white box (rather than black) and the video isn’t visible unless I click inside the box area. I can email a screen shot of the the code I input, as well as what it looks like on my site. Any assistance would be greatly appreciated. Thank you for so many fantastic help items on this website!

    Jarred King

  3. Zee 15 February, 2010 at 11:09 Reply

    I’ve tried to make this work at no success and I am sure I am doing something very simple wrong.

    I am using Coda to change the code, and it notices two errors:

    1.
    Here it says: end tag for “link” omitted, but OMITTAG NO was specified.

    2.

    – In this section at the point of rel=”shadowbox;width=640;height=480″ It states “there is no attribute to “rel”.

    I have tried both .mov files and .flv files. Both by “Link to a file” and “An external Page” and still it just opens the movies in a new page, or doesn’t at all.

    I am not really someone that understand code to well, so any help would be great.

    Thanks,

    Z

  4. Zee 15 February, 2010 at 11:23 Reply

    Sorry! my bad. I didnt read the ** Also note section. Was trying to tag it to text.
    With Images seems to work great.

    Thanks.

    Z

  5. Andy 21 February, 2010 at 18:10 Reply

    First of all, thank you so much for the tutorials. They’re incredibly well done and very helpful. I have one question. Every time I make changes to a page that uses shadowbox, and then republish, the code is overwritten and I have to do all of the shadowbox coding all over again. Is there a way to avoid this? Thanks a lot.

    Andy

    • iWebUnlimited 15 March, 2010 at 09:37 Reply

      Andy, Unfortunately iWeb does re-write you code each time. One thing I have suggested to iWeb users though is to make a new site in your iWeb sidebar for the page your using the effect with. Then publish that separately and just link to it from the main site. That way when you just update your regular site and publish you won’t have to redo all the shadowbox code again.

  6. David 22 February, 2010 at 06:44 Reply

    firstly thank you! – Legendary Website!
    I have problem wit Shadowbox and IE…The site I created works perfectly on Safari, Firefox etc but doesn’t even load more than the background in IE! I believe this is to do with using shadow box because I played with the coding and when removed it it loaded…So is there a known work-a-round? Any help great appreciated. Dave

  7. Rich 11 March, 2010 at 20:13 Reply

    yes, i agree – a video would be crucial for first timers…PLEASE??? (including the set-up of the flv player too:-).

    Thanks,

    Rich

    • iWebUnlimited 15 March, 2010 at 09:39 Reply

      Matt & Rich, I’ll consider making a video tutorial. I guess I haven’t really made a video tutorial cause it’s very similar to the Highslide video that I already have on there. But I enough people want one specific to Shadowbox and were willing to donate for my time, I’d put one together.

  8. Doug 14 March, 2010 at 15:57 Reply

    Hi! First up thanks for the tutorials – am trying to get my site up and running and this site is like a bible!

    Have been trying to get the Shadow box to work with an FLV video, and it works great when I publish it to my hard drive, but when I publish it to my site, when I click the image to launch the video it just starts downloading the file instead! Do you have any ideas?

    By the way, to anyone who might find it useful, when I first uploaded to my server I had forgotten to add the .flv MIME extension to the server, so that caused probs for me!

  9. Doug 15 March, 2010 at 08:36 Reply

    Ahh i fixed it – turned out that the Shadow bos folder was in the website’s root on my HDD, but iWeb was not uploading it; i suppose because as far as iWeb is concerned it is not using it. Used Filezilla to up it to the server and bingo, all fixed and looking lovely.

    Thanks again!

    • iWebUnlimited 15 March, 2010 at 09:40 Reply

      Glad you got it figured out Doug, yeah, you’ve got to make sure you’ve got the full shadowbox folder along side of your html files.

  10. macmithos 18 March, 2010 at 17:11 Reply

    Hi Jason
    I’m an old fan of your site. It really help people like me who is not a web developer or programer.
    I’m having a big problem with shadowbox. It is working perfectly with Safari, Firefox, Chrome and etc n no matter if it is in a Mac or PC, but with that thing called Internet Explorer (IE), nothing happens. I’ve choosen to use .flv files to take advantage of the player that comes along and to make it easier for those PC users (morre then 70% of my audience).
    Does anybody knows if there is a little trick ?
    Two urls bellow from 2 different sites where I show my videos.
    http://www.videolab.com.br/animacao.html
    http://www.bananadaterra.net/vtvcoz.html
    Thanks a lot in advance !

  11. Thomas 20 March, 2010 at 07:16 Reply

    Hello,

    the buttons when I group don’t work, also the X doesn’t, I have to click next to my images to close the window.

    I put the shadowbox folders next to my .html files and this is how the code looks like:

    IBM Thinkpad T43

  12. Alessandra 24 March, 2010 at 08:51 Reply

    Hi Jason!

    I love your tutorials…but I love your video tuts even more…I’m a visual learner so for me it would really help if you could post a vid tutorial of this Shadowbox instruction. I followed the steps and I’m still struggling to see the effect. Please Help!

    • iWebUnlimited 12 April, 2010 at 11:27 Reply

      Take a look at the highslide video tutorial I created it’s almost identical to how you implement Shadowbox.

  13. chris barry 1 April, 2010 at 04:57 Reply

    i am trying to get this to work. i uploaded the shadowbox folder to idisk/web/sites/. i dragged thumbnail images to the page and linked them as file to the high res images on my computer. i then went into the html page for the page on the site and added the:

    Shadowbox.init({

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

    });

    and then removed all but img and then added:

    rel=”shadowbox”

    and saved. am i doing something wrong? please advise! thanks!

    -chris-

    • chris barry 1 April, 2010 at 04:59 Reply

      i meant i added this before the /head

      Shadowbox.init({

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

      });

  14. Meghan 26 April, 2010 at 19:02 Reply

    Hey I’m having trouble making this work and I can’t figure out why.

    In iWeb, Im publishing my site using mobile me.. so would set up my site like the way the tutorial says with the links, then I would go to the HTML file on my iDisk and edit it and add the Shadowbox code.. but it doesnt seem to work..

    Is there an extra step to doing this with publishing through mobile me? Because Ive tried doing the entire tutorial with publishing as a local folder and it works fine.

    help!!

  15. Yousif Salame 3 May, 2010 at 14:11 Reply

    This is a great idea as well as all the other blogs you have. I love the look on the pictures when they pop up in your shadowbox code.
    The only problem I’m facing is that every time I update something on a page in iWeb (which includes your codes) I would have to go through the whole process over again. because iWeb will just update the pages with its original codes.

    Am I making sense? and is there a solution to that?

  16. AQE 3 May, 2010 at 15:26 Reply

    i´ve succesfuly uploaded a group of 3 images usign shadowbox, but i have one problem, the control loads the group from the third one to the first, i mean stats saying image 3 o 3 and not image 1 of 3, what am i doing wrong, i´ve already shuffled the order and notthing seems to work

  17. Justin 24 May, 2010 at 14:38 Reply

    Love your tutorials bro, they have been a HUGE help. I’ve been working all day trying to get this shadowbox to work with one of my Vimeo links, Everything works properly until the the actual shadowbox comes up. The shadowbox comes up, the video acts like its about to load within the shadowbox, and then it redirects itself to the actual vimeo page where the video is hosted.
    It would be a HUGE help if you had any suggestions. I really need this to work to show off our video production since that is what we do.

    Thanks a million,
    Justin

    • Dustin 5 July, 2010 at 16:57 Reply

      I’m having the exact same problem. Got shadow box popping up fine, but then it just redirects to the Vimeo page. Anyone figure this out yet?

      • olivia 12 January, 2011 at 13:31 Reply

        YES! i am having the exact same problem. Youtube works fine when i followed the directions, but i like the quality of image on vimeo better. any solutions out there anyone? whoever figures this out deserves are super gold star.

  18. Adam Schiavone 29 May, 2010 at 07:24 Reply

    Is there any way to not have iweb delete the shadowbox folder from the idisk? Every time I publish it deletes the folder

  19. Dustin 5 July, 2010 at 21:07 Reply

    I’ve got this all working, but I was wondering — is there a way to have this rigged so that I don’t have to go back and re-add the code every single time I update my index.html page in iWeb. Every time I save the iWeb file my index.html goes to back to the way it was before adding the Shadowbox tags, so I have to keep re-adding them.

  20. Joe 6 July, 2010 at 12:43 Reply

    Thanks for the great tutorials. I’m just getting started with my site. I like this shadowbox effect, and want to use it so that the multitude of video’s that I have don’t all start loading the minute you go to my page. I would like to have thumbnail representations that once clicked bring up the video and load it ala the shadowbiox effect.

    I have had problems with friends, that don’t have a macs, being able to watch my videos, so I have uploaded my videos to Vimeo. Now, I’m not able to figure out how to link it to the video without it actually going to the Vimeo webpage.

    How can I do this? Any help would be much appreciated.

    Thanks,
    Joe

Leave a reply

Facebook
Twitter
YouTube