May
11

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.
  • Upload the JavaScript files in the js folder to the appropriate location on your Web site. I decided to keep everything together so I put mootools.js and slimbox.js in the aaronwest.net/blog/includes/slimbox folder. If you downloaded the jQuery implementation you'll only have one js file to upload (slimbox2.js).
  • Edit your BlogCFC layout.cfm file adding the appropriate includes. See the code snippet below to see exactly what I added.

<script type="text/javascript" src="#application.rooturl#/includes/slimbox/mootools.js"></script>
<script type="text/javascript" src="#application.rooturl#/includes/slimbox/slimbox.js"></script>
<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:

<a href="http://www.site.com/images/Sample_Large.jpg" rel="shadowbox" title="Image Caption"><img src="http://www.site.com/images/Sample_Thumb.jpg"/></a>

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:

Aaron West's Gravatar
About this post:

This entry was posted by Aaron West on May 11, 2009 at 8:00 AM. It was filed in the following categories: ColdFusion, BlogCFC, Site News, Ajax. It has been viewed 14791 times and has 13 comments.

13 Responses to Adding Slimbox to BlogCFC in Five Steps

  1. I think that's a really nice idea and a great effect.

  2. Thanks Ben. It's a much better way to present images in my opinion.

  3. Most definitely; I know on my blog, it can be very tiresome getting everything to fit in width 545px!

  4. jax's Gravatar jax

    Cool! I did something similar with a plugin for blogcfc, you can read about it here:
    http://www.schildmos.nl/index.cfm/2008/1/24/Lightb...

  5. @jax - Thanks for sharing. Your implementation of Lightbox looks quite nice. In your blog post you say the plugin handles thumbnail creation. How is that happening? From what I can tell Lightbox (or Slimbox) is just a client-side display library and doesn't have any UI for handling file uploads. Fill me in.

    Lastly, I am thinking of downloading the jQuery version of Slimbox and updating my blog. There shouldn't be any visual difference, but I like jQuery a good bit and having it in my includes would mean I could use it going forward.

  6. jax's Gravatar jax

    The plugin I wrote includes a few extras. It includes a lib for auto thumbnail creation after you upload images in a module which I also included that shows up in your admin section. Quite nice, you can even superimpose a logo or text on uploaded images. :-)

  7. http://uxoinfo.com/blogcfc/client/page.cfm/PhotoGa...
    Hello -- I came across your article adding the Slimbox feature to BLOGCFC. Thanks and I will try it.
    I had a question - I am using the slideshow feature that Ry has in BlogCFC see link above -- however, since my image library is getting too large, it's becoming a pain to view the images one by one -- I am looking for a tool to view thumbnails and images and scan rapidly -- I would user Flicker or another outside website for image hosting but I want it to be transparent and have control of the images - all of the website I see are not transparent and want you to become a member....any thoughts ideas?

    Thanks

  8. @Jonathan - Sorry for the late reply. It sounds like you are wanting something like the "Image Set" feature of Slimbox. Check out the following demo page which has an example image set that shows this type of user interaction.

    http://www.digitalia.be/demo/slimbox/

  9. Yes - thanks - been trying to implement that in Blog CFC with no luck despite following the directions at

    http://www.schildmos.nl/index.cfm/2008/1/24/Lightb...

    Have you -- or do yo know anyone that I can hire to make it work with my Blog CFC based website.

    Thanks

  10. @jonathan I'd be happy to implement it for you but it's probably not worth the money it would cost. I'd have to charge you a minimum of one hours work. If you follow the examples on the link I posted you might be able to get it working on your own. It'd be a good learning excercise.

  11. Hello Aaron,
    Thank you very much for the information, I've just apply it on a friends blog I'm building, it works perfectly.
    I've also added some code on the imgwin.cfm on the admin directory to convert and the uploaded image to 550 px and save it, it also saves the image on its original size in a sub folder named "full". Here is the code:
    <!---this is line 26 here i added the /full---><cffile action="upload" filefield="form.newimage" destination="#imageDirectory#/full" nameconflict="makeunique">
    <!---this is line 32---><cfset fileName = cffile.serverFile>
    <!--- HERE THE CODE TO RESIZE THE IMAGE --->
    <cfset uploadedfile = "#cffile.serverDirectory#/#cffile.serverFile#">
    <cfimage source="#uploadedfile#" name="myImage" action="read">
    <cfset ImageSetAntialiasing(myImage)>
    <cfset ImageScaleToFit(myImage,550,600,"mediumQuality")>
    <!--- HERE THE CODE TO WRITE THE RESIZED IMAGE --->
    <cfimage source="#myImage#" action="write" overwrite="yes" destination="#imageDirectory#/#cffile.serverFile#">

    First I created the "full" sub directory manually.

    I hope this could be useful to someone.

  12. @Gustavo - Thanks for commenting and providing the additional code. As you said it might be useful to someone. I just upload my files manually typically placing a small image and a full size image into a specific directory within my blog. Then I just wire up the slimbox code in my blog post by copying an existing set of code from a previous blog post.

  13. May be its an exaggeration but I also modified the file entry.cfm in the admin folder, specifically the function newImage, by doing this when I upload an insert an image to an entry y get the image tag within the link tag including the slimbox code.
    Here is the code:

    function newImage(str) {
    var imgstr = '<a href="#application.rooturl##application.utils.fixUrl("/#sImgRoot#/full/")#' + str + '" rel="lightbox" title="Imagen"><img src="#application.rooturl##application.utils.fixUrl("/#sImgRoot#/")#' + str + '" /></a><br/>';
    $("##body").val($("##body").val() + '\n' + imgstr)
    }

Leave a Reply

Leave this field empty

If you subscribe, any new posts to this thread will be sent to your email address.

RSS