Ultimate Fade out slideshow v. 2.4 not working [Archive]

View Full Version : Ultimate Fade out slideshow v. 2.4 not working

eoinjohn1981

03-07-2011, 06:43 PM

Need help guys! Not sure what I am doing wrong here, I'm an intermediate user of Dreamweaver and trying to get this slideshow effect to work. Initially, I want to use it on my template with the rest of my pages but doesnt seem to be working. As far as I can see, the code is as it should be and I have put the div id in the table I want it but nothing appears in the preview. My code is as follows:

<!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=iso-8859-1" />

<title>Untitled Document</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="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: "fadeshow1", //ID of blank DIV on page to house Slideshow
dimensions: [350, 550], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
[<img src="../Images/Christ_on_Corcovado_mountain.JPG" />],
[<img src="../Images/colosseum2.jpg" />],
[<img src="../Images/Greatwall.jpg" />],
[<img src="../Images/india.jpg" />] //<--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: "ondemand",
togglerid: ""
})

</script>

<style type="text/css">

</style>
</head>

<body>
<table width="693" height="749" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="352" height="65"><img src="../Images/TopLogo.gif" width="352" height="64" /></td>
<td width="390"> <div align="center"><span class="style1"> Anytime anywhere, We will get you the lowest fare</span> </div></td>
</tr>
<tr>
<td height="495"> </td>
<td colspan="2"><div id="fadeshow1"></div></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td width="4"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>

Its a possible image path issue but not 100% certain on that. They are in an images folder on my site. I downloaded the js. file along with the 3 images included so not really sure what to do on this. Have spent a few hours on this with no success.

Any help would be greatly appreciated!

azoomer

03-07-2011, 06:53 PM

You need to format the imagearray like this

imagearray: [
["http://i26.tinypic.com/11l7ls0.jpg", "", "", "Nothing beats relaxing next to the pool when the weather is hot."],
["http://i29.tinypic.com/xp3hns.jpg", "http://en.wikipedia.org/wiki/Cave", "_new", "Some day I'd like to explore these caves!"],
["http://i30.tinypic.com/531q3n.jpg"],
["http://i31.tinypic.com/119w28m.jpg", "", "", "What a beautiful scene with everything changing colors."] //<--no trailing comma after very last image element!
],
The img tags are not needed.
Try it, and post a link to your page if you are having trouble with it !

eoinjohn1981

03-08-2011, 03:07 PM

Thank you for getting back to me.

I have made the changes that you requested but upon previewing the template page, where the slideshow should be is just blank.

Please Advise, there is nothing coming out.

<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=iso-8859-1" />

<title>Untitled Document</title>



<script type="text/javascript" src="chromejs/chrome.js">

/***********************************************
* Chrome CSS Drop Down Menu- (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 full source code
***********************************************/

</script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript" src="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: "fadeshow1", //ID of blank DIV on page to house Slideshow
dimensions: [565, 365], //width/height of gallery in pixels. Should reflect dimensions of largest image
imagearray: [
["../Images/Christ_on_Corcovado_mountain.JPG", "", "", ""],
["../Images/colosseum2.jpg", "", "", ""],
["../Images/Greatwall.jpg"],
["../Images/india.jpg", "", "", ""] //<--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: "ondemand",
togglerid: ""
})

</script>
<link href="../style4.css" rel="stylesheet" type="text/css" />
<link href="../chrometheme/chromestyle4.css" rel="stylesheet" type="text/css" />
<link href="../chrometheme/chromestyle3.css" rel="stylesheet" type="text/css" />
<body>

<table width="1055" height="556" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="502" height="65"><img src="../Images/TopLogo1.gif" width="352" height="64" /></td>
<td width="444"><div align="center">
<script language="JavaScript1.2">

//Neon Lights Text II by G.P.F. (gpf@beta-cc.de)
//visit http://www.beta-cc.de
//Visit http://www.dynamicdrive.com for this script

