DHTML Slide Show Script

**dlparr** · 05-23-2007, 12:14 PM

1) Script Title: DHTML Slide Show Script

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamici...dhtmlslide.htm

3) Describe problem:

Is there a way that I can put this script or something similiar as multiple slide shows on the same page? When I tried to put more than one on there they started coming up as x with no pictures showing.

Please help....

**jscheuer1** · 05-23-2007, 03:50 PM

http://www.dynamicdrive.com/dynamici...army/index.htm

**dlparr** · 05-24-2007, 11:46 AM

Thankyou jscheuer1. My only concern is that I'm working with Homestead and I've been having trouble loading files onto the server. I was hoping to find something very simple that I can use. Do you have any other suggestions?

**jscheuer1** · 05-24-2007, 04:32 PM

Well, it doesn't get much simpler than this:

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">

/***********************************************
* DHTML slideshow script-  © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice must stay intact for legal use
* Visit http://www.dynamicdrive.com/ for full source code
* Modified in http://www.dynamicdrive.com/forums by jscheuer1
* for object oriented multiple use. 24/May/2007
***********************************************/

photos1=[]
//define images. You can have as many as you want:
photos1[0]="photo1.jpg"
photos1[1]="photo2.jpg"
photos1[2]="photo3.jpg"

photoslink1=[];
//Set corresponding URLs for above images. Define ONLY if parameter linkornot equals "1"
photoslink1[0]=""
photoslink1[1]=""
photoslink1[2]=""

photos2=[]
//define images. You can have as many as you want:
photos2[0]="photo4.jpg"
photos2[1]="photo5.jpg"
photos2[2]="photo6.jpg"

photoslink2=[];
//Set corresponding URLs for above images. Define ONLY if parameter linkornot equals "1"
photoslink2[0]="http://www.google.com/"
photoslink2[1]="http://www.dynamicdrive.com"
photoslink2[2]="http://www.msn.com/"

//do NOT edit pass this line
oo_DHTML=function(images, linkornot, links){
if(!oo_DHTML.ar){
oo_DHTML.ar=[];
oo_DHTML.ar[0]='placeholder';
}
oo_DHTML.ar[this.id=oo_DHTML.ar.length]=this;
this.image_id='image_id_'+this.id;
this.photos=images;
this.linkornot=linkornot;
this.links=links;
this.which=0;
this.preloadedimages=[];
for (i=0;i<this.photos.length;i++){
this.preloadedimages[i]=new Image()
this.preloadedimages[i].src=this.photos[i]
}
this.hasFilters=typeof document.body.filters!='undefined'? ' style="filter:revealTrans(duration=2,transition=23)"' : '';
if (this.linkornot)
document.write('<a href="javascript:oo_DHTML.ar['+this.id+'].transport()">')
document.write('<img src="'+this.photos[0]+'" name="'+this.image_id+'"'+this.hasFilters+' border=0>')
if (this.linkornot)
document.write('<\/a>')
}

oo_DHTML.prototype.applyeffect=function (){
if (document.all && document.all[this.image_id].filters){
document.all[this.image_id].filters.revealTrans.Transition=Math.floor(Math.random()*23)
document.all[this.image_id].filters.revealTrans.stop()
document.all[this.image_id].filters.revealTrans.apply()
}
}

oo_DHTML.prototype.playeffect=function (){
if (document.all && document.all[this.image_id].filters)
document.all[this.image_id].filters.revealTrans.play()
}


oo_DHTML.prototype.backward=function (){
if (this.which>0){
this.which--
this.applyeffect()
document.images[this.image_id].src=this.photos[this.which]
this.playeffect()
}
}

oo_DHTML.prototype.forward=function (){
if (this.which<this.photos.length-1){
this.which++
this.applyeffect()
document.images[this.image_id].src=this.photos[this.which]
this.playeffect()
}
}

oo_DHTML.prototype.transport=function (){
window.location=this.links[this.which]
}

</script>
</head>
<body>
<table border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="100%" colspan="2" height="22"><center>

<script type="text/javascript">
new oo_DHTML(photos1);
</script>

</center></td>
  </tr>
  <tr>
    <td width="50%" height="21"><p align="left"><a href="#" onClick="oo_DHTML.ar[1].backward();return false">Previous Slide</a></td>
    <td width="50%" height="21"><p align="right"><a href="#" onClick="oo_DHTML.ar[1].forward();return false">Next Slide</a></td>
  </tr>
</table>

<table border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="100%" colspan="2" height="22"><center>

<script type="text/javascript">
new oo_DHTML(photos2, 1, photoslink2);
</script>

</center></td>
  </tr>
  <tr>
    <td width="50%" height="21"><p align="left"><a href="#" onClick="oo_DHTML.ar[2].backward();return false">Previous Slide</a></td>
    <td width="50%" height="21"><p align="right"><a href="#" onClick="oo_DHTML.ar[2].forward();return false">Next Slide</a></td>
  </tr>
</table>


<p align="center"><font face="Arial" size="-2">Free DHTML scripts provided by<br>
<a href="http://dynamicdrive.com">Dynamic Drive</a></font></p>
</body>
</html>

Notes: As there are more than one slide shows, I got rid of the keeptrack function. It would be hard to tell which slide show was which from its text in the status line. If you want more comprehensive image tracking use the Swiss Army script.

Hopefully, this demo is simple enough to understand 'as is', if not - feel free to ask any questions you might have.

Thread: DHTML Slide Show Script

Thread Tools

Search Thread

DHTML Slide Show Script

Bookmarks

Bookmarks

Posting Permissions