editing a simple script

**nonz** · 04-23-2008, 10:56 AM

1) Script Title:
FF1+ IE5+ Opr7+
DHTML Slide Show Script

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

3) Describe problem:
ive used this script loads but im wondering is there a way that when you reach the last photo there is no longer a 'next' option??

ps im a beginner!!

**codeexploiter** · 04-23-2008, 11:27 AM

It can be done. You need to change two JS functions in the following manner:

Code:

function backward(){
if (which>0){
which--
if(which != photos.length - 1) document.getElementById('next').style.display = 'inline';
if(which == 0) document.getElementById('prev').style.display = 'none';
applyeffect()
document.images.photoslider.src=photos[which]
playeffect()
keeptrack()
}
}

function forward(){
if (which<photos.length-1){
which++
if(which == photos.length -1)document.getElementById('next').style.display = 'none';
if(which > 0) document.getElementById('prev').style.display = 'inline';
applyeffect()
document.images.photoslider.src=photos[which]
playeffect()
keeptrack()
}
}

After that you need to assign unique IDs to the hyperlinks - Previous Slide and Next Slide in the following manner:

Code:

<tr>
    <td height="21" width="50%"><p align="left"><a href="#" onclick="backward(this);return false" id="prev">Previous Slide</a></p></td>
    <td height="21" width="50%"><p align="right"><a href="#" onclick="forward(this);return false" id="next">Next Slide</a></p></td>
</tr>

If you use any IDs other than 'prev' and 'next' then you have to make the necessary changes in the highlighted area of the JS code.

**Master_script_maker** · 04-23-2008, 11:27 AM

try this. change the value in red to the id of your next link.

Code:

<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]="photo1.jpg"
photos[1]="photo2.jpg"
photos[2]="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]=""

//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()
}
if((which+1)==photos.length-1) {
var nextb=document.getElementById("next");
nextb.style.opacity=0;
nextb.style.filter="alpha(opacity=0)";
nextb.onclick="forward();return false";
}
}

function forward(){
if (which<photos.length-1){
which++
applyeffect()
document.images.photoslider.src=photos[which]
playeffect()
keeptrack()
} 
if(which==photos.length-1) {
var nexta=document.getElementById("next");
nexta.style.opacity=1;
nexta.style.filter="alpha(opacity=100)";
nexta.onclick=false;
} 
}

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

</script>

**codeexploiter** · 04-23-2008, 11:38 AM

I wonder what is the real advantage of removing/resetting the onclick event of the anchor element.

**jscheuer1** · 04-23-2008, 11:44 AM

It is better to use style visibility than display. This will preserve the layout of the page. Also, since we cannot rely cross browser on this effect in the same way that we can with document.images, it is best to test for getElementByID before doing any of these things. Use this version:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/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
***********************************************/

var photos=new Array()
var photoslink=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"

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

if(document.getElementById)
document.write('<style type="text/css">#prev {visibility:hidden;}<\/style>');

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){
if(document.getElementById)
document.getElementById('next').style.visibility='visible';
which--
applyeffect()
document.images.photoslider.src=photos[which]
playeffect()
keeptrack()
}
if(which==0&&document.getElementById)
document.getElementById('prev').style.visibility='hidden';
}

function forward(){
if (which<photos.length-1){
if(document.getElementById)
document.getElementById('prev').style.visibility='visible';
which++
applyeffect()
document.images.photoslider.src=photos[which]
playeffect()
keeptrack()
}
if(which==photos.length-1&&document.getElementById)
document.getElementById('next').style.visibility='hidden';
}

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

</script>
</head>
<body>
<table border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="100%" 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>')
if (linkornot==1)
document.write('</a>')
</script>
</center></td>
  </tr>
  <tr>
    <td width="50%" height="21"><p align="left"><a id="prev" href="#" onClick="backward();return false">Previous Slide</a></td>
    <td width="50%" height="21"><p align="right"><a id="next" 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>

**codeexploiter** · 04-23-2008, 11:48 AM

Yes John it is better to use visibility than display. Was changing the code a bit quicker and haven't thought about the layout distortion.

Thread: editing a simple script

Thread Tools

Search Thread

editing a simple script

Bookmarks

Bookmarks

Posting Permissions