Looking for a jQuery Carousel plug-in with in place AJAX refresh

Question

I'm looking for a similar plug-in to what you see on Amazon's homepage. Scroll to the bottom and check out how the carousel actually works. Notice that when you click right or left, you get an AJAX refresh (not an entire slide of pictures which is what most carousel plug-ins do).

So I've been looking for a jQuery based plugin to do that. I've seen several jQuery carousel plug-ins but they all do the slide effect. That's not what I'm looking for. I want to do the in place AJAX refresh action like on Amazon.

So hopefully to save me some time searching, has anyone here seen a jQuery carousel plug-in that does it this way? That when you click right or left, it does an AJAX call and is able to show the intermediate processing animated gif like this?

Answer 1

I didn't find anything but it shouldn't be too hard to write something.

Use PHP, Perl, Python, .NET, etc and create a server side script that returns a JSON object. Since you only asked for help with jQuery I assume you know how to write your own server scripts. The following is just one way you could do this using jQuery.

Return a JSON object like this...

{"items":[{"img":"http://www.png","url":"http://www.html","name":"Item A"},
          {"img":"http://www.png","url":"http://www.html","name":"Item B"},
          {"img":"http://www.png","url":"http://www.html","name":"Item C"}],
 "collection_id":100}

Write some javascript to ask for and render the result like this...

function onGotData(data)
{
   jQuery('#itemA .item_name').text(data.items[0].name);
   jQuery('#itemA .item_image').attr('src', data.items[0].img);
   jQuery('#itemA').click( function() { document.location = data.items[0].url });
   jQuery('#itemB .item_name').text(data.items[1].name);
   jQuery('#itemB .item_image').attr('src', data.items[1].img);
   jQuery('#itemB').click( function() { document.location = data.items[1].url });
   jQuery('#itemC .item_name').text(data.items[2].name);
   jQuery('#itemC .item_image').attr('src', data.items[2].img);
   jQuery('#itemC').click( function() { document.location = data.items[2].url });
   collection_id = data.collection_id;
}
var collection_id = 100;
function getData(direction, id)
{
   // change images to loading animation
   jQuery('#itemA .item_image').attr('src', 'loading.gif');
   jQuery('#itemB .item_image').attr('src', 'loading.gif');
   jQuery('#itemC .item_image').attr('src', 'loading.gif');
   jQuery.getJSON('http://path.to/yourscript?collection=' + 
          direction + '&id=' + id,null,onGotData );
}

Assume some HTML like this to hold how ever many items you have.

<span class="item" id="itemA">
   <span class="item_name">Name</span>
   <img class="item_image" src="loading.gif"></span>
</span>

Then toss some buttons on the end.

<div id="goLeft"><img src="left.gif"></div>
<div id="goRight"><img src="right.gif"></div>

Then make the buttons clickable...

jQuery('#goLeft').click( function() {
   getData('left', collection_id );
});
jQuery('#goRight').click( function() {
   getData('left', collection_id );
});

That took about 10 minutes but you should hopefully be able to fill in the blanks and make what you're looking for. The #jQuery irc.freenode.net will be able to help you further once you start working on your live page. They are generally very helpful if you're willing to work with them.