Jquery Image slider - load content asynchronously

Hi all,

I have created a site that my friends and I are using and Im trying to implement a simple image slider.

I can do this without any issues in its simplest form. The issue though is that there are 10 people posting pictures and the site displays their last 6. What I want to do is create a button after each row that allows the user to scroll through that users pictures, but i dont want to preload all images first as this will make the page painfully slow.

this image shows what I maen - the black arrow would make that particular row scroll right - loading images as it went.

http://screencast.com/t/eSrppYOSi

does this make sense?

is it possible?

Yes it does. You can use Ajax to retrieve from the server the next set of images.
The Bulletproof Ajax book has a good example at the start of Chapter 6, which you can see at their [url=“http://bulletproofajax.com/code/”]codecode and demos page.

Off Topic:

I wonder if paul_wilkins is on a percentage of the royalties for that book :wink:

because you don’t need ajax at all for this. You could have all the path names to the images stored in a multi-dimensional array and then preload the images just before you want to make them visible as you scroll through each person’s images.

But if you do want to use ajax, there are plenty of very good free tutorials on google as well.

When I come across a resource that covers the topic as well as has been done in that book about Ajax, I let people know about it so that they can learn how to best deal with the topic. There is no need for royalties at all in any way.

THank you both for the help!

I will look into both solutions.

Max Height - do you know of an example anywhere that shows what you mean?