Presentation Slideshow Script

**tghhampton** · 12-06-2006, 09:25 PM

1) PRESENTATION SLIDE SHOW SCRIPT:

2) http://www.dynamicdrive.com/dynamici...ationslide.htm

3) No problem just wanted to know if the Presentation Slide Show Script can be run more than once per page? Ultimately I would like to run it 4 times on the one page - is this possible.

Thanks

**ddadmin** · 12-07-2006, 08:19 AM

There's no easy way in its current state, no. I'd have to get to rewriting this script in the future to support multiple instances on the same page.

**jscheuer1** · 12-08-2006, 07:38 AM

Still a bit rough but, it will do the deed:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">

//Presentational Slideshow Script- By Dynamic Drive
//For full source code and more DHTML scripts, visit http://www.dynamicdrive.com
//This credit MUST stay intact for legal use
//Modified in http://www.dynamicdrive.com/forums by
//jscheuer1 for OO multi-usability

var dropimages=[];
//SET IMAGE PATHS and LINKS. Extend or contract array as needed
dropimages[0]=["photo1.jpg", "http://www.yahoo.com"]
dropimages[1]=["photo2.jpg", ""]
dropimages[2]=["photo3.jpg", "http://www.google.com"]
dropimages[3]=["photo4.jpg", "http://www.google.com"]

var dropimages2=[];
//SET IMAGE PATHS and LINKS. Extend or contract array as needed
dropimages2[0]=["photo5.jpg", "http://www.yahoo.com"]
dropimages2[1]=["photo6.jpg", ""]
dropimages2[2]=["photo7.jpg", "http://www.google.com"]
dropimages2[3]=["photo8.jpg", "http://www.google.com"]

var slidebgcolor="white"

////NO need to edit beyond here/////////////
var ie4=document.all;
var dom=document.getElementById;
var pa=[]; //array to cache pshow instances
var ds=[]; //array to cache corresponding clearinterval pointers

function pshow(images, width, height, interval){
this.i=images;
this.w=width;
this.h=height;
this.int=interval;
this.p=[]; //preload images
for (var p=0;p<this.i.length;p++){
this.p[p]=new Image();
this.p[p].src=this.i[p][0];
}
pa[pa.length]=this;
this.pid=pa.length-1;
this.curpos=this.w*-1;
this.degree=10;
this.curcanvas="canvas0"+this.pid;
this.curimageindex=1;
this.linkindex=0;
if (ie4||dom)
document.write('<div style="position:relative;width:'+this.w+'px;height:'+this.h+'px;overflow:hidden">'+(this.i[0][1]!=''? '<a href="'+this.i[0][1]+'">' : '')+'<img src="'+this.p[0].src+'" border="0">'+(this.i[0][1]!=''? '</a>' : '')+'<div id="canvas0'+this.pid+'" style="position:absolute;width:'+this.w+'px;height:'+this.h+'px;background-color:'+slidebgcolor+';left:-'+this.w+'px;top:0;"></div><div id="canvas1'+this.pid+'" style="position:absolute;width:'+this.w+'px;height:'+this.h+'px;background-color:'+slidebgcolor+';left:-'+this.w+'px;top:0;"></div></div>')
else
document.write('<a href="javascript:pa['+this.pid+'].rotatelink()"><img name="defaultslide'+this.pid+'" src="'+this.i[0][0]+'" border="0"></a><br>')
if (ie4||dom)
setTimeout("pa["+this.pid+"].startit()", this.int*.66);
else
setInterval("pa["+this.pid+"].rotateimage()", this.int);
}

