Loading.gif not showing up while images load

[nansaidh]

1) Script Title: Ultimate Fade In Slideshow

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

[jscheuer1]

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


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

with:


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


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


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

[nansaidh]

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