In an earlier post, I mentioned a shadowbox that I really like that is made available to us by Michael J. I. Jackson. I've discovered another one that I like even better as it offers huge flexibility: MediaBoxAdvanced by John Einselen at iaian7.com.
I'm learning more than I ever knew about this type of toolset. For example: some of them run on top of a javascript framework. That's way over my head. I just get the idea that you must upload a specific version of MooTools (which is the javascript framework MediaBoxAdvanced uses) to make the MediaBoxAdvanced work.
I use my personal blog as an experimental proof of concept before trying things on this, my professional blog. As a result, I've learned that different types of, and even versions of the same javascript frameworks, regrettably conflict with other frameworks and versions. For example: I used a very cool "SlidingTabs" on my personal site but found that it runs on a framework that conflicts with MediaBoxAdvanced. Sad. I liked them both!
MediaBoxAdvanced allows you to embed a significant number of media types and sources into the shadowbox, including more types of social media than I had even heard of!
In fact, the "Happy New Year" popup shadowbox I will display for at least part of January, 2010, is driven by this cool tool. It opens when the page is displayed or reloaded by the user and would work really well for announcements. You can even have links to other URLs open in a shadowbox, like this one that opens in a shadowbox I constrained to 1000w by 640h! Too cool!
Additionally, you can include a Title and Subtitle in the mediabox. Either can contain links as you can see in the mediabox contained in this post. So, if you're interested in installing this on your site, a few things to note:
- Installation is a bit more complicated than Michael J. I. Jackson's shadowbox. Installation is very doable, but you have a few more steps to set everything up. Steps include, for example:
- uploading MooTools
- uploading some CSS files
- uploading a folder of image files
- tweaking the locations of the image files in the CSS files for your setup
- adding the code for your javascript and CSS file locations to your site header
- adding the code each time you wish to evoke the mediabox
- Run a test first to be certain that any other javascript frameworks you may be using, even other versions of MooTools will not conflict with one another.
- Getting your head around the code is a short learning curve. Since this supports so many media types, many of them have their own code requirements. Most of us probably have our own favorite media types that we would embed. Save the code snippets for those for handy use.
It sounds a bit worse than it really is, but I mention this because you will need to set aside some time to accomplish this. Once it's setup, invoking MediaBoxAdvanced isn't that difficult, especially if you set up some generic code snippets you simply paste into your document and then edit with the correct URL information for your media.
Hopefully, when I post this, my template file will update with all of the correct code that will initiate the use of MediaBoxAdvanced. I'll then add the new mediabox that welcomes in the new year. If it doesn't work properly because I forgot something, worst case scenario: time will stand still! Well, fingers crossed!
