I've been adding photographs and screenshots to my blog posts for years using simply image tags. I've grown tired of the lack of full screen images and always worrying if the 520px images are even useful. And I've seen all the snazzy imaging tools out there giving users a better interaction with photos on Web sites. This weekend I decided to look into adding Lightbox to BlogCFC and wound up with Slimbox, a visual clone of Lightbox. The major difference between the two is Slimbox is super lightweight and very customizable.
To see Slimbox in action click the photo of my son below. If you want to add Slimbox to your installation of BlogCFC here's how to do it.
- Download Slimbox here. There's a version that works with MooTools or jQuery so pick your favorite flavor.
- Extract the zip file after it has been downloaded. There are example files you can download to see Slimbox in action. These are also useful implementation guides. The files you'll want to pay attention to are in the css folder and js folder.
- Upload the files in the css folder to the CSS directory on your Web site. For my installation of BlogCFC this was aaronwest.net/blog/includes/slimbox. I created this folder to hold all the files.
- Edit your BlogCFC layout.cfm file adding the appropriate includes. See the code snippet below to see exactly what I added.
<link rel="stylesheet" href="#application.rooturl#/includes/slimbox/slimbox.css" type="text/css" media="screen" />
Once you have all the Slimbox code uploaded and the layout.cfm file edited all you need to do is link your images a certain way. Here's an example:
Notice the "rel" attribute, that's what triggers all the magic. I ran into a few issues while setting all this up so there are a few things to watch out for. First, and this might seem obvious but, if you're using the version that utilizes MooTools the mootools.js include must be present and it must be before the slimbox.js include. Second, the closing tags for the two script includes cannot use shortened XHTML syntax (<script />). I've never run into this before, but closing the tags using that syntax caused my blog to break. Bad. So spell out a full closing script tag. Finally, there are a lot of extras built into Slimbox including Flickr and Picasa integration, next/previous photo gallery browser, and an autoloader feature that loads Slimbox on all images without the "rel" attribute in the anchor tag. Check out the Slimbox site for a list of features or just peek at the download files.
Now, for an example: