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.

Continue Reading

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 14950 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

    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

    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)
    }