Loading images using AJAX in jQuery Tools Scrollable

Question

I am using jQuery Tools to create a scrollable product box which works very well.

However, I would like to load the images via AJAX ... I have looked at Lazy load but can not get it to work for a horizontal div - it loads all the images in the div rather than just the visible ones.

I am using this: http://jquerytools.org/demos/scrollable/index.html

I have found some code called unveil - http://luis-almeida.github.com/unveil/ which is nice lightweight code but I can not work out how to change the code to suit the scrollable.

Basically I want to load the hidden divs only when requested ...

Anyone got any pointers for me?

EDIT:

JSFiddle example - need to load divs marked

 <!-- 5-10 --> &  <!-- 10-15 -->

when right arrow is clicked rather than pre-loading everything. In my store there can be hundreds of images in the scroller hence the problem!

Answer 1

You can load the images from a JSON to the items div as required (ie based on the next/prev click).

Code for this is given below

<div id='items'>
</div>

var imagesJSON = ["http://farm1.static.flickr.com/143/321464099_a7cfcb95cf_t.jpg",
                  "http://farm4.static.flickr.com/3089/2796719087_c3ee89a730_t.jpg",
                  "http://farm1.static.flickr.com/79/244441862_08ec9b6b49_t.jpg",
                  "http://farm1.static.flickr.com/28/66523124_b468cf4978_t.jpg",
                  "http://farm1.static.flickr.com/163/399223609_db47d35b7c_t.jpg",
                  "http://farm1.static.flickr.com/135/321464104_c010dbf34c_t.jpg",
                  "http://farm1.static.flickr.com/40/117346184_9760f3aabc_t.jpg",
                  "http://farm1.static.flickr.com/153/399232237_6928a527c1_t.jpg",
                  "http://farm4.static.flickr.com/3629/3323896446_3b87a8bf75_t.jpg",
                  "http://farm4.static.flickr.com/3023/3323897466_e61624f6de_t.jpg",
                  "http://farm4.static.flickr.com/3650/3323058611_d35c894fab_t.jpg",
                  "http://farm4.static.flickr.com/3635/3323893254_3183671257_t.jpg"];

var currImages = 0;

$(function() {
    currImages = 0;
    LoopThroughImages();

    // initialize scrollable
    $(".scrollable").scrollable();
    $('.next').click(function() {
        // Load next 4 images using ajax.
        //i am loading images from the array
        LoadNextImagesAjax();
    });
});

function LoopThroughImages() {
    var i = 0;
    var currDiv = null;

    for (var i = 0; i < 8; i++) {
        if(imagesJSON.length < currImages + i)
        {
            currImages+=i;
            return;
        }
        if (i % 4 == 0) {
            currDiv = $('<div></div>');
            $(".items").append(currDiv);
        }
        currDiv.append('<img src="' + imagesJSON[i] + '" />');
    }

    currImages+=8;
}

function LoadNextImagesAjax() {
    for (var i = 0; i < 4; i++) {
        if(imagesJSON.length <= currImages + i)
        {
            currImages+=i;
            return;
        }
        if (i % 4 == 0) {
            currDiv = $('<div></div>');
            $(".items").append(currDiv);
        }
        currDiv.append('<img src="' + imagesJSON[currImages + i] + '" />');
    }

    currImages+=4;
}

You can use http://jquerytools.org/demos/scrollable/index.html for creating the scrollable product box.

You can find a JSFiddle demo here. You will have to give valid image paths to test this code.