Ultimate Fade-in slideshow (v2.0) Loading Forever

[ibizwu]

I have an issue with the Ultimate Fade-in slideshow (v2.0) script.

When I go to view the page the loading image just turns forever. The slideshow never starts. Any ideas?

[jscheuer1]

Please include a link to the page on your site that contains the problematic code so we can check it out.

[vbel]

I have the same problem- I have used this code for few years and have noticed a marked slow loading time only recently. My images are small (150kb) and there are only 4-6 of them. Can I add the first image as a background image to the wrapper div?
Also, I have the loading.gif in the same directory as the file where the script is called, but the loading.gif does not show up. Thanks,.

[jscheuer1]

In the future, please start a new thread for a new question.

That said, 150K per image is a bit excessive, 50K would be more like it, preferably much less even than that.

And there are some flaws in the script. Notably, if the mouse is over the slideshow as the page loads, in some browsers the show will not start at all, showing just black until the mouse is moved away. Also the loading image never shows up on any browser under any circumstances, period.

To address these and other issues (see comments at the beginning of the updated file for these 'other' issues), use this unofficial update:

http://home.comcast.net/~jscheuer1/s...deslideshow.js

As to using the first image as background, you can do that, but with such large images I would advise against it because, if it's taking too long to load the images, making one of them a background image will only increase the loading time, especially in some browsers. If you fix things by using the updated script, you will see the loading image while the images load. If you also reduce each image's byte size, that will help as well.

But, if you want to try it, it's pretty simple to do so using overriding css style:

<style type="text/css">
#fadeshow1, #fadeshow1 .gallerylayer {
	background-image: url(thefirstimage.jpg) !important;
	width: 500px;
	height: 300px;
}
</style>

Where #fadeshow1 is the wrapperid for the slideshow (in the on page call) and the width and height (with px added as shown in the above) are the width and height (dimensions) specified in the on page call for the slideshow. Be sure to use the !important keyword for the background-image declaration in order to override what the script will set for it (no background image).

Add that to the head of the page, or include its rules in an existing stylesheet for the page.

The browser cache may need to be cleared and/or the page refreshed to see changes.

If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.