slide show photo descriptions

**jaheni1** · 03-09-2007, 02:24 AM

1) Script Title: DHTML slide show (manual)

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

3) Describe problem: I like the script at the above URL and I have it working like I want it. However, is there a way to add descriptions to the photos? I like the way the Flexi slide show on Dynamic Drive (http://www.dynamicdrive.com/dynamici...flexislide.htm) uses descriptions for photos (2nd photo) but can't get that same type of thing to work in the DHTML slide show (manual). Any suggestions???

**thetestingsite** · 03-09-2007, 02:37 AM

Try using the below (tested) code. Edit the parts in red to suit your needs.

Code:

<html>
<head>

<script type="text/javascript">

/***********************************************
* DHTML slideshow script-  &#169; 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
***********************************************/

var photos=new Array()
var photoslink=new Array()
var photosdesc = new Array()

var which=0

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

//define captions for images above.
//If you do not want a caption for an image, simply leave it blank

photosdesc[0] = "This is a test"
photosdesc[1] = ""
photosdesc[2] = "Second Test"

//Specify whether images should be linked or not (1=linked)
var linkornot=0

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

//do NOT edit pass this line

var preloadedimages=new Array()
for (i=0;i<photos.length;i++){
preloadedimages[i]=new Image()
preloadedimages[i].src=photos[i]
}


function applyeffect(){
if (document.all && photoslider.filters){
photoslider.filters.revealTrans.Transition=Math.floor(Math.random()*23)
photoslider.filters.revealTrans.stop()
photoslider.filters.revealTrans.apply()
}
}



function playeffect(){
if (document.all && photoslider.filters)
photoslider.filters.revealTrans.play()
}

function keeptrack(){
window.status="Image "+(which+1)+" of "+photos.length
}


function backward(){
if (which>0){
which--
applyeffect()
document.images.photoslider.src=photos[which]

document.getElementById('photosdesc').innerHTML = photosdesc[which]

playeffect()
keeptrack()
}
}

function forward(){
if (which<photos.length-1){
which++
applyeffect()
document.images.photoslider.src=photos[which]

document.getElementById('photosdesc').innerHTML = photosdesc[which]

playeffect()
keeptrack()
}
}

function transport(){
window.location=photoslink[which]
}

</script>

</head>
<body>


<table border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="100&#37;" colspan="2" height="22"><center>
<script>
if (linkornot==1)
document.write('<a href="javascript:transport()">')
document.write('<img src="'+photos[0]+'" name="photoslider" style="filter:revealTrans(duration=2,transition=23)" border=0><BR>')
document.write('<div id="photosdesc">'+photosdesc[0]+'</div>')
if (linkornot==1)
document.write('</a>')
</script>
</center></td>
  </tr>
  <tr>
    <td width="50%" height="21"><p align="left"><a href="#" onClick="backward();return false">Previous Slide</a></td>
    <td width="50%" height="21"><p align="right"><a href="#" onClick="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>

Hope this helps, and let me know if you need any more help.

**jaheni1** · 03-09-2007, 09:25 PM

thanks a lot thetestingsite. that worked after i fitted it into my code.

**cwcorl** · 06-07-2007, 09:10 PM

Originally Posted by thetestingsite

Try using the below (tested) code. Edit the parts in red to suit your needs.

Code:

<html>
<head>

<script type="text/javascript">

/***********************************************
* DHTML slideshow script-  &#169; 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
***********************************************/

var photos=new Array()
var photoslink=new Array()
var photosdesc = new Array()

var which=0

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

//define captions for images above.
//If you do not want a caption for an image, simply leave it blank

photosdesc[0] = "This is a test"
photosdesc[1] = ""
photosdesc[2] = "Second Test"

//Specify whether images should be linked or not (1=linked)
var linkornot=0

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

//do NOT edit pass this line

var preloadedimages=new Array()
for (i=0;i<photos.length;i++){
preloadedimages[i]=new Image()
preloadedimages[i].src=photos[i]
}


function applyeffect(){
if (document.all && photoslider.filters){
photoslider.filters.revealTrans.Transition=Math.floor(Math.random()*23)
photoslider.filters.revealTrans.stop()
photoslider.filters.revealTrans.apply()
}
}



function playeffect(){
if (document.all && photoslider.filters)
photoslider.filters.revealTrans.play()
}

function keeptrack(){
window.status="Image "+(which+1)+" of "+photos.length
}


function backward(){
if (which>0){
which--
applyeffect()
document.images.photoslider.src=photos[which]

document.getElementById('photosdesc').innerHTML = photosdesc[which]

playeffect()
keeptrack()
}
}

function forward(){
if (which<photos.length-1){
which++
applyeffect()
document.images.photoslider.src=photos[which]

document.getElementById('photosdesc').innerHTML = photosdesc[which]

playeffect()
keeptrack()
}
}

function transport(){
window.location=photoslink[which]
}

</script>

</head>
<body>


<table border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="100&#37;" colspan="2" height="22"><center>
<script>
if (linkornot==1)
document.write('<a href="javascript:transport()">')
document.write('<img src="'+photos[0]+'" name="photoslider" style="filter:revealTrans(duration=2,transition=23)" border=0><BR>')
document.write('<div id="photosdesc">'+photosdesc[0]+'</div>')
if (linkornot==1)
document.write('</a>')
</script>
</center></td>
  </tr>
  <tr>
    <td width="50%" height="21"><p align="left"><a href="#" onClick="backward();return false">Previous Slide</a></td>
    <td width="50%" height="21"><p align="right"><a href="#" onClick="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>

Hope this helps, and let me know if you need any more help.

Do you have to upload the photo descriptions separately to the website or will they be tagged when you upload the changes to thescript?
cwcorl

**thetestingsite** · 06-07-2007, 09:36 PM

Not quite sure if I understand you 100%, but if you mean the captions for the images then you will have to edit this part of the script:

Code:

//define captions for images above.
//If you do not want a caption for an image, simply leave it blank

photosdesc[0] = "Type Your"
photosdesc[1] = "Messages In"
photosdesc[2] = "This Spot"

Hope this helps.

Thread: slide show photo descriptions

Thread Tools

Search Thread

slide show photo descriptions

thanks a lot thetestingsite

Bookmarks

Bookmarks

Posting Permissions