A Nice jQuery Plug-In That Mimics Apple's iPhoto App to Display a Group of Images
JQuery Plug-In: CJ Image FlipBox v1.0.0
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!
5 responses to "CJ Image Flipbox 1.0"
it would be nice if you could add a ling to a photo.
photo number 1 = onClick goto www.google.com
photo number 2 = onClick goto www.apple.com
Thank you for this great plugin.
Please let me know what you think about the idea :)
p.s. the demo has been updated with the new version.
Thank you very much dude.
that was great. :)
nice job
Nice script. but there is a bug. when you add two or more blocks, all of them having a tags.. only the last block in the mark up works.
BLOCK 1
images with a tag
BLOCK 2
images with a tag
only block 2 is able to pass all the correct a tags - block 1 only the first image is able to pass the correct a tag, the rest pass the first image a tag. hope all this makes sense.
Let me know if you need more info, I'll be happy to clarify.
thank you for the script
Great plugin!
I would like to post a "fix" to a problem I had. The problem arose when I had the plugin in a javascript generated dialog in the middle of the screen. The problem was the relative offsets were at pretty much 0 but the mouse coordinates were not relative. So the coordinate reads were 650-750 on my monitor maximized. Which meant it was outside the 0-100 range (with image width 100.) I found a small function which went through and added offsets of parents (for Y, I changed it for X). I replaced the Offsets with a call to this function passing in "this" as the parameter, and low and behold it worked:
function getX( oElement )
{
var iReturnValue = 0;
while( oElement != null ) {
iReturnValue += oElement.offsetLeft;
oElement = oElement.offsetParent;
}
return iReturnValue;
}
var self=this,pos=0;pos=parseInt(((e.pageX-os)/($(self).width())*self.imgs.length),10);
There is another place for the debug version which is using the offset as well, but thats just for text display for the debugging.
Here is a google doc of the modified code, note that there is a few other things in there I added to suit my needs so you should probably ignore that, but the stuff I underlined and bolded is what I modified to get it working:
https://docs.google.com/Doc?docid=0Acy6ZqoSOuRGZGdtdjVnc21fMTA0ZnY5amtoNGQ&hl=en
Let me know of any more problems.