Log in

View Full Version : DHTML Slide Show Script - Help with Captions


Rosencrantz
06-24-2005, 09:40 PM
I have modified the DHTML Slide Show Script (http://www.dynamicdrive.com/dynamicindex14/dhtmlslide.htm) to improve the functionality a bit by including a few additional elements.

For example, I was confused by the "Previous Slide" / "Next Slide" links staying the same, regardless of whether or not there WAS a previous or next slide to view. To fix this, I am using images as my navigation elements. Now, when you're at the start or end of the image array, you'll see a different (faded) navigation image.

The issue that I am having trouble with is dynamic CAPTIONS. My JavaScript isn't great, but I figured out how to switch out text dynamically, but only as button values. Can someone make suggestions about how best to make this happen with real text on the page? Maybe with a DIV or SPAN?

See an example here: http://www.symptek.com/slideshow.html

Any suggestions will be appreciated.

Thanks.

R

Here's the code:


<html>
<head>
<title>DHTML Slide Show Script - with improvements</title>
<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
***********************************************/

var photos=new Array()
var photoslink=new Array()
var caption=new Array()
var which=0

var lft_img_on="http://www.symptek.com/dhtml/left_arrow_on.gif"
var lft_img_off="http://www.symptek.com/dhtml/left_arrow_off.gif"
var rt_img_on="http://www.symptek.com/dhtml/right_arrow_on.gif"
var rt_img_off="http://www.symptek.com/dhtml/right_arrow_off.gif"

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

//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]=""

//Specify whether images should have captions or not (1=captions)
var captions=1

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

//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 applyrighteffect(){
if (document.all && photoslider.filters){
photoslider.filters.revealTrans.Transition=7
photoslider.filters.revealTrans.stop()
photoslider.filters.revealTrans.apply()
}
}

function changecaption() {
document.exf1.caption.value = caption[which];
}


function applylefteffect(){
if (document.all && photoslider.filters){
photoslider.filters.revealTrans.Transition=6
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==1){
which--
applylefteffect()
document.images.photoslider.src=photos[which]
document.images.lft_img.src=lft_img_off
document.images.rt_img.src=rt_img_on
playeffect()
keeptrack()
changecaption()
} else if (which>0) {
which--
applylefteffect()
document.images.photoslider.src=photos[which]
document.images.lft_img.src=lft_img_on
document.images.rt_img.src=rt_img_on
playeffect()
keeptrack()
changecaption()
} else {
document.images.lft_img.src=lft_img_off
}
}

function forward(){
if (which+1==photos.length-1){
which++
applyrighteffect()
document.images.photoslider.src=photos[which]
document.images.rt_img.src=rt_img_off
document.images.lft_img.src=lft_img_on
playeffect()
keeptrack()
changecaption()
} else if (which<photos.length-1) {
which++
applyrighteffect()
document.images.photoslider.src=photos[which]
document.images.rt_img.src=rt_img_on
document.images.lft_img.src=lft_img_on
playeffect()
keeptrack()
changecaption()
} else {
document.images.rt_img.src=rt_img_off
}
}

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

</script>
</head>

<body>
<table width="100%" height="100%">
<tr>
<td align="center">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td colspan="2"><script>
if (linkornot==1)
document.write('<a href="javascript:transport()">')
document.write('<img src="'+photos[0]+'" name="photoslider" style="filter:revealTrans(duration=1,transition=23)" border=0>')
if (linkornot==1)
document.write('</a>')
</script></td>
</tr>
<script>
if (captions==1)
document.write('<tr><td colspan="2" align="center"><form name=exf1><input type=button name=caption value="'+caption[0]+'"></td></tr>')
</script>
<tr>
<td><a href="#" onClick="backward(); return false"><img name="lft_img" src="http://www.symptek.com/dhtml/left_arrow_off.gif" width="25" height="25" alt="" border="0"></a></td>
<td align="right"><a href="#" onClick="forward(); return false"><img name="rt_img" src="http://www.symptek.com/dhtml/right_arrow_on.gif" width="25" height="25" alt="" border="0"></a></td>
</tr>
</table>
</td>
</tr>
</table>
</form>
</body>
</html>
jscheuer1
06-24-2005, 10:44 PM
You can access an elements text using it's innerHTML property, ex:
document.getElementById('caption').innerHTML='Text to Display'will insert the text in:
<div id="caption"></div>
Rosencrantz
06-27-2005, 02:27 AM
Thanks, John. I'm on it!
Rosencrantz
06-27-2005, 04:47 PM
Thanks again to John for direction on this.

The code below has been modified to switch out captions.

In addition, it uses graphical navigation elements which change if there's no "Next" or "Previous" to view.

