PDA

View Full Version : image slider button question



Rosalie
09-17-2011, 11:47 AM
Hello everyone,

I created this slider ("") with Vic Phillips's script but I would like to have the previous button on the first slide and the next button on the last slide to be invisible.

Does anyone knows how to do this?

Thanks in advance!
Rosalie

vwphillips
09-17-2011, 01:26 PM
<!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>---------.com | Open your shop user guide </title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link rel="shortcut icon" type="image/x-icon" href="favicon2.ico" />
<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:11px;top:20px;width:994px;height:401px;
}

.button {
position:absolute;left:1px;top:447px;z-index:101;cursor:pointer;

}

#tst {
position:relative;left:0px;top:0px;width:994px;height:401px;
}
.maindiv {
}
.maindiv {
}

#tst IMG{
position:absolute;left:0px;top:50px;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 class="tstparent" >
<div><img src="http://----------.com/howtoopenashop.png" width="394" height="90" />
<div id="tst" >
<img src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" alt="img" usemap="#tstmap"/>
</div>
</div>
<img class="button" src="http://----------.com/previousbutton.png" id="previous" alt="previous" style="left:0px;" />
<img class="button" src="http://----------.com/nextbutton.png" id="next" alt="next" style="left:915px;" /></div>

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


<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]);;
}
}
but=document.getElementById(o.Next);
if (but){
this.nxt=but;
but.onclick=function(){ oop.Next(1); }
}
but=document.getElementById(o.Back);
if (but){
this.bk=but;
but.onclick=function(){ oop.Next(-1); }
but.style.visibility='hidden';
}
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);
}

zxcMapSlideShow.prototype={

Next:function(ud){
var ary=this.ary,cnt=this.cnt+(typeof(ud)=='number'&&ud<0?-1:1),lgth=ary.length-1
cnt=Math.max(Math.min(cnt,lgth),0);
if (this.nxt){
this.nxt.style.visibility=cnt<lgth?'visible':'hidden';
}
if (this.bk){
this.bk.style.visibility=cnt>0?'visible':'hidden';
}
if (cnt!=this.cnt){
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);
}
}

}


/*]]>*/
</script>


<script type="text/javascript">
/*<![CDATA[*/

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://-------.com/shopfrontpage.png',[[[122,82,25],'#','area1'],[[187,126,24],'#','area2'],[[48,62,20],'#','area3']]],
['http://-------.com/shopstep1.png',[[[122,82,25],'#','area1'],[[187,126,24],'#','area2'],[[48,62,20],'#','area3']]],
['http://-------.com/shopstep2.png',[[[122,82,25],'#','area1'],[[187,126,24],'#','area2'],[[48,62,20],'#','area3']]],
['http://-------.com/shopstep3.png',[[[241,195,21],'#','area4'],[[85,86,131,120],'#','area5']]],
['http://-------.com/shopstep4.png',[[[122,82,25],'#','area1'],[[187,126,24],'#','area2'],[[48,62,20],'#','area3']]],
['http://-------.com/shopstep5.png',[[[241,195,21],'#','area6'],[[85,86,131,120],'#','area7']]]
],
SlideSpeed:0, //(optional) the animation speed in milli seconds. (number, default = 1000)
Next:'next', //(optional) the next button ID. (string, default = in line call)
Back:'previous' //(optional) the back button ID. (string, default = in line call)
});

/*]]>*/
</script></body>
</html>

Rosalie
09-17-2011, 08:05 PM
Thank you so much vwphillips! It works perfectly :)