UFade loading image never shows

[jscheuer1]

1) Script Title: Ultimate Fade-in slideshow (v2.4)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm

3) Describe problem: Since the loading image has no z-index it's always behind the gallerylayers which even when they have no images in them yet, have a background of black and a z-index of 1000 or 999.

Further, in the document.ready portion of the fadeSlideShow function, because, the highlighted occurs too soon:


if ($curimage.get(0).complete){ //accounf for IE not firing image.onload
$loadingimg.hide()
slideshow.paginateinit($)
slideshow.showslide(setting.curimage)
}
else{ //initialize slideshow when first image has fully loaded
$loadingimg.hide()
slideshow.paginateinit($)
$curimage.bind('load', function(){slideshow.showslide(setting.curimage)})
}

Even with a z-index property of 1000 (which is sufficient to show over the gallerylayers), the loading image is still never seen.

Also, and this doesn't affect the loading image's showing up, only how big it might appear and/or it's positioning and only in certain cases, but as long as we're in the neighborhood, the width and height for the loading image are set in inline css style, not by jQuery's .css() function and lack the 'px' units required for that approach.

Here's what I've found works well -


Change these lines (starting at around line #56):


var $loadingimg=$('<img src="'+fadeSlideShow_descpanel.controls[2][0]+'" style="position:absolute;width:'+fadeSlideShow_descpanel.controls[2][1]+';height:'+fadeSlideShow_descpanel.controls[2][2]+'" />')
.css({left:setting.dimensions[0]/2-fadeSlideShow_descpanel.controls[2][1]/2, top:setting.dimensions[1]/2-fadeSlideShow_descpanel.controls[2][2]}) //center loading gif
.appendTo(setting.$wrapperdiv)

to (adds the px's and the zIndex):


var $loadingimg=$('<img src="'+fadeSlideShow_descpanel.controls[2][0]+'" style="position:absolute;width:'+fadeSlideShow_descpanel.controls[2][1]+'px;height:'+fadeSlideShow_descpanel.controls[2][2]+'px" />')
.css({zIndex:1000,left:setting.dimensions[0]/2-fadeSlideShow_descpanel.controls[2][1]/2, top:setting.dimensions[1]/2-fadeSlideShow_descpanel.controls[2][2]}) //center loading gif
.appendTo(setting.$wrapperdiv)

Move the second hide() to within the load function (code block starting around line #82, delays the loading image's disappearance until the slideshow image actually is loaded):


if ($curimage.get(0).complete){ //accounf for IE not firing image.onload
$loadingimg.hide()
slideshow.paginateinit($)
slideshow.showslide(setting.curimage)
}
else{ //initialize slideshow when first image has fully loaded
slideshow.paginateinit($)
$curimage.bind('load', function(){$loadingimg.hide();slideshow.showslide(setting.curimage)})
}


Doing it that way, one could even get fancy about it and use $loadingimg.fadeOut() for the highlighted one, looks a little cooler.

Updated Code:

see: http://www.dynamicdrive.com/forums/showthread.php?79797-Ultimate-Fade-in-slideshow-(v2-4-through-v2-6-1)-loading-image-and-other-fixes&p=317020#post317020

for latest updates (to current at this writing version 2.6.1).