slideshow script

**Rosalie** · 07-09-2011, 10:10 AM

Hello,

I am looking for a slideshow script which has forward and backward buttons but where the backward button appears or can be used only if you once pressed forward.

So, it is not possible to go backward on the first image.

Thanks in advance

**jscheuer1** · 07-09-2011, 03:09 PM

There are many scripts that can do that sort of thing. One here at Dynamic Drive is the Step Carousel Viewer:

http://www.dynamicdrive.com/dynamici...epcarousel.htm

**Rosalie** · 07-12-2011, 08:52 AM

Originally Posted by jscheuer1

There are many scripts that can do that sort of thing. One here at Dynamic Drive is the Step Carousel Viewer:

http://www.dynamicdrive.com/dynamici...epcarousel.htm

Thank you John!

**Rosalie** · 07-19-2011, 02:01 PM

I have a question left for John, or anyone who is able to answer

I'm currently working on this imageslider, and I am wondering whether it can also be implemented in this slider that you can only click on the backward button when you already have clicked the forward button once. Currently, namely you can also start with going backward.

Thanks in advance for the solutions and help,
Rosalie

**jscheuer1** · 07-19-2011, 02:07 PM

That's vwphillips work. He's a member here, you can PM or email him from his profile page.

**Rosalie** · 07-19-2011, 07:19 PM

Originally Posted by jscheuer1

That's vwphillips work. He's a member here, you can PM or email him from his profile page.

I'm sorry I mixed you up. I will contact him. Thanks

**vwphillips** · 07-21-2011, 02:02 PM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Some Site | Your Account </title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link rel="shortcut icon" type="image/x-icon" href="favicon2.ico" />
<link rel="stylesheet" type="text/css" media="screen" href="navbar.css" />
<link rel="stylesheet" type="text/css" media="screen" href="navbar2.css" />
<style type="text/css">
<!--
#wrapper {
width: 950px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
font-family: Arial, Helvetica, sans-serif;
font-size: 9pt;
color: #424851;
}
.background {
	height: 662px;
	width: 950px;
	background-color: #2C2E37;
}
.navigation {
	height: 475px;
	width: 188px;
	background-color: #000;
}

#navigation {
	position:absolute;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}

/*<![CDATA[*/

.tstparent {
  position:relative;left:25px;top:20px;width:900px;height:622px;
}

.tstparent IMG {
  position:absolute;left:1px;top:311px;z-index:101;cursor:pointer;

}

#tst {
  position:relative;left:0px;top:0px;width:900px;height:622px;
}

#tst IMG{
  position:absolute;left:0px;top:50px;width:900px;height:622px;border-Width:0px;
}
/*]]>*/

-->
</style>

<script type="text/javascript">
// Animate (11-January-2010)
// by Vic Phillips http://www.vicsjavascripts.org.uk

// To progressively change the Left, Top, Width, Height or Opacity of an element over a specified period of time.
// With the ability to scale the effect time on specified minimum/maximum values
// and with three types of progression 'sin' and 'cos' and liner.



// **** Functional Code(1.52K) - NO NEED to Change

function zxcAnimate(mde,obj,srt){
 this.to=null;
 this.obj=typeof(obj)=='object'?obj:document.getElementById(obj);
 this.mde=mde.replace(/\W/g,'');
 this.data=[srt||0];
 return this;
}

zxcAnimate.prototype={

 animate:function(srt,fin,ms,scale,c){
  clearTimeout(this.to);
  this.time=ms||this.time||0;
  this.neg=srt<0||fin<0;
  this.data=[srt,srt,fin];
  this.mS=this.time*(!scale?1:Math.abs((fin-srt)/(scale[1]-scale[0])));
  this.c=typeof(c)=='string'?c.charAt(0).toLowerCase():this.c?this.c:'';
  this.inc=Math.PI/(2*this.mS);
  this.srttime=new Date().getTime();
  this.cng();
 },

 cng:function(){
  var oop=this,ms=new Date().getTime()-this.srttime;
  this.data[0]=Math.floor(this.c=='s'?(this.data[2]-this.data[1])*Math.sin(this.inc*ms)+this.data[1]:this.c=='c'?this.data[2]-(this.data[2]-this.data[1])*Math.cos(this.inc*ms):(this.data[2]-this.data[1])/this.mS*ms+this.data[1]);
  this.apply();
  if (ms<this.mS) this.to=setTimeout(function(){oop.cng()},10);
  else {
   this.data[0]=this.data[2];
   this.apply();
   if (this.Complete) this.Complete(this);
  }
 },

 apply:function(){
  if (isFinite(this.data[0])){
   if (this.data[0]<0&&!this.neg) this.data[0]=0;
   if (this.mde!='opacity') this.obj.style[this.mde]=this.data[0]+'px';
   else zxcOpacity(this.obj,this.data[0]);
  }
 }

}

