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.

.strip {
        position: relative;
        overflow: hidden;
        border: solid 1px black;
        height: 100px;
        width: 100px;
}
.strip img {
        position: absolute;
        left: 0px;
        top: 0px;
}

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.

function ImageStrip(container,cellWidth,speed) {
	this.container = $(container);
	this.image = this.container.find('img');
	
	this.cellWidth = cellWidth;

	this.speed = speed;
} 

ImageStrip.prototype = {
	move: function(to) {
		var from = this.currentCell();

		if (from == to) {
			return false;
		}

		var newLeft = (this.cellWidth * (to-1) * -1);

		if (this.speed > 0) {
			this.image.animate({left:newLeft},this.speed);
		}
		else {
			this.image.left(newLeft+'px');
		}

		return true;
	},
	currentCell: function() {
		var left = this.image.left();
		if (left == 'auto') {
			left = 0;
		}
		else {
			left = parseInt(left);
		}

		return (left/this.cellWidth);
	}
}

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.

177 thoughts on “jQuery Image Strip

  1. Pingback: TECHONE BLOG-中一科技作品博客 » Blog Archive » 强烈推荐:240多个jQuery插件

  2. Pingback: Jquery的N个插件 | php技术交流|我是陈|54chen.com

  3. Pingback: I’m Chain » jquery » JQuery Plugin 2008

  4. Pingback: JQuery应用实例 » 挂念

  5. Pingback: 240 plugin hữu ích của JQuery « Anhcaxomlieu’s Blog - Phạm Ngọc Hùng BKA

  6. 妈妈宝宝网

    中国妈妈宝宝网专业提供孕妇怀孕手册,孕妇常识,育儿常识,儿童资讯,同时妈咪宝贝网也是孕妇,育儿,儿童护理交流好平台

  7. Pingback: Mais de 200 Plugins utilizando Jquery « Jorge Eduardo

  8. Pingback: » 240 plugins JQuery Darío Ferrer

  9. Pingback: » 240 plugins JQuery Darío Ferrer

  10. Pingback: VietNam PHP Blog » Blog Archive » 240 plugin hữu ích của JQuery

  11. Pingback: DOUAMI » Plugins pour jQuery

  12. Ralph

    It’s a nice image viewer, but it’s a pitty that you have to use a long imagestrip instead of single images. Like this it take’s alot of loading time

  13. Pingback: 100+ jquery插件应用,让你的Web开发事半功倍 | 高手网

  14. Pingback: 14 jQuery Plugins for Working with Images

  15. Pingback: 画像表示に使えるjQueryプラグイン 14選 - ElectronicBrain is eating BreakFast

  16. Pingback: 14个关于图像处理的jQuery Plugins - Code Index

  17. Pingback: 14 jQuery Plugins for Working with Images « DC Guys’s Resource Sharing Blog

  18. Pingback:   14 jQuery Plugins for Working with Images by Web Front

  19. Pingback: WEB SİTESİ İÇİN ÜCRETSİZ JAVASCRİPTLER,WORDPRESS JAVASCRİPT,DRUPAL JAVASCRİPT,KOLAY JAVASCRİPTLER,WEB TASARIM İÇİN RESİM SCRİPTLERİ,WEB SİTESİ RESİM GALERİ SCRİPTİ |

  20. Pingback: http://www.scriptremix.com/

  21. Pingback: 10 галерей для Вашего сайта | Блог Web - мастера | Блог Web-мастера

  22. Pingback: JQuery Image Plugins | Expertz

  23. Pingback: Think Studio » Blog Archive » 14个关于图像处理的jQuery Plugins

  24. Pingback: Open Source Blog » Blog Archive » 14 jQuery Plugins for Working with Images!

  25. Pingback: 240 plugin hữu ích của JQuery « Thông tin – Quảng cáo – Giới thiệu

  26. Pingback: JQuery javascript library | Benson's Personal Blog

  27. Pingback: 240多个jQuery插件 « oh2w.com

  28. Pingback: 240 de pluginuri jquery | javascript&jquery

  29. Pingback: 240+ awesome Plugins in the List « Er.Krushna Chandra Muni :: Website Design Orissa,Website Design Bhubaneswar,Indian Web Designer,Indian Freelancer,website design india

  30. Pingback: Mr. Nqdungx » Blog Archive » 240 jQuery plugins

  31. Pingback: 240 plugin hữu ích của JQuery « Nothing like Impossible – Đỗ Mạnh Hùng

  32. Pingback: 240 plugin hữu ích của JQuery

  33. Pingback: 240多个jQuery插件 | Shepgala Design

  34. Pingback: 强烈推荐:240多个jQuery插件 - Hobo

  35. Pingback: 200 jQuery plugins | Sinoyan

  36. Pingback: 200+ jQuery插件 | 帕兰映像

  37. Pingback: jQuery插件下载地址大全

  38. Pingback: 240 plugins jquery - AdaptBlog

  39. Pingback: JQuery插件 | 老猪和章鱼的小世界

  40. Pingback: jQuery Eklentileri 1 « Webmaster Destek Cms Seo Makaleleri

  41. Pingback: Free Style Live » Blog Archive » 强烈推荐:240多个jQuery插件

  42. Pingback: [JS] MEGA LISTA DE PLUGINS | Leonardo Miranda

  43. Pingback: 240多个jQuery插件,只有你想不到的,没有你找不到的 | 企业推广,网站优化 - 日Work

  44. Pingback: Some Useful Jquery Applications for your Web « Er.Krushna Chandra Muni :: Professional Web Developer,Website Design Orissa,Website Design Bhubaneswar,Indian Freelancer,website design india

  45. Pingback: 弹指神功 » Blog Archive » 强烈推荐:240多个jQuery插件

  46. Pingback: 240 plugins Jquery | flazann

  47. Pingback: 20 AJAX галерей на jQuery | ShuBlog

  48. Pingback: List of jQuery plugins » IMvsMI blog

  49. Pingback: JQuery: Пара сотен плагинов в одной заметке @ Тестовый блог