Creative Juice Bo. Co. Presents

A Nice jQuery Plug-In That Mimics Apple's iPhoto App to Display a Group of Images

JQuery Plug-In: CJ Image FlipBox v1.1.1

Apparently I'm a gluten for punishment, because I'm at it again. I done gone and made me another jQuery plug-in. CJ Image FlipBox v1.0 is a jQuery plug-in that displays a series of images based on the mouse position within the display box. The left-most side of the FlipBox displays the first image, where as the right-most side displays the last image. Moving between the two, displays any other images that fall between. This is an attempt to mimic Apple's iPhoto software and the way it displays events. As an added bonus, I actually took the time and tested it in the following browsers: FireFox 3.5, IE6, IE7, IE8, Safari 4. (Lesson learned from my first jQuery Plug-In!)

I made this plug-in initially for a few e-Commerce sites I'm working on. It's a nice way to display multiple images for a product, but I think it has other uses as well. I'll leave that up to you to discover on your own. So hit up the following download links and grab yourself a copy today!

Example Usage

I tried to keep things a simple as possible. Basically you just need to create one or more FlipBoxes that contain a series of images. The Plug-In can handle multiple FlipBoxes with any number of images inside. I would gather that the only real limit is the strain you will put on the user for downloading the page. (i.e. a lot of large images my take some time). All you need to do is create some <div> blocks that have some images within like this:

<div class="cj_image_flipbox_block">
    <div class="cj_image_flipbox_pics">
        <img src="my_image_01.jpg" alt="Image 1" width="180" height="240" /><br />
        <img src="my_image_02.jpg" alt="Image 2" width="180" height="240" /><br />
        <img src="my_image_03.jpg" alt="Image 3" width="180" height="240" /><br />
        <img src="my_image_04.jpg" alt="Image 4" width="180" height="240" /><br />
        <img src="my_image_05.jpg" alt="Image 5" width="180" height="240" />
    </div>
</div>

To initiate everything, you need to call the Image FlipBox plug-in like so:

$("div.cj_image_flipbox_block").cjImageFlipBox({});

The CSS is simple as well. There really only one element we need to style and that's the class cj_image_flipbox_block. The other div (cj_image_flipbox_pics) is used by the plug-in to find the images. I made it this way in case you wanted to add another element to the block (like a caption or title). Here's a basic example of the CSS I used on the demo page:

/*
   styles for cj image flipbox
----------------------------------*/
div.cj_image_flipbox { display: block; width: 100%; height: auto; }
div.cj_image_flipbox_block { position: relative; display: block; width: 180px; height: 240px; overflow: hidden; border: 2px solid #000; margin-right: 10px; margin-bottom: 10px; float: left; }
div.cj_image_flipbox_block br { display: none; }

That's about as simple as you can get, right? If you would like to see it in action, check out the demo page. And as always, if you have any problems or question, be sure to let me know. My sole reason for existance is to make you happy!

Release Notes

This release fixes a minor issue with the way I was calculating the mouse offset. Big thanks goes out to user Debug for pointing this out. Thanks!