Javascript/JQuery: Gallery with very large images. How can I have it on click fade out, load the next image, and then fade in w/ the new image?

my boss has me working on a website that basically has a very large galle开发者_Python百科ry right in the middle. The way this one part needs to work is that the user clicks a next/prev button, the image fades out, displays a loading spinning image gif, and then fades in with the new image when it's down downloading. I have no idea where to even begin.

I know jquery somewhat, but I'm very new to actual javascript. My only reference book at hand is a copy of "Javascript for Dummies" for 1997. Is this of any use to me at all, or has Javascript changed since then?

There are lots of jQuery plugin for image gallery: Galleria, GalleryView, Pikachoose, and this one.

Or you can search from jQuery plugins page.

Please get a newer book, or just use the web as a resource, any info. from 1997 is going to be horribly outdated.

This is a very simple site I've recommended to beginners before: http://htmldog.com/guides/javascript/ No, it doesn't cover everything, but that's what's good about it, you'll get some key things down, and then be able to search on google for more specific stuff.

To give you some barebones ot start with, I would do something like this:

$(document).ready(function() {
    $('#nextBtn').click(function() {
        transitionToNextImage ();
    });
});
transitionToNextImage = function() {
    $('img.active-image').fadeTo(1000,0), function() {
        // fade out complete.
        $('#inProgressGif').show();
        getNextImage();
    });
};
getNextImage = function() {
    // make ajax call to get new image, and
    // in the success callback of the ajax call, 
    // remove the inProgressGif, and
    // add the image ot the DOM with opacity 0,
    // then slowly fade it in to opacity 1 (opposite
    // of what was done above
};