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!