Images don't display in Ultimate Fade In Slideshow v2.0

[godt09]

1) Script Title: Ultimate Fade In Slideshow v2.0

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

3) Describe problem: When I load the page with script set up, something is generating the following css, so that no images show:

<div style="position: relative; visibility: visible; background: none repeat scroll 0% 0% black; overflow: hidden; width: 430px; height: 570px;" id="fadeshow1"><div style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; background: none repeat scroll 0% 0% black;" class="gallerylayer"><img src="/images/merc_1_430.png" style="border-width: 0px; display: none;">
<img src="/images/merc_2_430.png" style="border-width: 0px; display: none;">
<img src="/images/merc_3_430.png" style="border-width: 0px; display: none;">
<img src="/images/merc_4_430.png" style="border-width: 0px; display: none;">
<img src="/images/merc_5_430.png" style="border-width: 0px; display: none;">
<img src="/images/merc_6_430.png" style="border-width: 0px; display: none;">
</div><div style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; background: none repeat scroll 0% 0% black;" class="gallerylayer"><img src="/images/merc_1_430.png" style="border-width: 0px; display: none;">
<img src="/images/merc_2_430.png" style="border-width: 0px; display: none;">
<img src="/images/merc_3_430.png" style="border-width: 0px; display: none;">
<img src="/images/merc_4_430.png" style="border-width: 0px; display: none;">
<img src="/images/merc_5_430.png" style="border-width: 0px; display: none;">
<img src="/images/merc_6_430.png" style="border-width: 0px; display: none;">
</div><img src="loading.gif" style="position: absolute; left: 188px; top: 230px; display: none;"></div>

This also happens if I load the fadinslideshow.htm example page. Where is the css coming from? Code above is generated source from Firefox. I have also tested in IE9 and Opera 12. I have no css formatting images.

[bernie1227]

I believe that it is generated by the JavaScript/jquery

[godt09]

I've searched the .js file for 'display', and nothing is thrown up. What I don't understand is why there would be some kind of default whereby images don't show. I can see no settings anywhere to turn it on, as it were. The example file functions OK on the site, but if I copy the code to my server, images don't show.

What am I missing?

[bernie1227]

I don't see anything in the posted code that would effect the images displaying anyway, are you sure that is the part causing the problem?

[godt09]

display: none;

[bernie1227]

Oh, didn't see that, can't you just delete it? Or you can do a JavaScript replace:
see here:
http://www.w3schools.com/jsref/jsref_replace.asp

[godt09]

But it isn't obvious where to delete or edit: it isn't in the .js file. It can't be in the google jquery. I just don't see where it is coming from. Or any of that css for the image.

[bernie1227]

No I meant, after it had been made

Have you edited the JavaScript?

[godt09]

No, fresh copy. And I checked for conflicts with other stuff. Which I removed in the end anyway.

[jscheuer1]

This line sets the display to none for all images:

		var $curimage=setting.$gallerylayers.html(fullhtml).find('img').hide().eq(setting.curimage) //prefill both layers with entire slideshow content, hide all images, and return current image

For more information on jQuery's .hide(), see:

http://api.jquery.com/hide/

However, although this does prevent the images from being seen, they're each brought back to their native display as/when needed for the workings of the slideshow. And each time that happens, all the others are "hidden" (using .hide(), which sets their display to none) again.

Why is any of this a problem?