PDA

View Full Version : 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/dynamicindex14/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/dynamicindex14/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.



<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
Try using the below (tested) code. Edit the parts in red to suit your needs.



<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&#37;, but if you mean the captions for the images then you will have to edit this part of the script:



//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.