iWeb Tip #19 – Shadowbox in iWeb

126
13412

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. Patrick 8 July, 2010 at 21:51 Reply

    This works great!I had no problems getting this to work but my Youtube Videos don’t play automatically. Anyway to make this happen and also any way to make them play in HD automatically.

    Thanks
    patrick

  2. Stephanie 13 July, 2010 at 02:07 Reply

    I cannot seem to get this to work using a vimeo vid. It starts to open the shadowbox, but then just opens the whole vimeo web page instead (as in redirects from my website & opens the vimeo site/page). Any ideas?

  3. Laura 31 August, 2010 at 15:51 Reply

    I have a question regarding group images. I would like my group to consist of images that are not all visible on the page. Eg: you click on an image of a table and the group that comes up consists of 4 table views that were not visible on the page.

    Also is there a way to specify the display order of group images or is it based solely on the order of the code?

    Any thoughts would be greatly appreciated!

  4. Justin 7 September, 2010 at 15:57 Reply

    Anybody figure out how to get rollovers working with a shadow box link. I’ve been futzing with the code for a couple hours to no avail.

  5. Nic 10 October, 2010 at 12:07 Reply

    Hey! Yes there is a way to hide the title: Go to the folder /shadowbox and open shadowbox.css.

    Search for “#sb-title-inner” (without the “”) and adjust it to 0px so that it looks like this:
    #sb-title-inner{height:0px;}

    When done, save and quit the file, and replace the one on your (MobileMe?) Server.

    If you don’t believe me: I have a titleless shadowbox as login prompt, try it on m1.x05.ch.vu, and click on “asuuge”.

  6. Nic 10 October, 2010 at 12:07 Reply

    Hey! Yes there is a way to hide the title: Go to the folder /shadowbox and open shadowbox.css.

    Search for “#sb-title-inner” (without the “”) and adjust it to 0px so that it looks like this:
    #sb-title-inner{height:0px;}

    When done, save and quit the file, and replace the one on your (MobileMe?) Server.

    If you don’t believe me: I have a titleless shadowbox as login prompt, try it on m1.x05.ch.vu, and click on “asuuge”.

  7. Jordy 17 October, 2010 at 00:00 Reply

    hey great tut but i followed your jw-player tutorial and it works fine but i don’t understand how to place him in a shadow box please help me out

    • cdcox 14 November, 2010 at 12:06 Reply

      This tutorial you followed is to allow the jw-player to be pulled right in to page your video is on.
      A different jw-player is included with the shadowbox files. and the one listed in the jw-player tutorial is not needed.
      you have to be sure your code is edited as stated above and that you put the “shadowbox” folder in your public_html folder if that is where your site is stored on your sever.

  8. Paul 6 November, 2010 at 08:23 Reply

    Hi, Nice effect, I cant seem to get it working though, I’ve tried for several hours now, I’ve followed the steps over and over again but it wont work for me, any ideas please

    Cheers
    Paul

    • Paul 6 November, 2010 at 15:46 Reply

      For future reference if anyone has this problem, I fixed it by viewing source! I noticed when I view source there where three diamond shaped icons with little question marks in them, placed between the Players line and the abbreviations of what I was using i.e. img, html, qt. I went into my editor and removed the space between then re uploaded the file and it was working.
      Hope this helps others

      Paul

  9. BryanDrakeShow 12 November, 2010 at 17:54 Reply

    Do you have to republish the site after you save in text edit? I am having zero luck. Please tell me exactly where I am supposed to put my shadowbox file. I use godaddy so when I publish to ftp where do I find the files to paste the code? I tried saving to a random folder and then editing in there, but it seems to have zero effect.

    • Dave 13 November, 2010 at 03:42 Reply

      The code has to be pasted in the .html page that you want the shadowbox to work in. The the “Shadowbox” folder would go in the folder that you website is stored in.
      For example: if everything in your website is stored in the “Public_html” folder. Then put the shadowbox folder there and edit the code into “yourpage.html” your page meaning, the title of the page you want the shadow box to work.
      If your using a code editor from Godaddy, that edits the files on the server, you can just save it and not republish it.
      But if you use an html editor or test edit on your comupter, then yes you have to reupload to the godaddy server.
      Hopes this helps.

  10. Dave 12 November, 2010 at 19:33 Reply

    Built my site and edited the code. published the site to a folder on my desktop and tested the “Videos” page. All works great. Uploaded the site to my hostmonster server in a folder called “NEW” wanted to retest everything before I took my old site down. The videos will not load or play in the shadowbox? The shadow box opens but the player never loads and the video will not play? I check all the permission of the .flv files on the server and set them to 755? Still on luck.
    Any clues or suggestions would be nice.
    The new site is located at http://www.cdcvideo.com/NEW and it’s the “videos” page.
    Thanks

    Dave

    • Dave 13 November, 2010 at 11:25 Reply

      I think I fixed it. I ended up changing every permission in the shaow box folder on my server to 755. and it seems to work. I will be testing more though

    • cdcox 14 November, 2010 at 12:02 Reply

      My problem was with the permissions being changed by cyberduck when uploading to my server. I changed the cyberduck preference to set all uploaded files and folders to 755 and all is working fine. I’ve moved everything to my public html so my old site is now down and the new is working. The above link doesn’t work anymore so if you would like to see
      http://www.cdcvideo.com/videos.html

  11. shannon 30 November, 2010 at 15:20 Reply

    thanks for this! works great. have been trying to do this with video lightboxes app and haven’t been able to integrate it with iweb. this is perfect.

  12. Clever 30 November, 2010 at 22:50 Reply

    Hi, thanks for the great website!!

    I have created grouped items (three pics in total) and have layered them on top of each other with the main picture on the top that represents the folder of pics. I finish the instructions and refresh the page, to which everything looks as planned but when I click the group picture, the first picture to come up is 3 of 3.

    Q: is there any way to number the pictures in the group so that the picture on top showing comes up as the first picture when clicked??

    I tried to arrange the html in order but that doesn’t seem to work. Any thoughts??

    Thanks

    • Clever 1 December, 2010 at 00:10 Reply

      Sorry, I missed this…..

      “Keep in mind that the images will scroll through in the order they were dropped onto the page (not necessarily the order top to bottom that you have them in on the page. So be sure to add images to the page in the order you want them to show up in the lytebox effect.”

      Man, Im clever!

  13. layla 1 December, 2010 at 15:12 Reply

    Hey, cool stuff. You don’t mention MP4 or F4V. I know the JW player accepts both. Does this shadowbox support them?

  14. shannon 14 December, 2010 at 09:51 Reply

    So JW Player is now on version 5.4. If I wanted to switch out your JW player for the newer version how would I go about doing that. Thanks for the info.

  15. Tyler 1 January, 2011 at 13:13 Reply

    I was wondering if you’ve ever created a login page, for members. I know jotform has a “membership” form, but I haven’t had any luck integrating mysql,server, database, etc. Is mysql even compatible with idisk? Anyway, love your site, keep up the good work. Thanks.

  16. jette 24 January, 2011 at 04:22 Reply

    Hello Everyone,

    I combined shadowbox with flv files and always got the message “video not found or access denied”.

    I uploaded everything with cyberduck, changed the permissions, but still no luck.

    Now I solved the problem and I thought it might be helpful to post it here for other peoplewith the same issue:

    You have to place your flv files in the root folder of your website, otherwise the fw player doesn’t seem to find the file.

    At least that’s how it works for me now, hope it helps!

  17. Victor 26 January, 2011 at 03:06 Reply

    Hi everybody
    I would like to know, if somebody know, how to play video using shadowbox or something else, like an into of the site, when first page loads..
    Thanks

  18. Kevin 25 February, 2011 at 17:24 Reply

    I’m working on iWeb and uploading through godaddy, though I don’t know if the latter is important. I’ve finally gotten it so that when I go to the preview in Coda and publish my website to a local folder as well, the effect works as intended. But when I publish the website to the FTP server, clicking on the pictures opens them up in another window, as it did without the code. I seem to have all the steps in order, but I’m not nearly good enough with code to start randomly striking spaces and empty lines. I directly copied & pasted the text in the boxes above where it told me to — as I mentioned, everything is working perfectly until I’ve published the website online. Any advice?

Leave a reply

Facebook
Twitter
YouTube