Aug 22

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 Responses to “iWeb Tip #19 – Shadowbox in iWeb”

  1. Odie says:

    you should make a video for this i’m kind of confused of where to put the stuff, like rel=”shadowbox” .

    • Odie says:

      ok, so I know where to put the html, i figured it out, I wasn’t reading right, but what if I want to put and html code in the shadow box?

  2. oliver says:

    Can you help, slideshow works fine apart from it starts with the last slide first and you have to click backwards 6of6 to 5of6 to 4of 6 etc. What have I done wrong?

  3. Evan says:

    I am able to get this to work with a variety of files. However, I cannot get it to work with Vimeo. Does anyone know where to pull the vimeo link from?

    Thanks!

  4. bruno says:

    hi, is there anyway to use this cool effect with a roll over image?! I mean … it’s to boring a link without a effect when your have a mouse over. What I am looking for is a picture that changes when the mouse is over and ALSO apply the Shadowbox effect when we hit it!! is there anyway to do this?! Thanks!

  5. shannon says:

    has anybody gotten this to work on ipad? when i test the same site on a mac or pc, shadowbox works. when i try on ipad, it seems to bypass shadowbox and opens the video on a new page.

  6. daniele says:

    Hi there,
    is there anyway to keep the changes in the code .html i mean every times i make some little changes into my pages with Iweb and publish it to local folder, the shadowbox code was already there disappear, and i have to add again manually the shadowbox code and all the “rel=”shadowbox[Group1]”
    Any easy way for do not do that every times?

    many thanks

    • BenP says:

      I Have the same problem. I publish my sites to Mobile Me so I can only upload via iWeb, and when I do that it seems to overwrite any changes I may have made in the code. Does anyone else know a way around it?
      Cheers
      Ben

  7. jonathan says:

    The youtube concept don’t work on iPhone and iPad, I guess is not a good idea to implement this to my website, the less content viewable for the audience the less chances of getting the customer.. thought! any other method to show the youtube video with the same concept? thanks

  8. Armonasia says:

    I have added all the text content and uploaded the shadow folder but it will not work for me.

  9. Emilie says:

    I laugh in the face of HTML coding ;) finally have got this amazing effect to work with vimeo!!! am very very proud….so after following the iwebunlimited steps my coding looked like this: (N.B. XXXXXXXX stands for your vimeo video number)

    <a href="https://vimeo.com/XXXXXXXX&quot; rel="shadowbox;width=640;height=480" title="https://vimeo.com/XXXXXXXX&quot;

    At which point when I tried the video it would either go to a blank screen or directly link to the vimeo page, bypassing the shadowbox effect.

    However if you go to your vimeo video and click on the share icon (that appears in the top right hand corner) it will open up another window which has the vimeo embed coding. Which will look something like this…slight variations will occur depending on your embed customisation options you've chosen.

    You will only need part of this coding so copy the following:

    “http://player.vimeo.com/video/XXXXXXXX?byline=0&portrait=0&color=ffffff&autoplay=1″ width=”500″ height=”291″ frameborder=”0″

    Then go back to your HTML code editor (I use Text Wrangler). Wheras before you had:

    href=”https://vimeo.com/XXXXXXXX”

    replace it with the coding you have copied so you get

    href=”http://player.vimeo.com/video/XXXXXXXX?byline=0&portrait=0&color=ffffff&autoplay=1″ width=”500″ height=”291″ frameborder=”0″

    so my whole coding for my video should look like this:

    <a href="https://player.vimeo.com/video/XXXXXXXX?byline=0&portrait=0&color=ffffff&autoplay=0&quot; rel="shadowbox;width=640;height=480" title="https://vimeo.com/XXXXXXXX

    obviously save etc and then ta da….my vimeo video now works with the great shadowbox effect! :)

    • I could get YouTube videos to work using this process… but I can’t get Vimeo, and I so much prefer Vimeo.

      I can’t seem to get Emilie’s workaround to work. It’s been over a year since this has been posted, is there another way to do this now? Thanks!

  10. Rachael says:

    O
    M
    G………… No Bounds….

  11. Bruno says:

    Is there anyway to not lose all the html code when we change anything in iWeb and publish the site again???? depending on the website, if we change one letter, we have to do everything all over again!!! to much work!!!

  12. Sybil says:

    Hi there, every time I try to add the codes to the html file using TextEdit, I save, close and attempt to look at the web page– no change. Then, when I go back to TextEdit, the file reverts back to the original– none of my changes to code (including any shadow box find/replace codes) are there. Please tell me what I’m doing wrong!

  13. John Lindsey says:

    Is there a way to get multiple images to open from just one image and if so how do you create that link in iweb?

  14. Hi and thanks for this tutorial and the many others that I have used and enjoyed. I am trying to get shadowbox to open automatically when the page is loaded. I am using this script that I have found somewhere else but I have no success. It is not possible to do that with iWeb? Thanks for the help!

    window.onload = function(){

    Shadowbox.init({
    skipSetup: true
    });
    Shadowbox.open({
    player: ‘img’,
    title: ‘Seminario sulla guarigione divina – Centro Zoe’,
    content: ”,
    height: 800,
    width: 574
    });

    };

  15. Marty says:

    HI great tips, love this site and still love iweb. I got shadow box working on computer just cant get it to work on ipads….box comes up with title of video but video…. any suggestions.
    thanks
    Marty

Leave a Reply