Slide Show #1 (New User)

WebDevel · March 14th, 2005, 01:30 PM

I have a simple photo slide show (rudimentary, but it works).

By pressing "next" & "previous" links on the page, the visitor can move from photo to photo.

I store the photos in an array (called myPix).

Above each slide, I would like the text: Slide 'n' of 'N' (where n = the number of the slide, i.e., its index number + 1; and N = the number of sides in the show, i.e., myPic.length).

Below each slide, I would like to display the name of the slide (for now, the file name of the photo in the array would be good enough).

Can anyone help me get started on this?

TYA.

vinod_yadav1919 · March 15th, 2005, 09:58 AM

Hii WebDevel!!
Try this
Just replace the image array imgArray=new Array("img1.gif","img2.gif","img1.gif","img2.gif", "img1.gif","img2.gif")
to whatever you want

<body onload="setImage(1)">

<input type=button id=first value=" «« " onclick="ShowImage(this)">
<input type=button id=previous value=" « " onclick="ShowImage(this)">
<input type=button id=next value=" » " onclick="ShowImage(this)">
<input type=button id=last value=" »» " onclick="ShowImage(this)"><br>
  <span id="startindex"> </span>Out of <span id="endindex"> </span>Records
<br>

<image id="imageid" src="" border=0 >

</body>
<script>
imgArray=new Array("img1.gif","img2.gif","img1.gif","img2.gif", "img1.gif","img2.gif")
counter=1 //always shows first image from the array
function ShowImage(obj)
{
whichbtn=obj.id
local_index=1;
if(whichbtn=="first")
{
local_index=1;
counter=1;
}

else if(whichbtn=="next")
{
local_index=counter+1;
counter++;
}
else if(whichbtn=="previous")
{

local_index=counter-1;
counter--;
}
else if(whichbtn=="last")
{
local_index=imgArray.length;
counter=imgArray.length;
}
setImage(local_index)

}

function setImage(indexval)
{
document.getElementById("imageid").src=imgArray[indexval-1];
setButtons(indexval,imgArray.length);
setText(indexval,imgArray.length);
}
function setText(x,y)
{
document.getElementById("startindex").innerHTML=x
document.getElementById("endindex").innerHTML=imgA rray.length
}
function setButtons(curr_counterx,totalimg)
{

if(curr_counterx==totalimg)
{

  document.getElementById("last").disabled=true;
  document.getElementById("next").disabled=true;
  document.getElementById("previous").disabled=false ;
  document.getElementById("first").disabled=false;
}

if(curr_counterx<totalimg && curr_counterx>1)
{

  document.getElementById("last").disabled=false;
  document.getElementById("next").disabled=false;
  document.getElementById("first").disabled=false;
  document.getElementById("previous").disabled=false ;
}

if(curr_counterx==1 && curr_counterx<totalimg)
{

  document.getElementById("first").disabled=true;
  document.getElementById("previous").disabled=true;
  document.getElementById("last").disabled=false;
  document.getElementById("next").disabled=false;

}

}
</script>
Hope this will help you

Cheers :)

vinod