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.

Answer 2

You could use jQuery Tools' Scrollable as slider and associate a $get() call to the 'next' button.

Here's a demo: http://flowplayer.org/tools/demos/scrollable/edit.htm (Notice the 'add' button).

In this demo, it just clones a div and append it. You could do the same when clicking on 'next' but loading content from elsewhere.

Answer 3

I've used jShowOff for a project.

Benefits:

• You have complete control over each slide's HTML, (so, image or images, HTML, and links can be used
• Per one of your requirements, the user is able to rotate the slides on their own

Problem

• You'd have to come up with your own AJAX solution and tweak it.

http://ekallevig.com/jshowoff/

I have an example of my use of it here: http://www.rhmachine.com/ (the links can be modified to only show prev/next).

I'll dig around for a bit and see if I can find an AJAX solution already made for it.