Results 1 to 1 of 1

Thread: UFade loading image never shows

  1. #1
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,791
    Thanks
    64
    Thanked 3,308 Times in 3,269 Posts
    Blog Entries
    12

    Default UFade loading image never shows

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

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...nslideshow.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:

    Code:
    		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 -

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

      Code:
      		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):

      Code:
      		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)
    2. 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):

      Code:
      		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/s...020#post317020

    for latest updates (to current at this writing version 2.6.1).
    Last edited by jscheuer1; 03-06-2016 at 03:23 PM. Reason: remove deleted attachment, add link to latest code
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Similar Threads

  1. Replies: 3
    Last Post: 02-04-2013, 10:07 PM
  2. UFade Slideshow
    By mkumar in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 07-25-2012, 03:04 PM
  3. Image rollover with power zoom shows wrong image
    By GrahamJBrown in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 03-14-2012, 03:05 PM
  4. UFade individual buttons
    By s323790r in forum Dynamic Drive scripts help
    Replies: 4
    Last Post: 11-06-2011, 06:43 PM
  5. ddsmoothmenu sometimes shows 'loading menu'
    By Brina in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 04-15-2010, 05:54 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •