Asynchronous Animated Slider :: Redux

In my last post, we implemented our version of Yahoo's! animated sliders using the Bindows 2.5 toolkit. I demonstrated how to load and then animate nine random photos from Nikographer [Jon] one of my favorite photographers on Flickr.

Now, we're going to extend that and show you how we load his photos asynchronously (Ajax!). Just the like the last post, we'll display three photos at a time and use, more or less, the same slider interface as before.

Here's what we'll end up with --




To load the photos asynchronously, it'll be similar to how we asynchronously loaded rows for a grid (you can find that post here), but a little different. If you remember, we read in each row as we scrolled down. This is a bit inefficient because though we're loading on demand (which is a good thing), we're loading rows that the user won't see until he scrolls down. So, we're loading data that the user may never even use.

With the animated slider, we're going to load photos when we reach the end of our grid panel (our photos are added to a BiGridPanel). So, this only occurs when we move the grid panel to the left (meaning that we're pressing the right arrow button).

When we click on the left arrow button, we're moving the grid panel to the right. This means that we always view loaded/cached photos when clicking this button (cache means that the photo/image is kept in memory on the browser).

A similar thing happens when we click on the right button. If we haven't reached the end of the grid panel, we're viewing cached photos. Remember, unlike the asynchronous grid example, we're only going to load photos when we're at the end of the grid panel.

You'll know when we're loading Nikographer's photos because you'll see a throbber appropriately associated with the word "Loading..." (if you're interested, you can find public domain throbbers here).

But to load photos, we need to know that we're at the end of the grid panel. How do we do that?

In our first animated slider, do you remember how we implemented the sliding animation? By decrementing or incrementing the left style property, we moved the grid panel to the left or to the right.

We know the width of the grid panel. When the width is equal to the absolute value of the left style property (to move left we decrement), we load more photos from Flickr. Otherwise, we just take the photo from the cache.

Here's our mousedown event handler for sliding left --



Note the line --

if (pictureSlider2Panel.getWidth() == (left * -1))

That's how we test the end of the grid panel. When that occurs, using BiXmlLoader, we call that component's load() method asynchronously (starting with Bindows 2.0, this is by default asynchronous).

The slide right event handler is done the same way except the photos are always taken from the cache --



That's it!

You can see the example here. The code is found here.

Feel free to study, change, improve and use it. Just remember, if you do use it, please reference where you got it.

Have fun!