function movepic(obj){
if (obj.curpos<0){
obj.curpos=Math.min(obj.curpos+obj.degree, 0);
obj.tempobj.style.left=obj.curpos+"px";
}
else{
clearInterval(ds[obj.pid]);
obj.nextcanvas=obj.curcanvas=="canvas0"+obj.pid? "canvas0"+obj.pid : "canvas1"+obj.pid;
obj.tempobj=ie4? ie4[obj.nextcanvas] : document.getElementById(obj.nextcanvas);
var slideimage='<img src="'+obj.p[obj.curimageindex].src+'" border="0">'
obj.tempobj.innerHTML=obj.i[obj.curimageindex][1]!=""? '<a href="'+obj.i[obj.curimageindex][1]+'">'+slideimage+'</a>' : slideimage;
setTimeout("pa["+obj.pid+"].rotateimage()", obj.int);
}
}

pshow.prototype.rotateimage=function(){
if (ie4||dom){
this.resetit();
var crossobj=this.tempobj=ie4? ie4[this.curcanvas] : document.getElementById(this.curcanvas)
crossobj.style.zIndex++
ds[this.pid]=setInterval("movepic(pa["+this.pid+"])",50)
this.curcanvas=(this.curcanvas=="canvas0"+this.pid)? "canvas1"+this.pid : "canvas0"+this.pid;
}
else
document.images['defaultslide'+this.pid].src=this.i[this.curimageindex][0];
this.linkindex=this.curimageindex;
this.curimageindex=this.curimageindex<this.i.length-1? this.curimageindex+1 : 0;
}

pshow.prototype.rotatelink=function(){
if (this.i[this.linkindex][1]!="")
window.location=this.i[this.linkindex][1];
}

pshow.prototype.resetit=function(){
this.curpos=this.w*-1
var crossobj=ie4? ie4[this.curcanvas] : document.getElementById(this.curcanvas)
crossobj.style.left=this.curpos+"px"
}

pshow.prototype.startit=function(){
var crossobj=ie4? ie4[this.curcanvas] : document.getElementById(this.curcanvas);
var slideimage='<img src="'+this.p[this.curimageindex].src+'" border="0">'
crossobj.innerHTML=this.i[this.curimageindex][1]!=""? '<a href="'+this.i[this.curimageindex][1]+'">'+slideimage+'</a>' : slideimage;
this.rotateimage();
}

</script>

</head>
<body>
<script type="text/javascript">
new pshow(dropimages, 140, 225, 3000)
</script>
<script type="text/javascript">
new pshow(dropimages2, 140, 225, 4000)
</script>
<p align="center"><font face="Arial" size="-2">Free DHTML scripts provided by<br>
<a href="http://www.dynamicdrive.com">Dynamic Drive</a></font></p>
</body>
</html>

This is the call from the body:

new pshow(array_name, width, height, delay)

I changed it so that the first image is displayed as the page loads.

Here's a demo:

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

**tghhampton** · 12-08-2006, 10:01 AM

John,

Thank you for the above script it works perfectly and with the knowledge from our initial discussion I was able to sort out the distortion between the various lines of photographs. I took from the above code (body element) only one of the codes and placed it once per line at random to achieve what I initially wanted and.... well it is fantastic. I would like to thank you for all your help and persistance with this to enable me to achieve what I wanted. You guys are the best!!!

To view the outcome go to http://vvmcsc.australianartilleryassociation.com and view the Home Page montage of photos some of which are now rotating on each line. THANKS AGAIN I DO SIGNIFICANTLY APPRECIATE IT

**jscheuer1** · 12-09-2006, 06:26 PM

I like what you've done but, I think I can improve upon it slightly. Try out this version of your page and let me know what you think:

Attachment 681

The major differences are what happens on a first time live load or if the browser's cache has been cleared before loading the live page (things should load more smoothly). And, it will not slide in two images at once in most browsers, they can't handle it, they get really choppy. But, in IE it can slide more than one image at at time so, it will do so in that browser.

I also cleaned up some of your HTML a little (not a thorough job of that, just some things about the head section). I changed the values for the delays (red numbers in the calls):

Code:

new pshow(dropimages, 100, 85, 3000)

But, this is not critical, you can use whatever values you prefer there.

Thread: Presentation Slideshow Script

Thread Tools

Search Thread

Presentation Slideshow Script

Bookmarks

Bookmarks

Posting Permissions