[jQuery] Start effect after another effect is complete / Start effect after image is loaded? - wafflgallery.js

[alan]

Hello,
I posted earlier about a gallery for portfolio purposes. After being
unable to find anything particularly suitable, I wanted to write my
own but am having a few issues.

I hope to release this gallery as a well documented and easy to use
plugin for people with similar needs (very customizable and simple
gallery in terms of divs that will be updated, reads from xml,
preloader etc). Of course, it is far from complete, and as I am pretty
new to jquery and not the most proficient javascript coder, I hope
people can give me feedback too!

Here are my issues:

1) I have previous and next buttons, but I want them disabled until
the image they load is finished its effect (fadeIn)

2) I've built a basic preloader that loads images on either 'side' of
the current image, I don't know how efficiently it is done or if it
could be done better, but sometimes clicking too fast will cause the
fadeIn to go (with no image loaded) then the image suddenly appears.
** Is there a more surefire way to hold off the fadeIn until the image
is fully loaded? ** (they are preloaded as an array of Image()
objects)

3) it seems like after fading in, some objects jump down a pixel or
two which is okay i suppose but annoying - am I doing something wrong?

An initial version in testing with some dummy data can be seen at
http://prod.waffl.ca

Thank you so much in advance!

Code is as follows:

/*
wafflgallery.js v0.1a
September 4, 2007
[EMAIL PROTECTED] // http://www.waffl.ca

Please wait until this is completed before using! Once I am done, you
can feel free to modify and redistribute it as you like as long as you
keep this commented header intact and unmodified.
*/

curPos = 0;

function loadGallery(xmlPath, imageContainerId1, imageCaptionId1,
imageControlBox1, imagePrevButtonId1, imageNextButtonId1)
{
        /* Load the xml */
        $.ajax({
                type: "GET",
                url: xmlPath,
                dataType: "xml",
                success: function(xmlData)
                {
                        xmlDataSet = xmlData;
                        resultSetLength = $("item",xmlDataSet).length - 1;

                        preloadImg = new Array(resultSetLength);

                        /* load everything into global variables */
                        imageContainerId = imageContainerId1;
                        imageCaptionId = imageCaptionId1;
                        imageControlBox = imageControlBox1;
                        imagePrevButtonId = imagePrevButtonId1;
                        imageNextButtonId = imageNextButtonId1;

                        /* Set up the prev/next buttons */
                        $(imagePrevButtonId).click(function()
                        {
                                curPos--;
                                preload();
                                updateGallery();
                        });

                        $(imageNextButtonId).click(function()
                        {
                                curPos++;
                                preload();
                                updateGallery();
                        });

                        /* SlideIn and Load the first image & caption without 
an effect */
                        
$(imageContainerId).fadeIn(1000).SlideInUp(1000,null,'easeout');
                        $(imageContainerId + " img").attr({"src": 
getCurrentImage(), "alt":
getCurrentTags()});
                        $(imageCaptionId).html(getCurrentCaption());
                        $(imageControlBox).fadeIn(5000);
                        preload();
                },

                error: function()
                {
                        $(imageContainerId).html("wafflgallery - error loading 
" +
xmlPath);
                }
        });
}

/* returns the current image */
function getCurrentImage(specPos) {
        if (specPos)
                return $("imageLocation:eq(" + specPos + ")",xmlDataSet).text();
        else
                return $("imageLocation:eq(" + curPos + ")",xmlDataSet).text();
}

/* returns the current title */
function getCurrentTitle() {
        return $("title:eq(" + curPos + ")",xmlDataSet).text();
}

/* returns the current caption */
function getCurrentCaption() {
        return "<a href=" + getCurrentLink() + " alt=" + getCurrentTitle() +
">" + getCurrentTitle() + "</a> // " + $("year:eq(" + curPos +
")",xmlDataSet).text();
}

/* returns the current tags */
function getCurrentTags() {
        return $("tags:eq(" + curPos + ")",xmlDataSet).text();
}

/* returns the current link */
function getCurrentLink() {
        return $("link:eq(" + curPos + ")",xmlDataSet).text();
}


function preload() {
        if ((curPos == 0 && !preloadImg[resultSetLength]) || (curPos ==
resultSetLength && !preloadImg[0])) {
                preloadImg[resultSetLength] = new Image();
                preloadImg[resultSetLength].src = 
getCurrentImage(resultSetLength);
                preloadImg[1] = new Image();
                preloadImg[1].src = getCurrentImage(1);
        }
        else if (!preloadImg[curPos - 1] || !preloadImg[curPos + 1]) {
                preloadImg[curPos - 1] = new Image();
                preloadImg[curPos - 1].src = getCurrentImage(parseInt(curPos - 
1));
                preloadImg[curPos + 1] = new Image();
                preloadImg[curPos + 1].src = getCurrentImage(parseInt(curPos + 
1));
        }
}

/* updates the divs with the specific effect */
function updateGallery()
{
        if (curPos > resultSetLength)
                curPos = 0;
        else if (curPos < 0)
                curPos = resultSetLength;

        /* update with effect*/
        $(imageContainerId + "
img").attr("src",getCurrentImage()).fadeIn(1000);
        $(imageCaptionId).html(getCurrentCaption()).fadeIn(1000);
}