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 be downloaded via AJAX?

It is very possible that there are thousands of images and every link to a web page dedicated to this image, so I basically need an image carousel that can handle this efficiently.

Answer 1

I think JQuery Cycle Plugin will give you 50% of the way. This object is quite easy to use, and I think that it will give you the opportunity to "click with the mouse to get more" that you are after (with some pretty nice transition effects).

However, I only used the plugin with all the images defined on the page. In my case, I did a “slide show” to demonstrate the use of the application. 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> 

JavaScript related ...

 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 solving the additional problem of uploading new images, when the user wants to get a few more, I think that this is just a matter of expanding the code behind the Next link in my example. Your code would do a jQuery AJAX call to get the following images and then add them to the slide show div.

Finally, this leaves the functionality of clicking on the image to go to the site. You can try to place img slide tags inside the corresponding a tags. If the loop plugin does not play with a tags, the onclick event handlers on the images should complete the task.

Answer 2

You can use jQuery Tools' Scrollable as a slider and associate a call to $get() with 'next'.

Here is a demo: http://flowplayer.org/tools/demos/scrollable/edit.htm (note the "add" button).

In this demo, he simply clones a div and adds it. You can do the same by clicking "next", but loading content from another location.

Answer 3

I used jShowOff for the project.

Benefits:

• You have full control over each HTML slide (so you can use images or images, HTML and links
• According to one of your requirements, the user can rotate the slides by himself.

Problem

• You will have to come up with your AJAX solution and configure it.

http://ekallevig.com/jshowoff/

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

I will work a little and see if I can find the AJAX solution already made for him.

Answer 4

The first solution is pretty good, another solution that you might like, and what I use: http://jquery.malsup.com/cycle/