var message="Anytime, Anywhere, We'll have the RIGHT fare"
var neonbasecolor="gray"
var neontextcolor="yellow"
var neontextcolor2="#FFFFA8"
var flashspeed=100 // speed of flashing in milliseconds
var flashingletters=3 // number of letters flashing in neontextcolor
var flashingletters2=1 // number of letters flashing in neontextcolor2 (0 to disable)
var flashpause=0 // the pause between flash-cycles in milliseconds

///No need to edit below this line/////

var n=0
if (document.all||document.getElementById){
document.write('<font color="'+neonbasecolor+'">')
for (m=0;m<message.length;m++)
document.write('<span id="neonlight'+m+'">'+message.charAt(m)+'</span>')
document.write('</font>')
}
else
document.write(message)

function crossref(number){
var crossobj=document.all? eval("document.all.neonlight"+number) : document.getElementById("neonlight"+number)
return crossobj
}

function neon(){

//Change all letters to base color
if (n==0){
for (m=0;m<message.length;m++)
crossref(m).style.color=neonbasecolor
}

//cycle through and change individual letters to neon color
crossref(n).style.color=neontextcolor

if (n>flashingletters-1) crossref(n-flashingletters).style.color=neontextcolor2
if (n>(flashingletters+flashingletters2)-1) crossref(n-flashingletters-flashingletters2).style.color=neonbasecolor

if (n<message.length-1)
n++
else{
n=0
clearInterval(flashing)
setTimeout("beginneon()",flashpause)
return
}
}

function beginneon(){
if (document.all||document.getElementById)
flashing=setInterval("neon()",flashspeed)
}
beginneon()

</script>
</div></td>
</tr>
<tr>
<td height="302" valign="top"><script type="text/javascript" src="../locator-4-0-continents-free/swfobject.js"></script>
<script type="text/javascript">
var params = {
wmode: "transparent"
};
swfobject.embedSWF("../locator-4-0-continents-free/locator_map.swf", "locator_map", "500", "300", "9.0.0", "", "", params);
</script>
<div style="width:500px;height:300px;">
<div id="locator_map"> </div>
</div></td>
<td colspan="2"><div id="fadeshow1"></div></td>
</tr>
<tr>
<td colspan="2" valign="top"><div class="chromestyle" id="chromemenu">
<ul>
<li><a href="http://www.dynamicdrive.com">Home</a></li>
<li><a href="#" rel="dropmenu1">Flights</a></li>
<li><a href="#" rel="dropmenu2">Hotels</a></li>
<li><a href="#" rel="dropmenu3">Insurance</a></li>
<li><a href="#" rel="dropmenu4">Specials</a></li>
<li><a href="#" rel="dropmenu5">Car Hire</a></li>
<li><a href="#" rel="dropmenu6">About Us</a></li>
<li><a href="#" rel="dropmenu7">Contact Us</a></li>
</ul>
</div>


<div id="dropmenu1" class="dropmenudiv">
<a href="http://www.worldtravelcentre.ie">Special Deals</a>
<a href="http://www.cssdrive.com">Stopovers</a>
<a href="http://www.javascriptkit.com">JavaScript Kit</a>
<a href="http://www.codingforums.com">Coding Forums</a>
<a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a></div>


<div id="dropmenu2" class="dropmenudiv" style="width: 150px;">
<a href="http://www.cnn.com/">CNN</a>
<a href="http://www.msnbc.com">MSNBC</a>
<a href="http://news.bbc.co.uk">BBC News</a></div>


<div id="dropmenu3" class="dropmenudiv" style="width: 150px;">
<a href="http://www.google.com/">Google</a>
<a href="http://www.yahoo.com">Yahoo</a>
<a href="http://www.msn.com">MSN</a></div>

<script type="text/javascript">

cssdropdown.startchrome("chromemenu")

</script></td>
<td width="51"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>

azoomer

03-08-2011, 04:57 PM

It looks all right to me (at a glance), but you need to make sure the paths to the fadeslideshow.js and the images are working. We would need to see the page live to help you any further.