Smooth scrolling image list

I had someone ask me about fitting more images in a small area and the way flickr does their image scrolling came to mind. I wanted to see how hard it was to do and as it turns out it isn’t hard to do at all thanks to script.aculo.us.

I’m making this as simple as I can to illustrate just how nice the new tools like script.aculo.us are.

Step 1. You need a box and some images. You will also need to know the size of the images or at least the size of the largest one. In an attempt to keep this simple I’m going to assume all the images are the same size.

<div id="imageBox">
  <div id="imageBoxInside">
    <img src="http://www.ioncannon.net/examples/slide/images/turtle_sm_1.jpg" />
    <img src="http://www.ioncannon.net/examples/slide/images/elephants_sm_1.jpg" />
    <img src="http://www.ioncannon.net/examples/slide/images/turtle_sm_2.jpg" />
    <img src="http://www.ioncannon.net/examples/slide/images/elephants_sm_2.jpg" />
    <img src="http://www.ioncannon.net/examples/slide/mages/turtle_sm_3.jpg" />
    <img src="http://www.ioncannon.net/examples/slide/images/elephants_sm_3.jpg" />
    <img src="http://www.ioncannon.net/examples/slide/images/turtle_sm_4.jpg" />
    <img src="http://www.ioncannon.net/examples/slide/images/elephants_sm_4.jpg" />
    <br/>
  </div>
</div>

Notice from this code that we have an outer box and an inner box. We will next want to make the outer box smaller than the inner box so that only a few of the images can be seen at one time.

Step 2. To hide the extra images we give the outer box a set width, in this case I want to show only 2 images at a time and each image is 180px wide so I make the outer box 360px wide. Notice that the overflow is hidden. The hidden overflow is what keeps the images that are in the inner box but not within the outer box’s width hidden.

I’m using floats to lay the images out one next to the other. Because of this we need to give the inside box a large width so that it will not wrap the floated images.

<style type="text/css">
#imageBox { margin: auto; width: 360px; border: 1px #000 solid; overflow: hidden; }
#imageBoxInside { width: 10000px; }  #imageBox img { float: left; padding: 0px; margin: 0px; }
#imageBox br { clear: both; }
</style>

Step 3. Now for the magic. You need the latest version of script.aculo.us because I use the Effects.Move function and they have changed Effects.MoveBy to Effects.Move only recently.

We now create two functions to move the images either one step to the right or one step to the left. To refine our transitions even further, we decided to find different options for adjusting the animation and ensuring smoother movement. Each step is the size of a single image so that when one is triggered, it moves one image out of view and brings another image into view. As you can see from the following code, this is extremely easy using the script.aculo.us library.

function moveToPrevious()
{
  new Effect.Move('imageBoxInside', { x: 180, y: 0, transition: Effect.Transitions.sinoidal });
}
function moveToNext()
{
  new Effect.Move('imageBoxInside', { x: -180, y: 0, transition: Effect.Transitions.sinoidal });
}

Step 4. The only thing that remains is to connect everything together. We add a couple links to move call the next and previous functions defined above.

<a href="javascript:void(0);" href="javascript:void(0);" onclick="moveToPrevious(); return true;"><img src="previous.png" /></a>
<a href="javascript:void(0);" href="javascript:void(0);" onclick="moveToNext(); return true;"><img src="next.png" /></a>

And that is all there is to it. See it in action!