PDA

View Full Version : Help with cut and paste javascript slide show on my site?



Ella
29 Aug 2006, 10:06 PM
Hi there,

I'm in serious need of assistance. I'm really having a hard time figuring out how to implement a simple, cut and paste javascript slideshow on my site....conundrum is, that it's not at ALL simple to me.
Here's the problem...I'm clueless about certain things. I know what I want,and I've seen it done, but I don't know how to get there. I have a javascript slideshow (one of the free scripts-pasted below for you to view) and I can't figure out, (#1) how to have it react to the clicking of a text button (I.E. click on "logo design", which is a text button,) and have that act like a disjointed rollover, by begining the slide show on another part of the page. Also, I just don't understand where to "put" it...? I have the page as a jpg. ready to be sliced and put into dreamweaver, but how do I get the show in the area of the page that I want it?
The page itself has text buttons on the left side, and to the right of it, a graphic design. I want to click on a button, and have that graphic design fade out, and begin a slide show of sample designs, end on the last, and re- fade into the graphic that loaded with the page. This would be repeated with the other buttons as well, as there are several different graphic design categories being shown. I"m SOOOO frustrated with myself, and I've been looking for help for several weeks now, but I can't get any answers. Am I just asking the wrong question? Maybe I'm not clear on what I'm trying to do? Please help....also, I understand how to replace the pics that I have with the pics in the code, and I understand how to change the amount of pics it will play, what I DONT understand to recap, is position of slide show opening, how to make it start when I click a side button and open a different area of the page, and end when the last pic plays, then have the original pic that loads with page, fade back in?
I hope this makes sense to someone. I'm desperate at this point.
Thank you!

<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', '', '']
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.lengt h)
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>