Last week I investigated options on extending the well known Lightbox 2 functionality with the ability to display other types of media files, in particular swf-files. This for the purpose of my blog, where I wanted to have a good user experience on viewing uploaded screencasts (or 'videotutorials', or 'webvideos', or whatever you call them). I fiddled with it a bit, but soon discovered it would take me quite some time to adjust it to my needs.

But behold, after just a minute of googling I stumbled upon Shadowbox Media Viewer by Michael J.I. Jackson, a piece of software released just a couple of days ago. And thankfully, it fulfilled all my needs (and quite a bit more than that!). What exactly is shadowbox? According to the site

"Shadowbox is a cross-browser, cross-platform, cleanly-coded and fully-documented media viewer application written entirely in JavaScript. Using Shadowbox, website authors can display pictures and movies in all major browsers without navigating away from the linking page."

Out of the box it works really great in static HTML, or even – semi static – ASP.NET pages. I wanted however to add it to my blog, wich is driven by BlogEngine.NET (I started this blog only on feb. 1^st). It turned out to be pretty easy, and I wanted to share this experience to the world, so I dedicated a screencast to it.

Check it out - just click the image, it should load the screencast in a shadowbox itself (hey, what else did you expect :-). Please notice however that the audio quality is not optimal. It has some clicks and squeaks. I apologize for that. Other properties are:

• A 17-minute walkthrough on extending a fresh BlogEngine.NET installation with shadowbox.
• Starting with downloading the needed files, incorporating them to the blog, ending with adding a new post that contains 'shadowbox-ed' media like hi-res images and swf-files.
• Please allow the video a couple of minutes to load. It should take a while, but I hope it's worth the wait. (Weird experience: Firefox loads the video a lot faster that Internet Explorer, given the same amount of bandwith…)

If this video is useful to you, or you have other comments, please feel free to leave a note.