Same slideshow displays on the same page multiple times

[cardnexus]

1) Script Title: Slide Shows

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex14/index.html


3) Describe problem: Is there a slideshow script can display the SAME slideshow multiple times on the same page without adding more arrays and functions? Those exsiting scripts all requires to add addtional picture array and fuction for addtional slideshow even it is showing the same thing.

Can anybody help that?

Thanks!

[jscheuer1]

http://www.dynamicdrive.com/dynamici...nslideshow.htm

If you are using the same images, just define only one array here (get rid of the red one):

 
var fadeimages=new Array()
//SET IMAGE PATHS. Extend or contract array as needed
fadeimages[0]=["photo1.jpg", "", ""] //plain image syntax
fadeimages[1]=["photo2.jpg", "http://www.cssdrive.com", ""] //image with link syntax
fadeimages[2]=["photo3.jpg", "http://www.javascriptkit.com", "_new"] //image with link and target syntax
 
var fadeimages2=new Array() //2nd array set example. Remove or add more sets as needed.
//SET IMAGE PATHS. Extend or contract array as needed
fadeimages2[0]=["photo1.jpg", "", ""] //plain image syntax
fadeimages2[1]=["photo2.jpg", "http://www.cssdrive.com", ""] //image with link syntax
fadeimages2[2]=["photo3.jpg", "http://www.javascriptkit.com", "_new"] //image with link and target syntax
 
var fadebgcolor="white"
 
////NO need to edit beyond here/////////////

Then each place you go to declare the slide show in the body, just do this:

<script type="text/javascript">
new fadeshow(fadeimages, 140, 225, 0, 3000, 0) 
</script>

You might want to do yourself a favor and use this updated version of the script:

http://home.comcast.net/~jscheuer1/s...ade_safari.htm

And, if you are using the random switch, you would need to change these lines in the script:

function fadeshow(theimages, fadewidth, fadeheight, borderwidth, delay, pause, displayorder){
this.pausecheck=pause
this.mouseovercheck=0
this.delay=delay
this.degree=10 //initial opacity degree (10%)
this.curimageindex=0
this.nextimageindex=1
fadearray[fadearray.length]=this
this.slideshowid=fadearray.length-1
this.canvasbase="canvas"+this.slideshowid
this.curcanvas=this.canvasbase+"_0"
if (typeof displayorder!="undefined")
theimages.sort(function() {return 0.5 - Math.random();}) //thanks to Mike (aka Mwinter) :)
this.theimages=theimages
this.imageborder=parseInt(borderwidth)
this.postimages=new Array() //preload images
for (p=0;p<theimages.length;p++){
this.postimages[p]=new Image()
this.postimages[p].src=theimages[p][0]

so that they are reversed and moved (the blue ones) and adding the red parts:

function fadeshow(theimages, fadewidth, fadeheight, borderwidth, delay, pause, displayorder){
this.pausecheck=pause
this.mouseovercheck=0
this.delay=delay
this.degree=10 //initial opacity degree (10%)
this.curimageindex=0
this.nextimageindex=1
fadearray[fadearray.length]=this
this.slideshowid=fadearray.length-1
this.canvasbase="canvas"+this.slideshowid
this.curcanvas=this.canvasbase+"_0"
this.theimages=theimages
if (typeof displayorder!="undefined")
this.theimages.sort(function() {return 0.5 - Math.random();}) //thanks to Mike (aka Mwinter) :)
this.imageborder=parseInt(borderwidth)
this.postimages=new Array() //preload images
for (p=0;p<theimages.length;p++){
this.postimages[p]=new Image()
this.postimages[p].src=this.theimages[p][0]

[cardnexus]

Thank you very much!!

When I apply this code, for instance, insert the slide show right next to a text, it'll change to the next line by itself. To illustrate, following is the final result.

Text
slide show 1
slide show 2


The resentation I really want is:

Text (slide show 1) (slide show2)


No matter what i tried, as long as I insert the javascrpt code after the text, it goes to the next line. Any idea how to change that?

Thank you!

[jscheuer1]

You have two basic choices, either:

<div>
<div style="float:left;">some text</div>
<div style="float:left;"><script type="text/javascript">
new fadeshow(fadeimages, 140, 225, 0, 3000, 1, "R")

</script></div>
<div style="float:left;"><script type="text/javascript">
new fadeshow(fadeimages, 140, 225, 0, 2000, 0, "R")

</script></div>
</div>
<div style="clear:left;"></div>

or:

<table>
<tr>
<td>some text</td>
<td><script type="text/javascript">
new fadeshow(fadeimages, 140, 225, 0, 3000, 1, "R")

</script></td>
<td><script type="text/javascript">
new fadeshow(fadeimages, 140, 225, 0, 2000, 1, "R")

</script></td>
</tr>
</table>

The first choice is the better one but, harder for many people to understand and to work with. The float style can be applied as a class from a stylesheet where margin and padding may be included to get the desired layout. With the table, all of that stuff is automatic but, tables take longer to render and cannot wrap if the viewport is too narrow.

[cardnexus]

You are a freaking genius.
Thanks!

[cardnexus]

Hi Mad Professor:
I post another script under Javascript section.
It's an order form that I tried to modify to have more options.
Can you help me to see if there's any way to achive that?
Thanks!

Here's the link

http://www.dynamicdrive.com/forums/s...ad.php?t=13250

[mburt]

Just so you'd know "mad proffessor" is an automated title that's given to a user after I think, umm... 2000 posts? Anyway, it goes by posts. Mine says I'm a proffessor, but believe me. I'm not a professor

[jscheuer1]

Just so you'd know "mad proffessor" is an automated title that's given to a user after I think, umm... 2000 posts? Anyway, it goes by posts. Mine says I'm a proffessor, but believe me. I'm not a professor

You may not be a professor but, judging from your recent choices in avatar images, you are quite mad - in a good sort of way.