There and Back Again

jQuery Image Strip

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.

178 thoughts on “jQuery Image Strip

  1. Pingback: Des centaines de liens JQuery | Juste le zeste...

  2. Pingback: Collection of 50+ AJAX Photo/Image/Gallery Plugins - DoNotYet.com

  3. Pingback: 240多个jQuery插件下载地址

  4. Pingback: 克兰印象 » 200+ jQuery插件

  5. Pingback: 开心007 » 14 jQuery Plugins for Working with Images

  6. Pingback: 01WEB-专注于 网页设计 网站开发 用户体验 收集创意 采集灵感 发现喜悦 纯净生活 » Blog Archive » 两百个jQuery插件集合

  7. Pingback: 使用jquery的秘籍 - 闪奕Flash培训博客———我爱Flash

  8. Pingback: He Min Blog» Blog Archive » 各种jQuery插件

  9. Pingback: Пара сотен плагинов в одной заметке

  10. Pingback: jQuery插件,N多可用插件收集备用(转帖) « WEB前端开发

  11. Pingback: En iyi 240 adet JQuery Uygulaması « ABDULLAH TURHAN

  12. Pingback: En iyi 240 adet JQuery Uygulaması « ABDULLAH TURHAN

  13. Pingback: 可乐加糖 » Blog Archive » Jquery 的插件库(转载)收录下来,方便以后查找。

  14. Pingback: 240+ плагинов к Jquery ot Jurgen Koller-а - Блог Геворка

  15. Pingback: pligg.com

  16. Pingback: 27 луших плагинов для фото и списков изображений « Ваша Империя – Интернет

  17. Pingback: Perfect Galleries with Jquery « artuc

  18. Pingback: 14 jQuery Plugins for Working with Images « PSD to HTML , Slicing PSD to HTML

  19. Pingback: 240 удивительных плагинов для jQuery | Soul DS

  20. Pingback: 240 удивительных плагинов для jQuery | Soul DS

  21. Pingback: Çok İşinize Yarayacak 240 Adet Jquery Eklentisi | Beytullah GÜRPINAR

  22. Pingback: 240个精选的jQuery插件 | CssRainbow.cn

  23. Pingback: 阿飞的博客 » 240多个jQuery插件

  24. Pingback: jQuery插件 | DesignStudio-50M深蓝

  25. Pingback: jQuery插件大合集(240多个) | TechTrack

  26. Pingback: Macrostone Blog » Blog Archive »

  27. Pingback: Jquery Kütüphanesi « Birebir Paylaşım

  28. Pingback: 经典海量jQuery插件 « 伍柒

  29. Pingback: 强烈推荐:240多个jQuery插件 « theU0net.Blog

  30. Pingback: 240 plugins jquery : AdaptBlog

  31. Pingback: Jquery plugin 240个插件 – FeeBoy|匪帮

  32. Pingback: 14 Plugins em jQuery para Trabalhar com Imagens

  33. Pingback: 14 jQuery Plugins for Working with Images « HUE Designer

  34. Pingback: 小叶子 » Blog Archive » jQuery插件列表

  35. Pingback: 240 plugin hữu ích của JQuery - Vivui.net

  36. Pingback: jquery插件,240个 | 对酒当歌WEB开发

  37. Pingback: Jquery – Mega Lista de Plugins : : BL Ti

  38. Pingback: 经典的jQuery插件集合 | 5U Magazine

  39. Pingback: 30 Trendy AJAX, jQuery And Image Galleries You May Like | PSD TO HTML XHTML Java MARKUP Them Shopping Cms Coding Service

  40. Pingback: 30 Trendy AJAX, jQuery And Image Galleries You May Like « Royale9designs a web and graphic design studio – Web Design Services, Web Development Services, SEO Services, Graphic design services, kolhapur, India

  41. Pingback: 雨中人 » Blog Archive » 240多个超实用的jQuery插件推荐

  42. Pingback: jQuery插件大全,收藏起来吧 | LAMP开源技术

  43. tun

    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?

  44. Pingback: Lista de plugin-uri jQuery « birkof's blog

  45. Pingback: 大地山河 » jQuery / 经典海量jQuery插件

  46. Pingback: jQuery plugin 大集合 : : 網藝工作室-資訊技術Blog

  47. Pingback: 15 jQuery Plugins That Will Rock Your Website | [Re]Encoded.com

  48. Pingback: •牛奶糖的生活♡ » 200+ jQuery插件

  49. Pingback: 1000 ressources pour le développement web et WordPress : la grosse grosse liste