« MOD: Shadowbox for Images, Flash, Video & More »
Squarespace Gallery Modules come with a built-in "Lightbox Mode" that has some fantastic functionality ... but sometimes you want to use this type of functionality in other areas of your site. Enter: Shadowbox! Shadowbox is a "lightbox" style function that you can call from anywhere: any image link, and any text link -- and Shadowbox can be used for single images, multiple images, flash content, video, and more!
To setup Shadowbox on your Squarespace website, follow these simple steps:
STEP 1: Download Shadowbox Source Files -- Go to www.shadowbox-js.com and download the source files (while you're there read through their helpful documentation!)
STEP 2: Upload the Source Files to your Squarespace File Storage -- Go to your file storage and upload the Shadowbox source files. I find the easiest way to do this is to archive the source files downloaded from the Shadowbox website into a single .zip file, then upload the zip file, making sure to check the box in the upload dialog box that specifies to extract the files from the zip file once it has uploaded. This way you can upload all the files in one swoop. I like to upload my Shadowbox zip file into a folder named "Scripts" in my site storage. Once the zip file is uploaded into the Scripts folder, I rename the Shadowbox folder to "Shadowbox3", that way it is easier to reference.
STEP 3: Reference the Shadowbox Files -- Once the files are properly upload to your site storage, enter in the following into the <head> code injection point in order to reference them:
<link rel="stylesheet" type="text/css" href="/storage/scripts/shadowbox3/shadowbox.css" />
<script type="text/javascript" src="/storage/scripts/shadowbox3/shadowbox.js"></script>
<script type="text/javascript" src="/storage/scripts/shadowbox3/libraries/swfobject/swfobject.js"></script>
* Make sure that the paths/names match where you have uploaded the files to.
STEP 4: Add the Shadowbox Script -- Now you need to add the following script into your <head> code injection point setting some basic options for the Shadowbox function. I usually use the following:
<script type="text/javascript">
Shadowbox.init({
language: "en",
players: ['img','qt','wmp','flv','swf','iframe','html']
});
</script>
<!--[if ie 7]>
<style type="text/css"> body > #sb-container { position:absolute;} </style>
<![endif]-->
STEP 5: Use Shadowbox! -- Now for the fun part, Shadowbox in action. To launch Shadowbox, simply add rel="shadowbox" into any html link. Here are some examples for how to use Shadowbox:
Anywhere in your site you can place a text link, or an image that can open up full size in Shadowbox:
<a href="/storage/image.jpg" rel="shadowbox">Here is the text link</a>
<a href="/storage/image.jpg" rel="shadowbox"><img src="/storage/clickable-image.jpg"></a>
Open Multiple Images: If you would like Shadowbox to open a series of images that can be clicked through, give your image series a unique gallery name in [square brackets] after you reference Shadowbox in your link, and add the additional image references like so:
< a href="/storage/image1.jpg" rel="shadowbox[gallery]"><img src="/storage/clickable-image.jpg"></a>
<a href="/storage/image2.jpg" rel="shadowbox[gallery]"></a>
<a href="/storage/image3.jpg" rel="shadowbox[gallery]"></a>
<a href="/storage/image4.jpg" rel="shadowbox[gallery]"></a>
Add Titles: To add titles to the images, simple add the title="" tag:
<a href="/storage/image1.jpg" rel="shadowbox[gallery]" title="Image title"><img src="/storage/clickable-image.jpg"></a>
<a href="/storage/image2.jpg" rel="shadowbox[gallery]" title="Image title"></a>
<a href="/storage/image3.jpg" rel="shadowbox[gallery]" title="Image title"></a>
<a href="/storage/image4.jpg" rel="shadowbox[gallery]" title="Image title"></a>
Open a Video: To open a .swf, YouTube video, Vimeo video, or Quicktime file, simply use the url for the file, and then add dimensions to your shadowbox reference like so:
<a href="http://yourlink.com" rel="shadowbox;height=300;width=400">VIDEO »</a>
or to use a clickable image to launch the video rather than a text link:
<a href="http://yourlink.com" rel="shadowbox;height=300;width=400"><img src="/storage/clickable-image.jpg"></a>
When working with a YouTube or Vimeo video file, you need to use the link provided with the video embed code, see the highlighted portion in this vimeo embed code example:
<object width="400" height="300"><param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=9766402&server=vimeo.com&show_title=1&show_byline=1&show_portrait=0&color=&fullscreen=1" />
<embed src="http://vimeo.com/moogaloop.swf?clip_id=9766402&server=vimeo.com&show_title=1&show_byline=1&show_portrait=0&color=&fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="400" height="300">
</embed>
</object>
You can see samples of Shadowbox in action on this website in the 'Works' section.
To learn more about Shadowbox, read the full documentation, and find out how to work with other media types and additional options, visit the Shadowbox website at www.shadowbox-js.com.
Peace! 
Squarespace Mods | Mods- 3rd Party Tools, Mods- Flash, Mods- Slideshows/Galleries, Mods- Video February 17, 2010 
Reader Comments (16)
hi. i've used you're very helpful tutorial and implemented everything you've said, but it doesn't work, it just links directly to the vimeo megaloop page?
Are there any key things I should look out for? All my directories are correct.
thanks.
When setting a vimeo video to open in shadowbox, you need to use a specific part of the code that vimeo provides for embedding the video. It can be a bit tricky to find the right bit if you don't know what to look for so it is an easy mistake! If you look at the bottom bit of this post I have included a sample of a vimeo video embed code and have highlighted the portion that you would use as the link to the video. If you post the link to your page, or to your vimeo video page I can help you target the correct link value.
can this be used with audio? mp3 clips? Also, how can I change the color and/or opacity of the background overlay (the color/masking out of the rest of the screen)
thanks - this tute was very helpful
Hello! Thank for this excellent post. I have had a really good result with following your advice above! I was wondering about changing the background opacity too...my site has a bright/white bg, so the images don't appear to stand off the page as much as i think they should. Is there any way to change this...I saw some stuff on the Shadowbox site, but am unsure of where to put the correct values to determine this!!!! Thanks once again!
You could customize it with css by putting something like the following in your custom css panel (paintbrush icon at the top right / custom css tab):
#sb-overlay { background: #A52A2A !important; opacity: 0.8 !important; }
(change the color number to the color you want, change the opacity to what you want.)
You could also tinker with using a background image:
#sb-overlay { background: transparent url(/storage/imagename.jpg) !important; }
Or, you could set the background color in the shadowbox script settings in the <head> code injection point:
shadowbox.init({
language: "en",
players: ['img','qt','wmp','flv','swf','iframe','html'],
overlayColor: "#000000",
overlayOpacity: "0.8"
});
See the lis of options you can list this way—
I stumbled on your site which I think is very well done by the way. It appears you have quite a bit of squarespace experience and had a question that maybe you could help with.
If you create a single gallery page for example with 3 columns of thumbnails and want to have clickable links underneath the thumbnails, so thumbnail image (underneath - download image link) is there a work around to include that information? Thumbnail would launch lightbox to display larger image and download image link would do just that. I would love to retain the stock squarespace gallery drag and drop organization, image fade and lightbox.
I know I can do an html page with shadowbox and have the link but I lose the organization and have to upload all images separate, etc...
Any insight would be appreciated.
Thanks
I am having trouble with the YouTube links. Can you please provide a example for me using a youtube link? Thanks!
Hi,
Thanks for your great explanation on using shadowbox. Very helpful.
I'm wondering if you might be able to help me take this to the next level.
I'm trying to integrate video into a Gallery module (i've tried the method that SS proposed, which is to use a photo description which you can then embed a url (vimeo, youtube, etc...), this doesn't work as well as expected.
Is it possible to use shadowbox within a gallery module? So give a thumbnail a link to a shadowbox popup which contains either the .flv or an embed link.
Any help would be great. Thanks
Cheers.
Great website. It has helped me a lot!
Vimeo has changed the embed code recently to allow for playback in iPhone and IPad's. The new code doesn't work with you tutorial. I can get the old embed code to work, but would really like to get this working on the portable devices. Any suggestions on working with the iframe code?
Thank you.
Hi I followed your tutorial to add "lightbox video" using vimeo video on my squarespace. It works and looks great, however I just noticed it messed up my squarespace photo galleries using squarespaces built in lightbox page. Any ideas on how to fix this? It opens the page in lightbox first then it goes into the squarespace lightbox. http://www.illking.com/photography/corsa-moto-classica/
Thanks for your help!
THANK YOU!!! This is ridiculously helpful! I've been searching for a simple explanation of how to do this all over the place. Can't thank you enough!!! :)
Hi there,
I have been using this method for a while now, and just yesterday - it stopped working! I tinkered with the shadowbox.js file a bit, because I was having this problem: http://developers.squarespace.com/design-coding/post/1397456
and then, the videos just stopped popping up altogether, and instead just appear on a new page, full-screen.
So, i went in and deleted all of the code, and shadowbox files, and started fresh, following this tutorial and using the original files. But, now it still won't work.
The strangest thing is that, yesterday - for about an hour after I tinkered with the code, it worked great! and then it just stopped working. And I hadn't touched anything. I don't' know what to do!
Help?
Hi,
This is great I too was looking everywhere for code for this! I do have one question... can you link the images that you set within shadow box? Within a gallery of work, there is a website that I would like viewers to link out to ( to get the user experience of the website). How can I make that image or text within the title linkable?
Thanks!
Thank you! This works fantastic, goin' to have a play around.
:D:D:D:D
* * * * *