Also, I've limited the IE animation to a left swipe and right swipe, depending on whether you're moving forward or backwards through the image list.

Working version can be previewed here: http://www.symptek.com/slideshow.html

PLEASE NOTE: I'm not sure what these changes will do to accessibility across different browsers. If you see problems, please post them.


<html>
<head>
<title>DHTML Slide Show Script - with improvements</title>
<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
***********************************************/

var photos=new Array()
var photoslink=new Array()
var caption=new Array()
var which=0

var lft_img_on="http://www.symptek.com/dhtml/left_arrow_on.gif"
var lft_img_off="http://www.symptek.com/dhtml/left_arrow_off.gif"
var rt_img_on="http://www.symptek.com/dhtml/right_arrow_on.gif"
var rt_img_off="http://www.symptek.com/dhtml/right_arrow_off.gif"

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

//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]=""

//Specify whether images should have captions or not (1=captions)
var captions=1

//Set corresponding captions for above images. Define ONLY if variable captions equals "1"
caption[0]="Image 1"
caption[1]="Image 2"
caption[2]="Image 3"

//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 applyrighteffect(){
if (document.all && photoslider.filters){
photoslider.filters.revealTrans.Transition=7
photoslider.filters.revealTrans.stop()
photoslider.filters.revealTrans.apply()
}
}

function changecaption() {
document.getElementById('caption').innerHTML=caption[which]
}


function applylefteffect(){
if (document.all && photoslider.filters){
photoslider.filters.revealTrans.Transition=6
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==1){
which--
applylefteffect()
document.images.photoslider.src=photos[which]
document.images.lft_img.src=lft_img_off
document.images.rt_img.src=rt_img_on
playeffect()
keeptrack()
changecaption()
} else if (which>0) {
which--
applylefteffect()
document.images.photoslider.src=photos[which]
document.images.lft_img.src=lft_img_on
document.images.rt_img.src=rt_img_on
playeffect()
keeptrack()
changecaption()
} else {
document.images.lft_img.src=lft_img_off
}
}

function forward(){
if (which+1==photos.length-1){
which++
applyrighteffect()
document.images.photoslider.src=photos[which]
document.images.rt_img.src=rt_img_off
document.images.lft_img.src=lft_img_on
playeffect()
keeptrack()
changecaption()
} else if (which<photos.length-1) {
which++
applyrighteffect()
document.images.photoslider.src=photos[which]
document.images.rt_img.src=rt_img_on
document.images.lft_img.src=lft_img_on
playeffect()
keeptrack()
changecaption()
} else {
document.images.rt_img.src=rt_img_off
}
}

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

</script>
</head>

<body>
<table width="100%" height="100%">
<tr>
<td align="center">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td colspan="2"><script>
if (linkornot==1)
document.write('<a href="javascript:transport()">')
document.write('<img src="'+photos[0]+'" name="photoslider" style="filter:revealTrans(duration=1,transition=23)" border=0>')
if (linkornot==1)
document.write('</a>')
</script></td>
</tr>
<script>
if (captions==1)
document.write('<tr><td colspan="2" align="center"><div id="caption">'+caption[0]+'</div></td></tr>')
</script>
<tr>
<td><a href="#" onClick="backward(); return false"><img name="lft_img" src="http://www.symptek.com/dhtml/left_arrow_off.gif" width="25" height="25" alt="" border="0"></a></td>
<td align="right"><a href="#" onClick="forward(); return false"><img name="rt_img" src="http://www.symptek.com/dhtml/right_arrow_on.gif" width="25" height="25" alt="" border="0"></a></td>
</tr>
</table>
</td>
</tr>
</table>
</form>
</body>
</html>
Note: Edits were a few minor changes to notes and image URLs in the code above.
jscheuer1
06-27-2005, 05:34 PM
Looks fine in Firefox as well, no wipe though (that's an IE only effect). Nice work!
mtviens
03-06-2007, 10:31 PM
1st x on a forum and I realize that this is an old thread but I'm working on a site and found the code below to be really close to what I'm looking for. I was able to work with it a bit to get:
http://www.fiveleft.ca/dynamic/

But what I want to do is have the navigation controlled by a menu rather than the "forward" "backward" function. Below is the template I have setup. There will eventually be 15 images and respective captions. In the bottom right, the 2nd "print" row of numbers are linked to mock pages to give an example of what should happen.

I had earlier found and experimented with another code: http://www.fiveleft.ca/test.html which was controlled by a basic menu so I believe it may be a combination of the 2.

I'm not yet a Javascriptor though I've been able to reverse-engineer some stuff. I'd be willing to pay a reasonable $ to get this working if that's what it takes.
http://www.fiveleft.ca/design-b1.php

I appreciate any time/assistance/direction you might offer.