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 10×1 says to put all 10 images in a single row. photo-*.jpg is the input files and complete.jpg is the output file.
Pingback: 240 plugins jquery | najmahilmi
Pingback: JQuery: Пара Ñотен плагинов в одной заметке « abdurayimov.com
Pingback: 32+ jquery image display plugin « ChipMint
Pingback: 240多个jQueryæ’ä»¶ 功能强大 é½å…¨ | iXaml.net | WPF,Metro,Silverlight,Windows 8,WP知识站
Pingback: 240多个jQueryæ’ä»¶ 功能强大 é½å…¨ | 乱炖
Pingback: 240个jqueryæ’ä»¶ | 网络钻头
Pingback: 14 jQuery Plugins for Working with Images « Designers BLOG :: Updates, Resources, Tutorials for Designers:: HTML5, CSS3, HTML, CSS, JQUERY
Pingback: 14 jQuery Plugins for Working with Images « Designers BLOG :: Updates, Resources, Tutorials for Designers:: HTML5, CSS3, HTML, CSS, JQUERY
Pingback: jqueryæ’件列表ã€è】 | 5CM实验室-å¦ä¹ ã€åˆ†äº«ã€äº¤æµå¹³å°
Pingback: The ultimate jQuery Plugin List | Kollermedia.at
Pingback: Pawoot.com » เครื่à¸à¸‡à¸¡à¸·à¸à¸Šà¹ˆà¸§à¸¢à¹ƒà¸™à¸à¸²à¸£à¸žà¸±à¸’นาเว็บไซต์ สำหรับ developer
Pingback: Projelerinizde gerekli olabilecek 240 adet jQuery eklenti | Sekizncihayat Blog | Freelance Yazılım Hizmetleri
Pingback: 黑 白 世 界 » 240个jQuery实现AJAXæ’ä»¶
Pingback: 240个jqueryæ’ä»¶ | æžé™æ‰‹æŒ‡
Pingback: 好用的jQueryæ’ä»¶æ¸…å• | 东东东
Pingback: 200多个jQueryæ’ä»¶ | 闹心 Naoxx 资æº
Pingback: icecut的技术ä¹å› » jquery æ’件链接
Pingback: takeHoã®ã¸ãªã¡ã‚‡ã“日記 - takeHoã®ã¸ãªã¡ã‚‡ã“日記 | takeHoã®ã¸ãªã¡ã‚‡ã“日記
Pingback: 推è:240多个jQueryæ’ä»¶ - 䏿–‡å§
Pingback: 关于JQueryæ’件的资料 « HTML5å§
Pingback: 240多个jQueryæ’ä»¶ | ek32.com
Pingback: 240多个jqueryæ’件,值得收è—ï¼ | ç„¶ç„¶-php技术åšå®¢-专注php程åºè®¾è®¡ç„¶ç„¶-php技术åšå®¢-专注php程åºè®¾è®¡
Pingback: 42+ jQuery Image Gallery Plugins | Barkamedia
Pingback: jqueryæ’ä»¶240个 | 林洪优的åšåš
Pingback: æµ·é‡çš„jQueryæ’件帖,很ç»å…¸ — 逆è¢å§IT分享网
Pingback: | SunnyV
Pingback: JQuery æ’件列表 | 忘情ç¡