Update: After discovering Mediabox Advanced, the code on this post has been updated to use Mediabox Advanced. Multimedia Shadowbox, discussed in this post you are now reading, which works great, is no longer used on my site. For more information as to why, see this post on Mediabox Advanced.
I just love shawdowboxes on a blog or webpage. You know, you click on a thumbnail of a picture, the browser window dims and the picture animates its debut "on top" of the dimmed window. Shadowboxes are such a nice, professional-looking touch that draws your attention into the picture...
I installed a shadowbox (or lightbox) on my personal blog some time back. I really liked it.
But lately, I've noticed video doing the same thing on some blogs. My lightbox didn't work with video. And, from time to time I post video on my blogs. I wanted to see if I could find a shadowbox that would also play video as well as opening a picture from a thumbnail. I found one that I like, created by Michael J. I. Jackson, at shadowbox-js.com and made available for free as long as you aren't using it for commercial purposes.
Check out his site at the above link. This shadowbox is very versatile. You will see several examples of implementations featured on his site. Two of the things I especially like about his shadowbox are:
- the optional ability to mix media in the same shadowbox (pictures and movies, for example) and,
- the ability to better control the viewers' experience when images are too large to fit in the browser window
Below is a sample implementation of the shadowbox here on drTimTyson.com. I simply added the code in the header of my blog template and then used the formatted code to link to the media in my post below.
The one thing I wish functioned differently: when the movie begins to download, the view has no progress bar to affirm that the world hasn't just ended. Perhaps this is a feature I've overlooked.
Twelve pictures and a final movie from a recent trip I took to Ireland are presented as a single shadowbox gallery. All of this was done by simply following Michael's directions at his site.
One final note: If your window is smaller than the 1024 width of the pictures, you can drag the images side to side to see the entire image. Nice.
The video was shot with my digital SLR. Sorry for the jitter. The wind was gusting at up to 75mph! I've never seen anything like it!
If you know of other shadowboxes that you really like, share them!