function zxcOpacity(obj,opc){
 if (opc<0||opc>100) return;
 obj.style.filter='alpha(opacity='+opc+')';
 obj.style.opacity=obj.style.MozOpacity=obj.style.WebkitOpacity=obj.style.KhtmlOpacity=opc/100-.001;
}


</script>

</head>

<body>
<div id="wrapper"><a title="some site" href=""><img alt="some site" src="logo.png" /></a>
<div id="navBarContainer">
<ul id="navBar">
<li id="navBarListings"><a href="#">Listings</a> </li>

<li id="navBarSearch"><a href="#">Search</a> </li>
<li id="navBarSellyourpiece"><a href="#">Sell your piece</a> </li>
<li id="navBarOpenyourownshop"><a href="#">Open your own shop</a> </li>

<li id="navBarYouraccount"><a href="#">Your account </a></li><li id="navBarThemoodboard"><a href="#">The moodboard</a> </li></ul><div class="background">

 <div class="tstparent" >
  <div id="tst" >
   <img src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" alt="img"  usemap="#tstmap"/>
  </div>
 <img id="back" src="backbutton.png"  alt="next"  style="left:0px;" onmouseup="M1.Next(1);" /><img id="next" src="forwardbutton.png" alt="previous" style="left:864px;" onmouseup="M1.Next(-1);" /></div>


 <map id="map1" name="tstmap">
 </map>

http://www.dynamicdrive.com/forums/showthread.php?t=63296

<script type="text/javascript">
/*<![CDATA[*/
// Image Map Slide Show  (10-April-2011) DRAFT
// by Vic Phillips - http://www.vicsjavascripts.org.uk/

function zxcMapSlideShow(o){
 var oop=this,obj=document.getElementById(o.SlideShowID),map=document.getElementById(o.ImageMapID),mapimg=obj.getElementsByTagName('IMG')[0],iary=o.ImageArray,z0=0,z0a,img,ary=[],ms=o.SlideSpeed,but;
 obj.style.overflow='hidden';
 mapimg.style.zIndex='10';
 for (;z0<iary.length;z0++){
  img=document.createElement('IMG');
  img.src=iary[z0][0];
  img.style.position='absolute';
  img.style.zIndex=z0>0?'0':'1';
  img.style.left='0px';
  img.style.top='0px';
  img.style.width='100%';
  img.style.height='100%';
  obj.appendChild(img);
  ary[z0]=[new zxcAnimate('left',img),[]];
  for (z0a=0;z0a<iary[z0][1].length;z0a++){
   ary[z0][1].push(iary[z0][1][z0a]);;
  }
 }
 this.sz=obj.offsetWidth+5;
 this.ary=ary;
 this.pre=ary[0];
 this.lst=ary[0];
 this.cnt=0;
 this.ms=typeof(ms)=='number'?ms:1000;
 this.map=map;
 this.area(0);
 but=document.getElementById(o.NextButton);
 if (but){
  this.next=but;
 }
 but=document.getElementById(o.BackButton);
 if (but){
  this.back=but;
  but.style.visibility='hidden';
 }
}

