User Name Password Register
DaniWeb IT Discussion Community
All
What is DaniWeb IT Discussion Community?
You're currently browsing the JavaScript / DHTML / AJAX section within the Web Development category of DaniWeb, a massive community of 422,602 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 4,678 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.
Please support our JavaScript / DHTML / AJAX advertiser: Lunarpages Web Hosting
Views: 1888 | Replies: 2
Reply
Join Date: Jan 2008
Posts: 2
Reputation: islandbreeze is an unknown quantity at this point 
Rep Power: 0
Solved Threads: 0
islandbreeze's Avatar
islandbreeze islandbreeze is offline Offline
Newbie Poster

Help Javascript image slider issue

  #1  
Jan 30th, 2008
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
AddThis Social Bookmark Button
Reply With Quote  
Join Date: Sep 2005
Posts: 689
Reputation: digital-ether has a spectacular aura about digital-ether has a spectacular aura about 
Rep Power: 6
Solved Threads: 41
Moderator
digital-ether's Avatar
digital-ether digital-ether is offline Offline
Practically a Master Poster

Help Re: Javascript image slider issue

  #2  
Jan 31st, 2008
Originally Posted by islandbreeze View Post
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.
www.fijiwebdesign.com - web design and development and fun
Cpanel Email - Let users Register email accounts on your website upon registration
Ajax Chat - Fully browser based chat!
Reply With Quote  
Join Date: Jan 2008
Posts: 2
Reputation: islandbreeze is an unknown quantity at this point 
Rep Power: 0
Solved Threads: 0
islandbreeze's Avatar
islandbreeze islandbreeze is offline Offline
Newbie Poster

Re: Javascript image slider issue

  #3  
Jan 31st, 2008
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
Reply With Quote  
Reply

Only community members can participate in forum threads. You must register or log in to contribute.

DaniWeb JavaScript / DHTML / AJAX Marketplace
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)

 

Thread Tools Display Modes

Other Threads in the JavaScript / DHTML / AJAX Forum

All times are GMT -4. The time now is 2:31 pm.
Forum system based on vBulletin Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
©2003 - 2008 DaniWeb® LLC