Ultimate Fade-in slideshow (v2.4) black box and broken page icon

**steviebob** · 08-24-2010, 10:40 AM

1) Script Title: Ultimate Fade-in slideshow (v2.4)

2) Script URL (on DD): n/a

3) Describe problem:

Followed all instructions as described and when i preview the page it appears only as a black box and the slide show doesn't play. this is also the same when i preview it in browser for IE. However when i preview it in Firefox a "torn page" icon appears in the middle of the black box?? what am i doing wrong or what does the "torn page" mean? Because this also appears when i try to preview a video i have on my web (currently under construction and not uploaded yet). Also if you manage to answer that problem i would also like to then center the slide show, any commands to help with positioning if it? thanks a million!

Below is example of the code for a test page i am working on just to get it work and then i will be incorporating it in the wed site.

Code:

<!DOCTYPE HTM>
<html>

<head>
<meta http-equiv="Content-Language" content="en-gb">
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 2</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript" src="slideshow/fade_slideshow.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: "fadeshow1", //ID of blank DIV on page to house Slideshow
	dimensions: [700, 525], //width/height of gallery in pixels. Should reflect dimensions of largest image
	imagearray: [
		["slideshow/mervyn/IMG_1896.JPG", "", "", ""],
		["slideshow/mervyn/IMG_1897.JPG", "", "", ""],
		["slideshow/mervyn/IMG_1897.JPG", "", "", ""]
],
	displaymode: {type:'auto', pause:2500, cycles:1, wraparound:false},
	persist: false, //remember last viewed slide and recall within same session?
	fadeduration: 500, //transition duration (milliseconds)
	descreveal: "none",
	togglerid: ""
})


</script>
</head>

<body>


 <div id="fadeshow1"></div>

</body>

</html>

**azoomer** · 08-24-2010, 10:57 AM

your code looks alright. It is probably the path to the images that is the problem. Sometimes it is a question of capital letters in the .jpg extension. Make sure it is the same ( jpg or JPG). To center the show you can use css like this:

Code:

#fadeshow1{
margin-left: auto;
margin-right: auto;
}

**steviebob** · 08-24-2010, 11:28 AM

Thanks for the reply, sorry for the ignorance i am only a beginner and not to sure as to how to us css, im using frontpage 2002, any instructions as to how would be grateful. Also the path of the images shouldnt be the problem cause i copied their name from the file and inserted it in if you understand me.

**azoomer** · 08-24-2010, 02:11 PM

hi steviebob, here is a version of your code that I have running fine on my pc.
I have highlighted some things that are changed ( blue)

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" />
<title>New Page 2</title>
<style type="text/css">
#fadeshow1{
margin-left: auto;
margin-right: auto;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript" src="slideshow/fade_slideshow.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: "fadeshow1", //ID of blank DIV on page to house Slideshow
	dimensions: [700, 525], //width/height of gallery in pixels. Should reflect dimensions of largest image
	imagearray: [
		["slideshow/mervyn/IMG_1896.JPG", "", "", ""],
		["slideshow/mervyn/IMG_1897.JPG", "", "", ""],
		["slideshow/mervyn/IMG_1898.JPG", "", "", ""]
],
	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: "none",
	togglerid: ""
})


</script>
</head>

<body>

     <div id="fadeshow1"></div>

</body>

</html>

This works fine as long as the paths are right. The fade_slideshow.js (red) has an underscore that is not in the original, be sure to check that they have the same name. You can see how the css can be added. I changed the cycle to zero for continuous cycling, also changed the last image number because it was a duplicate.
If you still have problems getting it running then upload it to a server and post a link, that way it is much easier for us to pinpoint the problem.

Thread: Ultimate Fade-in slideshow (v2.4) black box and broken page icon

Thread Tools

Search Thread

Ultimate Fade-in slideshow (v2.4) black box and broken page icon

The Following User Says Thank You to azoomer For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions