jQuery Image Strip
Photo By Suzzie J
Working for Obu Web i’ve found myself spending less time on code I would say meets the definition of AJAX I put in my book and more time on code that used to be called DHTML. But I guess I’m ok calling it AJAX, at least its pronouncable and building little JavaScript widgets is fun.
Today’s widget is an Image Strip, it has a lot of real uses, but the way I like too use it is for fancy visual effects.
Check out the fancy image viewer below. Make sure to pick an image thats a lot large then the current image (start with 9 or 10).
As you can see, an image strip matched with a bit of animation makes for a very nice looking effect (The images by Josh Gomez don’t hurt either). These sort of tricks are really nice for times when you want to look like your using Flash without actually using it.
The basic idea is you take div give it a height and width set its overflow to hidden and then use it as a viewport. You put an absolute positioned image inside and then move an image left or right (or up and down) to view just 1 cell of the image strip.
So lets take a look at simple and useful example, a color chooser for a shirt in a shopping cart.
So the HTML is pretty simple, we have a div with an image in it, and a dropdown that run a javascript function to move our position on the strip.
The CSS is pretty simple but it sets up everything that is happening. Since overflow is hidden on the .strip container what part of the image strip were showing is just a matter of setting a negative left value on the img.
The JavaScript is a small object, it provides 2 methods, currentCell and move. currentCell is used to ignore move requests to the same cell and move is the api you interact with. When you create a new ImageStrip you specify the container, the width of each cell and the animation speed in milliseconds. If the speed is set at 0, we immediatly move which is useful for tasks like color versions. If its a larger number like 800 we get a neat animation effect which was shown in the fancy example at the begining of this article.
And finishing things up here is the full image.
Were gaining 2 main benefits from using an image strip like this. First we make less requests to the server, and if the images in question is small were saving overall file size since there is less overhead. Most importantly in this example there is no image load flash and wait since all the images are already loaded.
Image Strips are a great trick to add to your AJAX toolbox, let me know when you find a place to use one.
I’d like to thank Josh Gomez for helping me the images used in this article.
Stand-alone example versions of the code on this post are available in this posts examples directory.
Unix Tip
If you got a bunch of photos of the same size you can make the combined image strip using Image Magick’s montage command.
montage -geometry +0+0 -tile 10x1 photo-*.jpg complete.jpg
Breaking down the command, -geometry +0+0 tells montage to use no whitespace between the images, -tile 10x1 says to put all 10 images in a single row. photo-*.jpg is the input files and complete.jpg is the output file.
Nice job. Useing images and css this way are also known as “css sprites”. They are a good idea for rollovers as well: It keeps the request overhead low
http://www.informit.com/articles/article.asp?p=447210&rl=1
Very nice!
ImageMagick also works on Windows. I’m not shure about the montage command, though.
BTW: Where does jQuery come in to play?
Alex: Yeah, i actually have some slick sprite code around here that I use for Icons. When I finally release the code that uses it I’ll write a sprite specific article.
Alex: No clue on ImageMagick on windows, I guess i’ve installed it there before but doing cli stuff on windows always pains me since the shell is so bad.
jQuery is used for the animation effect and the selector support. You could implement something similar without any library at all if you wanted. I just already had jQuery in place and the animation effect is nice.
I know that it is not the point of this article, but the t-shirt example bugs me. Won’t it be better if you show a image with the t-shirt section transparent and change the background of the cell? That way the background will become the color of the t-shirt.
Great job! Just one suggestion: Use some more of jQuery’s features to get rid of inline script.
You can get rid of the ugly inline stuff by doing this:
Remove the onchange=”shirtStrip.move(this.value)” from the select box
Add an id to the select box, say, id=”shirtStrip”
Add this to your script:
$(function() { // Fires on document ready, to be sure all required elements are loaded
$(”#shirtStrip”).bind(’change’,function() { // Binds a function to the ‘change’ event of #shirtStrip
shirtStrip.move(this.value); // Does what it says
}
}
Untested, but i see no reason why it wouldnt work.
Binny: That might work in this super simple case, but t-shirts aren’t normally primary colors, they have textures logos.
Seventoes: That would work, of course it does show off the one downside of a fully unobtrusive approach. It requires more id’s on your document and requires more code. That being said it does look nicer.
Do you know where to find an image upload routine that uses jquery and php to show a thumbnail of images as they are uploaded?
nate: I haven’t seen anything along the lines of what your thinking, though I don’t think it would be that hard to get the basics up and running.
Seems like it would be trivial to make the strip slide divs through the viewport,
but I was wondering how to make the strip like a carousel so it loops from the last sprite, back to the first onNext… This would be sweet, and I would definitely steal your code
Josh:
Yeah actually you can slide through anything its just a matter of changing whats in the strip div
Making it loop back around is just a matter of detecting the end of the strip in move and then setting the left. Though if your using arrows the direction your moving things in could get a little screwy.
There is a bug in the “fancy image viewer”. If you go to image 10, then go straight back to image 1, image 1 will be incrementally too far left.
Hi,
I’m trying to figure out how to make the hyperlinks actually on top of the imagestrip itsself, so that you can have lets say 8 thumbnails in a strip and showing only 4 of them, then if you click on the most right one everything moves one up to the left.
Have you seen an example of this ?
Regards,
Robert
Robert: i’m not quite sure what your asking for but it should be possible.
yeah, it would be better if it could stitch divs together instead of forcing you to do image assembly. nice enough, but not something I could/would use in its present form.
[...] jQuery Image Strip (tags: plugin jquery javascript gallery) [...]
Nice image viewer. Good work.
[...] jQuery lightBox plugin. jQuery Image Strip. jQuery slideViewer. jQuery jqGalScroll 2.0. jQuery - jqGalViewII. jQuery - jqGalViewIII. jQuery [...]
[...] jQuery lightBox plugin. jQuery Image Strip. jQuery slideViewer. jQuery jqGalScroll 2.0. jQuery - jqGalViewII. jQuery - jqGalViewIII. jQuery [...]
[...] jQuery lightBox plugin. jQuery Image Strip. jQuery slideViewer. jQuery jqGalScroll 2.0. jQuery - jqGalViewII. jQuery - jqGalViewIII. jQuery [...]
[...] Joshua Eichorn’s Blog » Blog Archive » jQuery Image Strip Today’s widget is an Image Strip, it has a lot of real uses, but the way I like too use it is for fancy visual effects. [...]
[...] jQuery lightBox plugin. jQuery Image Strip. jQuery slideViewer. jQuery jqGalScroll 2.0. jQuery - jqGalViewII. jQuery - jqGalViewIII. jQuery [...]
[...] jQuery Image Strip. [...]
[...] QuickTime.SVG Integration. 图片(Photos/Images/Galleries)ThickBox.jQuery lightBox plugin.jQuery Image Strip.jQuery slideViewer.jQuery jqGalScroll 2.0.jQuery - jqGalViewII.jQuery - jqGalViewIII.jQuery Photo [...]
[...] jQuery Image Stip [...]
[...] jQuery lightBox plugin. jQuery Image Strip. jQuery slideViewer. jQuery jqGalScroll 2.0. jQuery - jqGalViewII. jQuery - jqGalViewIII. jQuery [...]
[...] jQuery lightBox plugin. jQuery Image Strip. jQuery slideViewer. jQuery jqGalScroll 2.0. jQuery - jqGalViewII. jQuery - jqGalViewIII. jQuery [...]
[...] jQuery lightBox plugin. jQuery Image Strip. jQuery slideViewer. jQuery jqGalScroll 2.0. jQuery - jqGalViewII. jQuery - jqGalViewIII. jQuery [...]
[...] jQuery Image Strip [...]
[...] jQuery lightBox plugin. jQuery Image Strip. jQuery slideViewer. jQuery jqGalScroll 2.0. jQuery - jqGalViewII. jQuery - jqGalViewIII. jQuery [...]
[...] jQuery lightBox plugin jQuery Multimedia Portfolio jQuery Image Strip jQuery slideViewer jQuery jqGalScroll 2.0 jQuery - jqGalViewII jQuery - jqGalViewIII jQuery Photo [...]
[...] jQuery lightBox plugin. jQuery Image Strip. jQuery slideViewer. jQuery jqGalScroll 2.0. jQuery - jqGalViewII. jQuery - jqGalViewIII. jQuery [...]
[...] jQuery Image Strip [...]
[...] jQuery lightBox plugin. jQuery Image Strip. jQuery slideViewer. jQuery jqGalScroll 2.0. jQuery - jqGalViewII. jQuery - jqGalViewIII. jQuery [...]
[...] jQuery lightBox plugin. jQuery Image Strip. jQuery slideViewer. jQuery jqGalScroll 2.0. jQuery - jqGalViewII. jQuery - jqGalViewIII. jQuery [...]
[...] jQuery lightBox plugin. jQuery Image Strip. jQuery slideViewer. jQuery jqGalScroll 2.0. jQuery - jqGalViewII. jQuery - jqGalViewIII. jQuery [...]
[...] jQuery lightBox plugin. jQuery Image Strip. jQuery slideViewer. jQuery jqGalScroll 2.0. jQuery - jqGalViewII. jQuery - jqGalViewIII. jQuery [...]
[...] jQuery Image Strip. [...]
[...] jQuery Image Strip. [...]
[...] jQuery lightBox plugin. jQuery Image Strip. jQuery slideViewer. jQuery jqGalScroll 2.0. jQuery - jqGalViewII. jQuery - jqGalViewIII. jQuery [...]
[...] jQuery lightBox plugin. jQuery Image Strip. jQuery slideViewer. jQuery jqGalScroll 2.0. jQuery - jqGalViewII. jQuery - jqGalViewIII. jQuery [...]
[...] Image StripShow an image gallery in a peculiar interface. [...]
[...] jQuery lightBox plugin. jQuery FancyBox. jQuery Multimedia Portfolio. jQuery Image Strip. jQuery slideViewer. jQuery jqGalScroll 2.0. jQuery - jqGalViewII. jQuery - jqGalViewIII. jQuery [...]
[...] jQuery lightBox plugin. jQuery Image Strip. jQuery slideViewer. jQuery jqGalScroll 2.0. jQuery - jqGalViewII. jQuery - jqGalViewIII. jQuery [...]
[...] jQuery lightBox plugin. jQuery Image Strip. jQuery slideViewer. jQuery jqGalScroll 2.0. jQuery - jqGalViewII. jQuery - jqGalViewIII. jQuery [...]
[...] jQuery lightBox plugin. jQuery FancyBox. jQuery Multimedia Portfolio. jQuery Image Strip. jQuery slideViewer. jQuery jqGalScroll 2.0. jQuery - jqGalViewII. jQuery - jqGalViewIII. jQuery [...]
[...] jQuery lightBox plugin. jQuery Image Strip. jQuery slideViewer. jQuery jqGalScroll 2.0. jQuery - jqGalViewII. jQuery - jqGalViewIII. jQuery [...]
[...] jQuery lightBox plugin. jQuery Multimedia Portfolio. jQuery Image Strip. jQuery slideViewer. jQuery jqGalScroll 2.0. jQuery - jqGalViewII. jQuery - jqGalViewIII. jQuery [...]
[...] ThickBox. jQuery lightBox plugin. jQuery Image Strip. jQuery slideViewer. jQuery jqGalScroll 2.0. jQuery - jqGalViewII. jQuery - jqGalViewIII. jQuery [...]
[...] jQuery lightBox plugin. jQuery Image Strip. jQuery slideViewer. jQuery jqGalScroll 2.0. jQuery - jqGalViewII. jQuery - jqGalViewIII. jQuery [...]
[...] jQuery lightBox plugin. jQuery Image Strip. jQuery slideViewer. jQuery jqGalScroll 2.0. jQuery - jqGalViewII. jQuery - jqGalViewIII. jQuery [...]
[...] QuickTime. SVG Integration. 十、图片(Photos/Images/Galleries) ThickBox. jQuery lightBox plugin. jQuery Image Strip. jQuery slideViewer. jQuery jqGalScroll 2.0. jQuery - jqGalViewII. jQuery - jqGalViewIII. jQuery [...]