Results 1 to 3 of 3

Thread: Loading.gif not showing up while images load

  1. #1
    Join Date
    Sep 2010
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Loading.gif not showing up while images load

    1) Script Title: Ultimate Fade In Slideshow

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...nslideshow.htm

    3) Describe problem:

    I'm not seeing my loading.gif while the slideshow's images are loaded. I searched the existing questions but am confused about actually editing the .js file (and a little wary of doing so).

    The site I'm working with is www.kcbeaton.com and because the slideshows are loaded in a Spry HtmlPanel I'll include the individual pages (although they don't load separately from the main site):

    http://www.kcbeaton.com/people-slideshow.html
    http://www.kcbeaton.com/places-slideshow.html
    http://www.kcbeaton.com/abstracts-slideshow.html
    http://www.kcbeaton.com/animals-slideshow.html

    This one has the largest number of images. But regardless, I don't see the loading.gif in any of the slideshows I have used and it kinda really needs to be there for slower connections so people will know something's happening. ;-)

    Thanks again!
    Nancy

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,165
    Thanks
    44
    Thanked 3,240 Times in 3,201 Posts
    Blog Entries
    12

    Default

    First off, you're not alone. I don't think that part of the script is very well thought out. Second, it appears that you have modified the script. I don't think that you have to, so revert to the original version. It will make it easier to get help in the future.

    Now to fix this problem and keep the changes you have made without altering the script, replace (for example on people-slideshow.html):

    Code:
    .fadeshow4 {
    	text-align: left;
    	width: 825px;
    	height: 410px;
    	margin: auto!important;
    }
    .fadeslidedescdiv {
    text-align: center;
    }
    with:

    Code:
    #fadeshow4, #fadeshow4 .gallerylayer {
    	text-align: left;
    	width: 825px;
    	height: 410px;
    	margin: auto;
    	background: #b3b3b3 url(Library/loading.gif) center no-repeat!important;
    }
    .descpanelfg {
    	text-align: center;
    }
    and replace:

    Code:
    <script type="text/javascript">
    
    var mygallery=new fadeSlideShow({
    	wrapperid: "fadeshow4", //ID of blank DIV on page to house Slideshow
    	dimensions: [825, 410], //width/height of gallery in pixels. Should reflect dimensions of largest image
    	imagearray: [
    		["o-ppl/09-153.jpg", "", "", "Waiting; Oil on Canvas; 12x9in."],
    		["o-ppl/09-158.jpg", "", "", "We All Adore Him; Oil on Canvas; 12x9in."],
    		["o-ppl/09-159.jpg", "", "", "Guardian; Oil on Canvas; 12x9in."],
    		["o-ppl/09-162.jpg", "", "", "Looking at Renoir; Oil on Canvas; 12x9in."],
    		["o-ppl/10-163.jpg", "", "", "In Good Company; Oil on Canvas; 12x9in."],
    		["o-ppl/10-164.jpg", "", "", "Tiny Dancer; Oil on Canvas; 12x9in."],
    		["o-ppl/10-167.jpg", "", "", "She's Listening Now; Oil on Canvas; 12x10in."],
    		["o-ppl/10-168.jpg", "", "", "Jitters; Oil on Canvas; 16x8in."],
    		["o-ppl/10-170.jpg", "", "", "Grace; Oil on Canvas; 14x11in."],
    		["o-ppl/10-171.jpg", "", "", "Take a Walk in a Gallery/La Promenade; Oil on Canvas; 14x11in."],
    		["o-ppl/10-172.jpg", "", "", "San Francisco Side View; Oil on Canvas; 12x10in."],
    		["o-ppl/10-173.jpg", "", "", "Ancient and Modern Grace; Oil on Canvas; 12x9in."],
    		["o-ppl/10-174.jpg", "", "", "You Can't Always Get What You Want; Oil on Canvas; 12x9in."],
    		["o-ppl/09-154.jpg", "", "", "Looking at Bouguereau; Oil on Canvas; 12x9in."],
    		["o-ppl/10-166.jpg", "", "", "Waiting for the Performance; Oil on Canvas; 16x12in."],
    		["o-ppl/10-175.jpg", "", "", "The Yellow Jacket; Oil on Canvas; 12x9in."],
    		["o-ppl/10-176.jpg", "", "", "Blondes Having Fun; Oil on Canvas; 12x12in."],
    		["o-ppl/10-178.jpg", "", "", "I'm Here for Some CANDY!; Oil on Canvas; 12x12in."],
    		["o-ppl/10-177.jpg", "", "", "Beetlejuice; Oil on Canvas; 12x12in."],
    		["o-ppl/10-179.jpg", "", "", "Angel in Pink; Oil on Canvas; 12x12in."]	//<--no trailing comma after very last image element!
    	],
    	displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
    	persist: false, //remember last viewed slide and recall within same session?
    	fadeduration: 750, //transition duration (milliseconds)
    	descreveal: "ondemand",
    	togglerid: ""
    })
    </script>
    with:

    Code:
    <script type="text/javascript">
    (function(){
    	var loadingimg = new Image();
    	loadingimg.onload = function(){
    		fadeSlideShow_descpanel.controls[2][0] = 'Library/loading.gif';
    		new fadeSlideShow({
    			wrapperid: "fadeshow4", //ID of blank DIV on page to house Slideshow
    			dimensions: [825, 410], //width/height of gallery in pixels. Should reflect dimensions of largest image
    			imagearray: [
    				["o-ppl/09-153.jpg", "", "", "Waiting; Oil on Canvas; 12x9in."],
    				["o-ppl/09-158.jpg", "", "", "We All Adore Him; Oil on Canvas; 12x9in."],
    				["o-ppl/09-159.jpg", "", "", "Guardian; Oil on Canvas; 12x9in."],
    				["o-ppl/09-162.jpg", "", "", "Looking at Renoir; Oil on Canvas; 12x9in."],
    				["o-ppl/10-163.jpg", "", "", "In Good Company; Oil on Canvas; 12x9in."],
    				["o-ppl/10-164.jpg", "", "", "Tiny Dancer; Oil on Canvas; 12x9in."],
    				["o-ppl/10-167.jpg", "", "", "She's Listening Now; Oil on Canvas; 12x10in."],
    				["o-ppl/10-168.jpg", "", "", "Jitters; Oil on Canvas; 16x8in."],
    				["o-ppl/10-170.jpg", "", "", "Grace; Oil on Canvas; 14x11in."],
    				["o-ppl/10-171.jpg", "", "", "Take a Walk in a Gallery/La Promenade; Oil on Canvas; 14x11in."],
    				["o-ppl/10-172.jpg", "", "", "San Francisco Side View; Oil on Canvas; 12x10in."],
    				["o-ppl/10-173.jpg", "", "", "Ancient and Modern Grace; Oil on Canvas; 12x9in."],
    				["o-ppl/10-174.jpg", "", "", "You Can't Always Get What You Want; Oil on Canvas; 12x9in."],
    				["o-ppl/09-154.jpg", "", "", "Looking at Bouguereau; Oil on Canvas; 12x9in."],
    				["o-ppl/10-166.jpg", "", "", "Waiting for the Performance; Oil on Canvas; 16x12in."],
    				["o-ppl/10-175.jpg", "", "", "The Yellow Jacket; Oil on Canvas; 12x9in."],
    				["o-ppl/10-176.jpg", "", "", "Blondes Having Fun; Oil on Canvas; 12x12in."],
    				["o-ppl/10-178.jpg", "", "", "I'm Here for Some CANDY!; Oil on Canvas; 12x12in."],
    				["o-ppl/10-177.jpg", "", "", "Beetlejuice; Oil on Canvas; 12x12in."],
    				["o-ppl/10-179.jpg", "", "", "Angel in Pink; Oil on Canvas; 12x12in."]	//<--no trailing comma after very last image element!
    			],
    			displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
    			persist: false, //remember last viewed slide and recall within same session?
    			fadeduration: 750, //transition duration (milliseconds)
    			descreveal: "ondemand",
    			togglerid: "",
    			oninit: function(){jQuery('.descpanelbg').css({opacity: 0.4});}
    		});
    	};
    	loadingimg.src = 'Library/loading.gif';
    })();
    </script>
    - John
    ________________________

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

  3. #3
    Join Date
    Sep 2010
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    John,

    Gawd I wish I knew what I was doing! LOL

    I made your changes and everything is *perfect*!!! Thank you very much (understatement)!! I tried for 3 days to get the background of the slideshow to be something other than black (which is when I finally changed the .js for that part and the transparency of the description block) and was just banging my head against the wall in frustration. Good grief!

    Where's the little icon that's bowing down in reverence?

    I can't begin to express my thanks enough.

    Best regards,
    Nancy

Tags for this Thread

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
  •