jQuery colorbox ajax request on 'next' click

I use jQuery colorbox plugin when displaying images fro开发者_StackOverflow中文版m 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?

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.).

HTML:

<img id="[[image_db_id]]" class="theImage" src="url/for/my/first/image.jpg" />
<a href="#null" class="goButton" id="prev">Prev</a> | <a href="#null" class="goButton" id="next">Next</a>

JS:

$(".goButton").click(function() {
   var dir =  $(this).attr("id");
   var imId = $(".theImage").attr("id");
   $.ajax({
      url: "path_to_your_ajax_script.php",
      data: {
         current_image: imId,
         direction    : dir
      },
      success: function(ret) {
         $("#theImage").attr("src", ret);
         if ('prev' == dir) {
            imId ++;
         } else {
            imId --;
         }
         $("#theImage").attr("id", imId);
      }
   });
});

PHP

<?php
if ("prev" == $_POST['direction']) {
   $id = $_POST['current_image'] - 1;
} else {
   $id = $_POST['current_image'] + 1;
}
$q = yourQueryFunction("SELECT url FROM images WHERE id = '".mysql_real_escape_string($id)."'");
print $q['url'];