Javascript/Ajax help required

Question

I want to create a photo gallery element which has a play button and the next/previous navigation... I can do the next and previous by using ajax load...and i do not want to preload the data for play functionality..the only way i can think of is using ajax call in a timer for play functionality...but again..calls will happen in an infinite manner till the person navigates away...is there any better way that i can do >>>??? can i jus make one ajax call to get the html of each and put in array and iterate..if so how do i go about it >>??? or is there a better solution for this??

Answer 1

get all image urls from 1 ajax call and store it in a array and dynamically set image src using javascript over a time. But without using preloading the flicker may occur

Answer 2

Here is a simple approach.

//Global variable
var imgList;
var imgPntr = 0;

//AJAX function
function getImagesUrl()
{
    //Some code here

    //On success
    return arrayOfUrl;
}

// call this to prepare the images
function prepareImages()
{
   var temp = getImagesUrl();
   for(var i = 0; i  0) {
       imgPntr--;

       //Load this image in your gallery
       loadImage(imgList[imgPntr]);
    } else {
       //Either rotate to end or alert the user end or disable prev button
    }

}

// Call on press play
function play()
{
   // Use setTime out and call showNext() until end
}