zxcMapSlideShow.prototype={

 Next:function(ud){
  var ary=this.ary,cnt=this.cnt+(typeof(ud)=='number'&&ud<0?-1:1),lgth=ary.length-1
  cnt=cnt<0?lgth:cnt>lgth?0:cnt;
  if (this.back&&cnt>0){
   this.back.style.visibility='visible';

  }
  this.pre[0].obj.style.zIndex='0';
  this.lst[0].obj.style.zIndex='1';
  this.pre=this.lst;
  ary[cnt][0].obj.style.zIndex='2';
  ary[cnt][0].animate(this.sz*-ud,0,this.ms,[0,this.sz]);
  this.lst=ary[cnt];
  this.cnt=cnt;
  this.area(cnt);
 },

 area:function(nu){
  var ary=this.ary[nu],map=this.map,z0=0,area,lgth;
  while (map.firstChild){
   map.removeChild(map.firstChild);
  }
  for (;z0<ary[1].length;z0++){
   area=document.createElement('AREA');
   lgth=ary[1][z0][0].length;
   area.shape=lgth==3?'circle':lgth==4?'rect':'poly';
   area.coords=ary[1][z0][0];
   if (ary[1][z0][1]){
    area.href=ary[1][z0][1];
   }
   if (ary[1][z0][2]){
    area.alt=ary[1][z0][2];
   }
   map.appendChild(area);
  }
 }

}

M1=new zxcMapSlideShow({
 SlideShowID:'tst', // the unique ID name of the slide show parent node.           (string)
 ImageMapID:'map1', // the unique ID name of the image MAP.                        (string)
 ImageArray:[       // an array defining the slide show images and image map data. (array)
  // field 0 = the image src.                                   (string)
  // field 1 = an array of arrays defining the image map data.  (array)
  //    field 0 = the image map area coordinates.         (array)
  //    field 1 = the image map area link href.           (string)
  //    field 2 = the image map area alt attribute value. (string)
  ['http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg',[[[122,82,25],'#','area1'],[[187,126,24],'#','area2'],[[48,62,20],'#','area3']]],
  ['http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg',[[[241,195,21],'#','area4'],[[85,86,131,120],'#','area5']]],
  ['http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg',[[[241,195,21],'#','area6'],[[85,86,131,120],'#','area7']]]
 ],
 NextButton:'next',
 BackButton:'back',
 SlideSpeed:500     //(optional) the animation speed in milli seconds.             (number, default = 1000)
});


/*]]>*/
</script>

</div>
<div id="navBarContainer2">
  <ul id="navBar2">
    <li id="navBarContactus"><a href="#">Contact us</a> </li>

    <li id="navBarAboutus"><a href="#">About us</a> </li>
    <li id="navBarHelp"><a href="#">Help</a> </li>
    <li id="navBarFAQ"><a href="#">FAQ</a> </li>
    <li id="navBarTC"><a href="#">Terms and Conditions </a></li>
    <li id="navBarAuthenticity"><a href="#">Authenticity</a> </li>

  <li id="navBarFeedback"><a href="#">Feedback</a>  </li></ul><div id="email"> <form id="email" method="post" name="email" action="email.php"><div class="copyrightdiv">Copyright   ©   2011   some site.   All   rights reserved.  </div>
  </form>
  </div></div></div></div>
</body>
</html>

**Rosalie** · 07-23-2011, 06:48 PM

Thank you for your help vwphillips! I very much appreciate it!

However, I do have a question left. Namely, What I actually would love is that both the backward and forward button are visible, but that the backward button only works when you already have clicked the forward button once.

Currently, the backward button is not visible but once you clicked forward you are able to continue to click backward and thus go further than should be possible.

I hope you understand what I mean

**Rosalie** · 07-27-2011, 06:03 PM

Originally Posted by Rosalie

What I actually would love is that both the backward and forward button are visible, but that the backward button only works when you already have clicked the forward button once.

Currently, the backward button is not visible but once you clicked forward you are able to continue to click backward and thus go further than should be possible.

Does anyone knows?

**vwphillips** · 07-28-2011, 06:59 AM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Some Site | Your Account </title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link rel="shortcut icon" type="image/x-icon" href="favicon2.ico" />
<link rel="stylesheet" type="text/css" media="screen" href="navbar.css" />
<link rel="stylesheet" type="text/css" media="screen" href="navbar2.css" />
<style type="text/css">
<!--
#wrapper {
width: 950px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
font-family: Arial, Helvetica, sans-serif;
font-size: 9pt;
color: #424851;
}
.background {
	height: 662px;
	width: 950px;
	background-color: #2C2E37;
}
.navigation {
	height: 475px;
	width: 188px;
	background-color: #000;
}

#navigation {
	position:absolute;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}

/*<![CDATA[*/

.tstparent {
  position:relative;left:25px;top:20px;width:900px;height:622px;
}

.tstparent IMG {
  position:absolute;left:1px;top:311px;z-index:101;cursor:pointer;

}

