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/dynamicindex14/fadeinslideshow.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?

[godt09]

It is that they don't display at all. All I see is the black background of the .gallerylayer (I think). And I've not messed about with any settings at all. Just a clean install. You can see the result here:

http://www.barbas.com.au/html/merc.html

Just a test site. Same result with HTML5 doctype.

[jscheuer1]

The images are 404 Not Found. Here in the on page init for the slideshow:


</script>
<script type="text/javascript">

var mygallery=new fadeSlideShow({
wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
dimensions: [430, 570], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["/images/merc_1_430.png"],
["/images/merc_2_430.png"],
["/images/merc_3_430.png"],
["/images/merc_4_430.png"],
["/images/merc_5_430.png"],
["/images/merc_6_430.png"] //<--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: 500, //transition duration (milliseconds)
descreveal: "always",
togglerid: ""
})

</script>

Those should all be like:


["images/merc_1_430.png"],

without the leading slash. That means get rid of the red:


["/images/merc_1_430.png"],

in each of them. It's pointing to an images folder of the root folder of the domain. You want it to point to the images folder off of the html folder, which it will if you remove that red slash.

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

[godt09]

Aaaargh. Thanks for that. And for your collective energies. Good grief.

[godt09]

One last problem: I can't seem to apply css to the images in this script. I have this in my external css:

#fadeshow1 img {
border: 5px solid #000000;
}

to test, but the border, or anything else, doesn't show. Do I need to apply css in the .js file?

[jscheuer1]

You need the !important keyword to override the scripted styles. This looked pretty good:


#fadeshow1 {
display: block;
width: 450px !important;
height: 580px !important;
margin-top: 80px;
margin-right: 20px;
float: right;
}

#fadeshow1 img {
border: 5px solid #000000 !important;
}

[godt09]

Brilliant! Many thanks for your assistance.