[jQuery] jquery sequencing image loading. link the images?
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!