Ultimate Slide Show -First Slide Black in FF

**RedHolly** · 06-24-2011, 04:24 AM

1) Script Title: Ultimate Slide Show

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

3) Describe problem: The slide show works great in IE and Chrome but I'm having problems with it in Firefox. In Firefox about 85% of the time it doesn't show the first image, but rather a black space, then after the required wait time the second image starts. I've tried everything I know to do and sometimes it works like it should and sometimes it doesn't but there doesn't seem to be any rhyme or reason to when it shows.

For example, I clear my cache and it works and then I clear my cache again and it just shows black instead of the first slide. Other people are seeing the black space as well. Could someone please take a look and let me know what the issue is? I'm pulling my hair out over it.

Here's the code for the script:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="mystyle1.css" />




<!--Home Img Scroll Rollover-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/fadeslideshow.js">

/***********************************************
* Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/
</script>
<script type="text/javascript">
var mygallery=new fadeSlideShow({
	wrapperid: "fadeshow3", //ID of blank DIV on page to house Slideshow
	dimensions: [752, 320], //width/height of gallery in pixels. Should reflect dimensions of largest image
	imagearray: [
		
		["images/rollover_img/mce1.jpg", "purchase.php", "", "Click Or Call To Get Support Now"],
		["images/rollover_img/mce2.jpg", "purchase.php", "", "Click Or Call To Get Support Now"],
		["images/rollover_img/mce3.jpg", "purchase.php", "", "Click Or Call To Get Support Now"],
		["images/rollover_img/mce4.jpg", "purchase.php", "", "Click Or Call To Get Support Now"],
		["images/rollover_img/mce5.jpg", "purchase.php", "", "Click Or Call To Get Support Now"],
		["images/rollover_img/mce6.jpg", "purchase.php", "", "Click Or Call To Get Support Now"] //<--no trailing comma after very last image element!
	],
	displaymode: {type:'auto', pause:10000, cycles:0, wraparound:false},
	persist: false, //remember last viewed slide and recall within same session?
	fadeduration: 500, //transition duration (milliseconds)
	descreveal: "ondemand",
	togglerid: ""
})
</script>

And here's the code for the slideshow in the body of the page:

Code:

<tr>
                        <td width="752" height="320"><div id="fadeshow3"></div>
                                        </td>

The entire code can be found at mycomputerexpert.com The slideshow is on the home page.

Thank you,
Holly

**jscheuer1** · 06-24-2011, 07:11 AM

I cannot duplicate exactly what you describe. But the default background for the slideshow is black. So if the 57K images/rollover_img/mce1.jpg image takes awhile to load, any browser will show black until it loads.

Here's what I would suggest. Put this in the stylesheet:

Code:

#fadeshow3, #fadeshow3 .gallerylayer {
	background: #fff url(/images/rollover_img/mce1.jpg) !important;
}

And in the on page call, get rid of the highlighted slash:

Code:

var mygallery=new fadeSlideShow({
	wrapperid: "fadeshow3", //ID of blank DIV on page to house Slideshow
	dimensions: [752, 320], //width/height of gallery in pixels. Should reflect dimensions of largest image
	imagearray: [
		
		["/images/rollover_img/mce1.jpg", "purchase.php", "", "Click Or Call To Get Support Now"],
		["images/rollover_img/mce2.jpg", "purchase.php", "", "Click Or Call To Get Support Now"],
		["images/rollover_img/mce3.jpg", "purchase.php", "", "Click Or Call To Get Support Now"],
		["images/rollover_img/mce4.jpg", "purchase.php", "", "Click Or Call To Get Support Now"],
		["images/rollover_img/mce5.jpg", "purchase.php", "", "Click Or Call To Get Support Now"],
		["images/rollover_img/mce6.jpg", "purchase.php", "", "Click Or Call To Get Support Now"] //<--no trailing comma after very last image element!
	],
	displaymode: {type:'auto', pause:10000, cycles:0, wraparound:false},
	persist: false, //remember last viewed slide and recall within same session?
	fadeduration: 500, //transition duration (milliseconds)
	descreveal: "ondemand",
	togglerid: ""
})

**RedHolly** · 06-24-2011, 07:19 AM

Thank you so much John! That totally did the trick. I really appreciate you taking the time to help me and am grateful for your assistance.

Thread: Ultimate Slide Show -First Slide Black in FF

Thread Tools

Search Thread

Ultimate Slide Show -First Slide Black in FF

Bookmarks

Bookmarks

Posting Permissions