PDA

View Full Version : Attempting to modify "DHTML Slide Show Script"



madtag
01-30-2005, 03:59 PM
Script: DHTML Slide Show Script
URL: http://www.dynamicdrive.com/dynamicindex14/dhtmlslide.htm

Hi all,

First of all if what I'm trying to do is actually against some rule, please let me know and I'll stop at once.

I like this script but need a function to load any image from the array instead of just the next or the previous one.

I have a basic knowledge of Java Scripting and tried to modify the code myself but obviously my knowledge is not good enough. Now not even the first image is loading and the links are not working. Any help is much appreciated.

Regards,
Mark A. Tagliaferro

I added the code in bold to the head section:

<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 which=0

//define images. You can have as many as you want:
photos[0]="../../graphics/gig1/gig1_01.jpg"
photos[1]="../../graphics/gig1/gig1_02.jpg"
photos[2]="../../graphics/gig1/gig1_03.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]=""

//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]
playeffect()
keeptrack()
}
}

function chooser(var i){
which = i
applyeffect()
document.images.photoslider.src=photos[which]
playeffect()
keeptrack()
}


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

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

</script>

In the body section i changed the parts in bold to this:

<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" colspan="3" 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>')
if (linkornot==1)
document.write('</a>')
</script>
</center></td>
</tr>
<tr>
<td width="33%" height="21"><a href="#" onClick="chooser(0);return false">Slide 1</a></td>
<td width="33%" height="21"><a href="#" onClick="chooser(1);return false">Slide 2</a></td>
<td width="33%" height="21"><a href="#" onClick="chooser(2);return false">Slide 3</a></td>
</tr>
</table>

ddadmin
02-01-2005, 12:16 AM
Hmm this would be a customization request. It's perectly valid, though you'll need to wait until someone has a little extra time to hopefully help you. :)

madtag
02-04-2005, 10:06 AM
Well I managed to find the error in the code. The var in the parameter is incorrect. Otherwise it's perfect!

This goes in the head content:

/***********************************************
* 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 which=0

//define images. You can have as many as you want:
photos[0]="../../graphics/gig1/gig1_01.jpg"
photos[1]="../../graphics/gig1/gig1_02.jpg"
photos[2]="../../graphics/gig1/gig1_03.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]=""

//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]
playeffect()
keeptrack()
}
}

function chooser(i){
which = i
applyeffect()
document.images.photoslider.src=photos[which]
playeffect()
keeptrack()
}


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

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

</script>

and this goes in the body:

<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" colspan="3" 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>')
if (linkornot==1)
document.write('</a>')
</script>
</center></td>
</tr>
<tr>
<td width="33%" height="21"><a href="#" onClick="chooser(0);return false">Slide 1</a></td>
<td width="33%" height="21"><a href="#" onClick="chooser(1);return false">Slide 2</a></td>
<td width="33%" height="21"><a href="#" onClick="chooser(2);return false">Slide 3</a></td>
</tr>

</table>