hi everybody,
I've found a fantastic sript in the internet on chazzuka.com. It
load's images sequecial with a nice prelaoder. Could someone give me a
hint how to add links to the images so I can combine thme with a
lightbox?

this is the script:

// DOM Ready
$(function () {
    // Image Sources
    var images = new Array();
        images[0] = 'http://farm4.static.flickr.com/
3293/2805001285_4164179461_m.jpg';
        images[1] = 'http://farm4.static.flickr.com/
3103/2801920553_656406f2dd_m.jpg';
        images[2] = 'http://farm4.static.flickr.com/
3248/2802705514_b7a0ba55c9_m.jpg';
    // images length
    var max = $(images).length;
    // at least 1 image exist
    if(max>0)
    {
        // create the UL element
        var ul = $('<ul id="portfolio"></ul>');
        // append to div#wrapper
        $(ul).appendTo($('#wrapper'));
        // load the first image
        LoadImage(0,max);
    }

    // function of loading image
    // params: (int) index of image in array, (int) length of images
array
    function LoadImage(index,max)
        {
            // if current index is lower then max element (max-1)
            if(index<max)
                {
                    // create the LI, add loading class
                    var list = $('<li id="portfolio_'+index+'"></
li>').attr('class','loading');
                    // append to UL
                    $('ul#portfolio').append(list);
                    // current LI
                    var curr = $("ul#portfolio
li#portfolio_"+index);
                    // new image object
                    var img = new Image();
                    // image onload
                    $(img).load(function () {
                        $(this).css('display','none'); //
since .hide() failed in safari
                        $(curr).removeClass('loading').append(this);
                        $(this).fadeIn('slow',function(){
                                // once the current loaded, trigger
the next image
                                LoadImage(index+1,max);
                            });
                    }).error(function () {
                        // on error remove current
                        $(curr).remove();
                        // trigger the next image
                        LoadImage(index+1,max);
                    }).attr('src', images[index]);
                }
        }

});


thank you very much!

Reply via email to