Javascript or jQuery image carousel with dynamically loaded images and links

Question

Is there a good javascript or jQuery image carousel that will display 5 images and if there are more, the user can click next and the following image sources and link URLs will load through AJAX?

It's very possible there are thousands of images and each links to a webpage devoted to that image, so I basically need an image carousel that can efficiently deal with this.

Answer 1

I think the JQuery Cycle Plugin will get you 50% of the way there. This facility is pretty easy to use and I think will give you the "click to get to more" images functionality that you're after (with some pretty nifty transition effects at that).

However, I've only used the plugin with all the images defined in the page. In my case, I was doing a "slide show" to demonstrate the use of an application. The HTML was pretty simple...

<div id="slideshow">
  <img src="Images/Usage1.png" />
  <img src="Images/Usage2.png" />
  <img src="Images/Usage3.png" />
  <img src="Images/Usage4.png" />
  <img src="Images/Usage5.png" />
  <img src="Images/Usage6.png" />
  <img src="Images/Usage7.png" />
  <img src="Images/Usage8.png" />
  <img src="Images/Usage9.png" />
  <img src="Images/Usage10.png" />
</div>
<a href="javascript:moveSlide('prev');" style="float: left;">&lt; Prev</a>
<a href="javascript:moveSlide('next');" style="float: right;">Next &gt;</a>

The associated JavaScript is...

function moveSlide(direction) {
    $("#slideshow").cycle(direction);
} // End function

$(document).ready(function () {
    $("#slideshow").cycle({
        fx: 'fade',
        speed: 300,
        timeout: 0
    });
});

(Click here to see the effect.)

As for addressing the additional challenge of loading new images when the user wants to fetch some more, I think that's just a matter of expanding on the code behind the "Next" link in my example. Your code would perform a JQuery AJAX call to get the next images and then add them to the slideshow div.

Lastly, that leaves the functionality of clicking on the image to go to the site. You can try putting the slideshow img tags inside of appropriate a tags. If the cycle plugin doesn't play will with the a tags, onclick event handlers on the images should get the job done.