#tst {
  position:relative;left:0px;top:0px;width:900px;height:622px;
}

#tst IMG{
  position:absolute;left:0px;top:50px;width:900px;height:622px;border-Width:0px;
}
/*]]>*/

-->
</style>

<script type="text/javascript">
// Animate (11-January-2010)
// by Vic Phillips http://www.vicsjavascripts.org.uk

// To progressively change the Left, Top, Width, Height or Opacity of an element over a specified period of time.
// With the ability to scale the effect time on specified minimum/maximum values
// and with three types of progression 'sin' and 'cos' and liner.



// **** Functional Code(1.52K) - NO NEED to Change

function zxcAnimate(mde,obj,srt){
 this.to=null;
 this.obj=typeof(obj)=='object'?obj:document.getElementById(obj);
 this.mde=mde.replace(/\W/g,'');
 this.data=[srt||0];
 return this;
}

zxcAnimate.prototype={

 animate:function(srt,fin,ms,scale,c){
  clearTimeout(this.to);
  this.time=ms||this.time||0;
  this.neg=srt<0||fin<0;
  this.data=[srt,srt,fin];
  this.mS=this.time*(!scale?1:Math.abs((fin-srt)/(scale[1]-scale[0])));
  this.c=typeof(c)=='string'?c.charAt(0).toLowerCase():this.c?this.c:'';
  this.inc=Math.PI/(2*this.mS);
  this.srttime=new Date().getTime();
  this.cng();
 },

 cng:function(){
  var oop=this,ms=new Date().getTime()-this.srttime;
  this.data[0]=Math.floor(this.c=='s'?(this.data[2]-this.data[1])*Math.sin(this.inc*ms)+this.data[1]:this.c=='c'?this.data[2]-(this.data[2]-this.data[1])*Math.cos(this.inc*ms):(this.data[2]-this.data[1])/this.mS*ms+this.data[1]);
  this.apply();
  if (ms<this.mS) this.to=setTimeout(function(){oop.cng()},10);
  else {
   this.data[0]=this.data[2];
   this.apply();
   if (this.Complete) this.Complete(this);
  }
 },

 apply:function(){
  if (isFinite(this.data[0])){
   if (this.data[0]<0&&!this.neg) this.data[0]=0;
   if (this.mde!='opacity') this.obj.style[this.mde]=this.data[0]+'px';
   else zxcOpacity(this.obj,this.data[0]);
  }
 }

}

function zxcOpacity(obj,opc){
 if (opc<0||opc>100) return;
 obj.style.filter='alpha(opacity='+opc+')';
 obj.style.opacity=obj.style.MozOpacity=obj.style.WebkitOpacity=obj.style.KhtmlOpacity=opc/100-.001;
}


</script>

</head>

<body>
<div id="wrapper"><a title="Some Site" href=""><img alt="Some Site" src="logo.png" /></a>
<div id="navBarContainer">
<ul id="navBar">
<li id="navBarListings"><a href="#">Listings</a> </li>

<li id="navBarSearch"><a href="#">Search</a> </li>
<li id="navBarSellyourpiece"><a href="#">Sell your piece</a> </li>
<li id="navBarOpenyourownshop"><a href="#">Open your own shop</a> </li>

<li id="navBarYouraccount"><a href="#">Your account </a></li><li id="navBarThemoodboard"><a href="#">The moodboard</a> </li></ul><div class="background">

 <div class="tstparent" >
  <div id="tst" >
   <img src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" alt="img"  usemap="#tstmap"/>
  </div>
 <img  src="backbutton.png"  alt="next"  style="left:0px;" onmouseup="M1.Next(1);" /><img  src="forwardbutton.png" alt="previous" style="left:864px;" onmouseup="M1.Next(-1);" /></div>


 <map id="map1" name="tstmap">
 </map>

http://www.dynamicdrive.com/forums/showthread.php?t=63296

<script type="text/javascript">
/*<![CDATA[*/
// Image Map Slide Show  (10-April-2011) DRAFT
// by Vic Phillips - http://www.vicsjavascripts.org.uk/

