Question

I use jQuery colorbox plugin when displaying images from gallery. So, when i have a big amount of images,I don’t want to load all of the images, I want to make ajax request and retrieve only needed image when the user clicks ‘next’ button, for instance.
Ones more.User clicks next and after I make ajax request and retrieve image.
So, how can i implement this?

Answer 1

You don’t need AJAX, as long as you know the URL of the images.

var counter = 0;
var images = ['/url/to/image1.jpg', '/url/to/image2.jpg', '/url/to/image3.jpg'];
$("#next_button").click(function() {
    counter ++;
    $("#my_image").attr("src", images[counter]);
}

I’ll let you add a ‘previous’ button, and some error checking (make sure you’ve not gone off the end of the array, etc.).