How to change Images by using jquery by using .load()

Question

Hello All,

I have a list of images. When the page load each time I want to show the next image in the series, and when it reloads again I want to change next image, etc.

Please suggest me a solution using jQuery.

Thanks

Answer 1

I suggest you use the plugin cycle. It's as easy like that:

$('.slideshow').cycle({
        fx: 'fade'
    });

http://jquery.malsup.com/cycle/

Or if you want a carrousel: jcarousel

http://sorgalla.com/jcarousel/

Answer 2

You should consider using server side technology to do this. However, this can be accomplished easily enough with jQuery, or even library-less Javascript.

Using cookies, we can store the current image count, which can then be used to access an array of image URL which is used to change the image on page load. Using the cookie script from QuirksMode, we have a script that looks like this:

var images = ['img1.png', 'img2.png', 'img3.png', 'img4.png' ...],
    imageCount = parseInt(readCookie('image'), 10);

if(isNaN(imageCount)) imageCount = 0;

$('#thumbnail').attr('src', images[imageCount % images.length]);
createCookie('image', imageCount + 1, 30);

If you're using vanilla Javascript, replace the 6^th line with this:

document.getElementById('thumbnail').src = images[imageCount % images.length];

See a demo of this script here: http://www.jsfiddle.net/yijiang/2cqqt/