Well, no one has answered but for future reference, I've settled on
using callbacks. I'm not sure if this is the most efficient way, so
someone should correct me if so?
a la:
$(element).effect(parameter, function() { secondeffect });
where secondeffect will trigger AFTER effect rather than
simultaneously.
On Sep 4, 5:26 am, alan <[EMAIL PROTECTED]> wrote:
> 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
> athttp://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);
>
> }
