[jQuery] using jcarousel as image viewer - how to load large image onclick with loading animation
I'm trying to use the excellent jcarousel plugin to create an image
viewer/slideshow for a friends site
I am a real newbie & my first post so go easy on me :)
Can someone point me in the right direction how to load an image on
demand with some sort of callback so a loading image can be displayed
and the image fade in when ready.
Currently I'm preloading all images which is so-so but definitely not
ideal and the fade doesn't work correctly if an image is not loaded
Is this heading in the right direction?
$(".jcarousel-item").click( function() {
s =$(this).children("a").attr("href");
a =$(this).children("a").attr("title");
// switch
$("#large").fadeout();
$("#loader").show();
//load and get some sort of return when loaded
// to turn off loading and fade in image
// psuedocode
loaded = function(){
return $("#large").bind('load', function() {
if(s) this.src = s;
}).trigger('load');
}
// psuedocode
if(loaded) {
$("#large").attr({ alt: a});
$("#loader").hide();
$("#large").fadeIn("slow");
}
});
I'm trying to achieve:
a. When the user clicks on the thumbnail it gets the link href & title
and uses them to set the src & alt tag on the main image. (DONE)
b. Next image should fadein without flashing the same image (DONE not
very well)
currently using $("#large").hide().attr({ src: s, alt:
a}).fadeIn("slow"); // this only works if the image has totally loaded
otherwise the old image fades in then it switches
c. Preload the first x number of main images to match the initially
displayed thumbs with the remainder loading on demand and showing a
loading animation (NOT DONE)
Thanks very much for any and all help
Brad