View Single Post
  #2 (permalink)  
Old March 15th, 2005, 09:58 AM
vinod_yadav1919 vinod_yadav1919 is offline
Friend of Wrox
 
Join Date: Oct 2004
Location: delhi, delhi, India.
Posts: 553
Thanks: 0
Thanked 1 Time in 1 Post
Send a message via MSN to vinod_yadav1919 Send a message via Yahoo to vinod_yadav1919
Default

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=" &laquo;&laquo; " onclick="ShowImage(this)">
 <input type=button id=previous value=" &laquo; " onclick="ShowImage(this)">
 <input type=button id=next value=" &raquo; " onclick="ShowImage(this)">
 <input type=button id=last value=" &raquo;&raquo; " 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
Reply With Quote