This is a discussion on Slideshow with description within the JavaScript forums, part of the Program Your Site category; This JavaScript slideshow lets the user manually move back and forth between images, by clicking on the provided buttons. An ...
| |||||||
| 120 Online | Register | Projects | Products | Members List | Calendar | Today's Posts | Search |
09-30-2009, 03:09 AM
| |||
| |||
| Slideshow with description
This JavaScript slideshow lets the user manually move back and forth between images, by clicking on the provided buttons. An accompanying textual detail How to setup Step 1: Place JavaScript below in your HEAD section JavaScript Code: <SCRIPT>
//detecting browser to dynamically write appropriate DIVs/LAYERs
N=(navigator.appName.indexOf('Netscape')!=-1&&parseInt(navigator.appVersion)<5)
S=(navigator.appName.indexOf('Netscape')!=-1&&parseInt(navigator.appVersion)>4.9)
M=(navigator.appName.indexOf('Microsoft')!=-1)
Vis=new Array()
Vis[0]=(M||S) ? "hidden" : "hide"
Vis[1]=(M||S) ? "visible" : "show"
function GetDiv(divId,divY,divX,divW,divH,bCol,visb,zInd){
bkCol=(bCol!="")?((N)?" bgColor="+bCol:";background:"+bCol):""
Styl = (M||S) ? "<DIV" : "<LAYER"
if(M||S){
Styl+=" ID="+divId
Styl+=" style='position:absolute;top:"+divY+";left:"+divX+";width:"+divW+";height:"+divH+bkCol
Styl+=";visibility:"+Vis[visb]+";z-index:"+zInd
Styl+="'>"
}
if(N){
Styl+=" ID="+divId
Styl+=" top="+divY+" left="+divX+" width="+divW+" height="+divH+bkCol
Styl+=" visibility="+Vis[visb]+" z-index="+zInd
Styl+=">"
}
document.writeln(Styl)
}
function EndDiv(){
(M||S)? document.writeln("</DIV>"): document.writeln("</LAYER>")
}
function PutIt(ID,dX,dY){
if(N){
document.layers[ID].left=dX
document.layers[ID].top=dY
}
if(M){
document.all[ID].style.left=dX
document.all[ID].style.top=dY
}
if(S){
document.getElementById(ID).style.left=dX
document.getElementById(ID).style.top=dY
}
}
function ShowHide(ID,vs){
if(N){
document.layers[ID].visibility=Vis[vs]
}
if(M){
document.all[ID].style.visibility=Vis[vs]
}
if(S){
document.getElementById(ID).style.visibility=Vis[vs]
}
}
function Xof(ID){
if(N){
return document.layers[ID].left
}
if(M){
return document.all[ID].style.left
}
if(S){
return document.getElementById(ID).style.left
}
}
function Yof(ID){
if(N){
return document.layers[ID].top
}
if(M){
return document.all[ID].style.top
}
if(S){
return document.getElementById(ID).style.top
}
}
function Zind(ID,zz){
if(N){
document.layers[ID].zIndex=zz
}
if(M){
document.all[ID].style.zIndex=zz
}
if(S){
document.getElementById(ID).style.zIndex=zz
}
}
function ChangeCol(ID,colrx){
if(M)document.all[ID].style.background=colrx
if(N)document.layers[ID].bgColor=colrx
if(S)document.getElementById(ID).style.background=colrx
}
function DivWrite(IdName,Str) {
if (N){
document.layers[IdName].document.write(Str)
document.layers[IdName].document.close()
}
if(M) document.all[IdName].innerHTML=Str
if(S) document.getElementById(IdName).innerHTML=Str
}
</SCRIPT>
<SCRIPT>
n=0
function Play(dir){
//document.Spkr.src="overhead2.jpg"
ShowHide("Slide"+n,0)
dirX=dir
setTimeout('ShowIt(dirX)',500)
}
function ShowIt(dirD){
n+=dirD
if(n>Imgs.length-1)n=0
if(n<0)n=Imgs.length-1
ShowHide("Slide"+n,1)
//document.Spkr.src="overhead1.jpg"
}
GetDiv("Intro",100,120,250,200,'navy',1,1)
document.write("<center><hr><b>Slide Show by<br></b>")
document.write("<p>Please wait...<p>Slides are being loaded...<hr></center>")
EndDiv()
Imgs=new Array("logojs.jpg","photo1.jpg","photo2.jpg","photo3.jpg","photo4.jpg")
Nars=new Array("Who is this?","Ancient medicine...","The flying doctor...","The children doctor...","The injection doctor...")
for(x=0;x<Imgs.length;x++){
GetDiv("Slide"+x,100,120,250,200,'navy',0,2)
document.write("<center><hr><b>Slide ",x+1,"</b><hr><img src=",Imgs[x],"><br>",Nars[x],"</center>")
EndDiv()
}
GetDiv("Button",330,10,450,100,'',0,2)
document.write("<center><form name=Clicker><p>")
document.write("<input type=button value='<<' onclick='Play(-1)'> ")
document.write("<input type=button value='>>' onclick='Play(1)'>")
document.write("</form></center>")
EndDiv()
function Init(){
ShowHide("Intro",0)
ShowHide("Button",1)
ShowHide("Slide0",1)
}
</SCRIPT>
<!--
This script downloaded from www.JavaScriptBank.com
Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
-->
HTML Code: <BODY onload="setTimeout('Init()',2000)">
</BODY>
<!--
This script downloaded from www.JavaScriptBank.com
Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
-->
 |
 |
| |
Linear Mode
