Javascript image slider issue

[islandbreeze]

Hi, A simple problem for you I hope. I have applied a pre-made javascript to a dreamwever template. It works fine when I preview the template in the browser. When I apply the template to other pages it will not work - the container box shows but it cannot show the images.
I have changed the script so that images are found by directing it to my sites root directory folder>images\file.jpg ie "../images/example.jpg"
This script is contained within a div tag and I have used it in an uneditable region of the DMW template. I think I tried putting it in a editable region and it still doesn't work.

Here is the orginal script;

<script type="text/javascript">

// Flexible Image Slideshow- By JavaScriptKit.com (http://www.javascriptkit.com)
// For this and over 400+ free scripts, visit JavaScript Kit- http://www.javascriptkit.com/
// This notice must stay intact for use

var ultimateshow=new Array()

//ultimateshow[x]=["path to image", "OPTIONAL link for image", "OPTIONAL link target"]

ultimateshow[0]=['dinosour.gif', '', ''] // I changed to "../images/example.jpg" etc
ultimateshow[1]=['crow.gif', 'http://www.dynamicdrive.com', '_new']
ultimateshow[2]=['pig.gif', 'http://www.codingforums.com', '']

//configure the below 3 variables to set the dimension/background color of the slideshow

var slidewidth="300px" //set to width of LARGEST image in your slideshow
var slideheight="261px" //set to height of LARGEST iamge in your slideshow
var slidecycles="3" //number of cycles before slideshow stops (ie: "2" or "continous")
var randomorder="no" //randomize the order in which images are displayed? "yes" or "no"
var preloadimages="yes" //preload images? "yes" or "no"
var slidebgcolor='white'

//configure the below variable to determine the delay between image rotations (in miliseconds)
var slidedelay=3000

////Do not edit pass this line////////////////

var ie=document.all
var dom=document.getElementById
var curcycle=0

if (preloadimages=="yes"){
for (i=0;i<ultimateshow.length;i++){
var cacheimage=new Image()
cacheimage.src=ultimateshow[i][0]
}
}

var currentslide=0

function randomize(targetarray){
ultimateshowCopy=new Array()
var the_one
var z=0
while (z<targetarray.length){
the_one=Math.floor(Math.random()*targetarray.length)
if (targetarray[the_one]!="_selected!"){
ultimateshowCopy[z]=targetarray[the_one]
targetarray[the_one]="_selected!"
z++
}
}
}

if (randomorder=="yes")
randomize(ultimateshow)
else
ultimateshowCopy=ultimateshow

function rotateimages(){
curcycle=(currentslide==0)? curcycle+1 : curcycle
ultcontainer='<center>'
if (ultimateshowCopy[currentslide][1]!="")
ultcontainer+='<a href="'+ultimateshowCopy[currentslide][1]+'" target="'+ultimateshowCopy[currentslide][2]+'">'
ultcontainer+='<img src="'+ultimateshowCopy[currentslide][0]+'" border="0">'
if (ultimateshowCopy[currentslide][1]!="")
ultcontainer+='</a>'
ultcontainer+='</center>'
if (ie||dom)
crossrotateobj.innerHTML=ultcontainer
if (currentslide==ultimateshow.length-1) currentslide=0
else currentslide++
if (curcycle==parseInt(slidecycles) && currentslide==0)
return
setTimeout("rotateimages()",slidedelay)
}

if (ie||dom)
document.write('<div id="slidedom" style="width:'+slidewidth+';height:'+slideheight+'; background-color:'+slidebgcolor+'"></div>')

function start_slider(){
crossrotateobj=dom? document.getElementById("slidedom") : document.all.slidedom
rotateimages()
}

if (ie||dom)
window.onload=start_slider

</script>

<p style="font: normal 11px Arial">This free script provided by<br />
<a href="http://www.javascriptkit.com">JavaScript Kit</a></p>

Any help appreciated.
Thx,
Rick

[digital-ether]

Hi, A simple problem for you I hope. I have applied a pre-made javascript to a dreamwever template. It works fine when I preview the template in the browser. When I apply the template to other pages it will not work - the container box shows but it cannot show the images.
I have changed the script so that images are found by directing it to my sites root directory folder>images\file.jpg ie "../images/example.jpg"
This script is contained within a div tag and I have used it in an uneditable region of the DMW template. I think I tried putting it in a editable region and it still doesn't work.

