p2p.wrox.com Forums

p2p.wrox.com Forums (http://p2p.wrox.com/index.php)
-   Javascript How-To (http://p2p.wrox.com/forumdisplay.php?f=87)
-   -   Slide Show #1 (New User) (http://p2p.wrox.com/showthread.php?t=26827)

WebDevel March 14th, 2005 01:30 PM

Slide Show #1 (New User)
 
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=" &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


All times are GMT -4. The time now is 08:35 PM.

Powered by vBulletin®
Copyright ©2000 - 2019, Jelsoft Enterprises Ltd.
© 2013 John Wiley & Sons, Inc.