Lightboxing, Control.Modal style

no comments yet, post one now

You might have noticed a minor style change in the most recent blog entries. I’ve decided (from now on) to use a light-box for showing off any embedded videos and (biggish) images on the page. It keeps the layout tidy and allows you to focus on the video you’re watching or image your viewing, without distraction.

All of this is made possible using Control.Modal, a light weight, unobtrusive JavaScript library for creating modal windows and lightboxes using content that is already on the page. So with javascript turned off, everything still works, with the links navigating to anchor tags in the page.

At the moment I am applying display:none; on the modal content to avoid a visible onLoad jump effect as the content gets hidden by Control.Modal javascript. I’ll be changing this (since doing this hides the content when javascript is off, and CSS is on) – There’s also a small bug with the tv-icon link style on IE6.

In Mephisto, I was able to create my own custom ‘Modal Macro’ filter, so I can easily apply the effect to any content in my articles. Here is the code for doing just that. Save this as modal_macro.rb in the lib/ folder for any new or existing vendor/plugin. As usual, any comments, questions or suggestions are appreciated.

no comments yet, add yours below

Leave a comment