Here is the orginal script;

<script type="text/javascript">

// Flexible Image Slideshow- By JavaScriptKit.com (http://www.javascriptkit.com)
// For this and over 400+ free scripts, visit JavaScript Kit- http://www.javascriptkit.com/
// This notice must stay intact for use

var ultimateshow=new Array()

//ultimateshow[x]=["path to image", "OPTIONAL link for image", "OPTIONAL link target"]

ultimateshow[0]=['dinosour.gif', '', ''] // I changed to "../images/example.jpg" etc
ultimateshow[1]=['crow.gif', 'http://www.dynamicdrive.com', '_new']
ultimateshow[2]=['pig.gif', 'http://www.codingforums.com', '']

//configure the below 3 variables to set the dimension/background color of the slideshow

var slidewidth="300px" //set to width of LARGEST image in your slideshow
var slideheight="261px" //set to height of LARGEST iamge in your slideshow
var slidecycles="3" //number of cycles before slideshow stops (ie: "2" or "continous")
var randomorder="no" //randomize the order in which images are displayed? "yes" or "no"
var preloadimages="yes" //preload images? "yes" or "no"
var slidebgcolor='white'

//configure the below variable to determine the delay between image rotations (in miliseconds)
var slidedelay=3000

////Do not edit pass this line////////////////

var ie=document.all
var dom=document.getElementById
var curcycle=0

if (preloadimages=="yes"){
for (i=0;i<ultimateshow.length;i++){
var cacheimage=new Image()
cacheimage.src=ultimateshow[i][0]
}
}

var currentslide=0

function randomize(targetarray){
ultimateshowCopy=new Array()
var the_one
var z=0
while (z<targetarray.length){
the_one=Math.floor(Math.random()*targetarray.length)
if (targetarray[the_one]!="_selected!"){
ultimateshowCopy[z]=targetarray[the_one]
targetarray[the_one]="_selected!"
z++
}
}
}

if (randomorder=="yes")
randomize(ultimateshow)
else
ultimateshowCopy=ultimateshow

function rotateimages(){
curcycle=(currentslide==0)? curcycle+1 : curcycle
ultcontainer='<center>'
if (ultimateshowCopy[currentslide][1]!="")
ultcontainer+='<a href="'+ultimateshowCopy[currentslide][1]+'" target="'+ultimateshowCopy[currentslide][2]+'">'
ultcontainer+='<img src="'+ultimateshowCopy[currentslide][0]+'" border="0">'
if (ultimateshowCopy[currentslide][1]!="")
ultcontainer+='</a>'
ultcontainer+='</center>'
if (ie||dom)
crossrotateobj.innerHTML=ultcontainer
if (currentslide==ultimateshow.length-1) currentslide=0
else currentslide++
if (curcycle==parseInt(slidecycles) && currentslide==0)
return
setTimeout("rotateimages()",slidedelay)
}

if (ie||dom)
document.write('<div id="slidedom" style="width:'+slidewidth+';height:'+slideheight+'; background-color:'+slidebgcolor+'"></div>')

function start_slider(){
crossrotateobj=dom? document.getElementById("slidedom") : document.all.slidedom
rotateimages()
}

if (ie||dom)
window.onload=start_slider

</script>

<p style="font: normal 11px Arial">This free script provided by<br />
<a href="http://www.javascriptkit.com">JavaScript Kit</a></p>

Any help appreciated.
Thx,
Rick

Do you have the element with the ID "slidedom" that the JavaScript writes the Images to?

Eg:

<div id="slidedom"></div>

has to be in the body of your HTML page.

Do you have other JS on the page?

Off Topic:

I would really advise against using copy-n-paste javascript. Copy-n-paste JS promotes some bad web design practices that are hard to break. "Modern" JS libraries (MooTools, ExtJS, Prototype, JQuery etc.) usually promote better approaches and practices.

The particular snippet you're using isn't too bad. It overwrites the window.onload event handler however, which can break other js if you have it on the same page. You should move it to an external JS file also, so that it gets cached.

[islandbreeze]

The script is wrapped in a header div tag in the body as thats where I've positioned it, but no, I don't have the <div id="slidedom"></div> code in my body so I'll try that asap.

I do have an onclick JS script for one of my form boxes on the same page and it seems to run OK.

Thx for the reply