function zxcMapSlideShow(o){
 var oop=this,obj=document.getElementById(o.SlideShowID),map=document.getElementById(o.ImageMapID),mapimg=obj.getElementsByTagName('IMG')[0],iary=o.ImageArray,z0=0,z0a,img,ary=[],ms=o.SlideSpeed;
 obj.style.overflow='hidden';
 mapimg.style.zIndex='10';
 for (;z0<iary.length;z0++){
  img=document.createElement('IMG');
  img.src=iary[z0][0];
  img.style.position='absolute';
  img.style.zIndex=z0>0?'0':'1';
  img.style.left='0px';
  img.style.top='0px';
  img.style.width='100%';
  img.style.height='100%';
  obj.appendChild(img);
  ary[z0]=[new zxcAnimate('left',img),[]];
  for (z0a=0;z0a<iary[z0][1].length;z0a++){
   ary[z0][1].push(iary[z0][1][z0a]);;
  }
 }
 this.sz=obj.offsetWidth+5;
 this.ary=ary;
 this.pre=ary[0];
 this.lst=ary[0];
 this.cnt=0;
 this.ms=typeof(ms)=='number'?ms:1000;
 this.map=map;
 this.area(0);
 this.back=false;
}

zxcMapSlideShow.prototype={

 Next:function(ud){
  var ary=this.ary,cnt=this.cnt+(typeof(ud)=='number'&&ud<0?-1:1),lgth=ary.length-1
  if (this.back||cnt>0){
   cnt=cnt<0?lgth:cnt>lgth?0:cnt;
   this.back=true;
   this.pre[0].obj.style.zIndex='0';
   this.lst[0].obj.style.zIndex='1';
   this.pre=this.lst;
   ary[cnt][0].obj.style.zIndex='2';
   ary[cnt][0].animate(this.sz*-ud,0,this.ms,[0,this.sz]);
   this.lst=ary[cnt];
   this.cnt=cnt;
   this.area(cnt);
  }
 },

 area:function(nu){
  var ary=this.ary[nu],map=this.map,z0=0,area,lgth;
  while (map.firstChild){
   map.removeChild(map.firstChild);
  }
  for (;z0<ary[1].length;z0++){
   area=document.createElement('AREA');
   lgth=ary[1][z0][0].length;
   area.shape=lgth==3?'circle':lgth==4?'rect':'poly';
   area.coords=ary[1][z0][0];
   if (ary[1][z0][1]){
    area.href=ary[1][z0][1];
   }
   if (ary[1][z0][2]){
    area.alt=ary[1][z0][2];
   }
   map.appendChild(area);
  }
 }

}

M1=new zxcMapSlideShow({
 SlideShowID:'tst', // the unique ID name of the slide show parent node.           (string)
 ImageMapID:'map1', // the unique ID name of the image MAP.                        (string)
 ImageArray:[       // an array defining the slide show images and image map data. (array)
  // field 0 = the image src.                                   (string)
  // field 1 = an array of arrays defining the image map data.  (array)
  //    field 0 = the image map area coordinates.         (array)
  //    field 1 = the image map area link href.           (string)
  //    field 2 = the image map area alt attribute value. (string)
  ['http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg',[[[122,82,25],'#','area1'],[[187,126,24],'#','area2'],[[48,62,20],'#','area3']]],
  ['http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg',[[[241,195,21],'#','area4'],[[85,86,131,120],'#','area5']]],
  ['http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg',[[[241,195,21],'#','area6'],[[85,86,131,120],'#','area7']]]
 ],
 SlideSpeed:500     //(optional) the animation speed in milli seconds.             (number, default = 1000)
});


/*]]>*/
</script>

</div>
<div id="navBarContainer2">
  <ul id="navBar2">
    <li id="navBarContactus"><a href="#">Contact us</a> </li>

    <li id="navBarAboutus"><a href="#">About us</a> </li>
    <li id="navBarHelp"><a href="#">Help</a> </li>
    <li id="navBarFAQ"><a href="#">FAQ</a> </li>
    <li id="navBarTC"><a href="#">Terms and Conditions </a></li>
    <li id="navBarAuthenticity"><a href="#">Authenticity</a> </li>

  <li id="navBarFeedback"><a href="#">Feedback</a>  </li></ul><div id="email"> <form id="email" method="post" name="email" action="email.php"><div class="copyrightdiv">Copyright   ©   2011   Some Site.   All   rights reserved.  </div>
  </form>
  </div></div></div></div>
</body>
</html>

There is some confusion in your mark up but
the forward button passes 1 and the back button passes -1 to function Next