PDA

View Full Version : Buttons with Slideshow



kenrogers
09-07-2013, 03:18 PM
1) Script Title: Continuous Reel Slideshow

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex14/reelslideshow.htm

3) Describe problem: Is there a way to get HULU types of buttons with this SlideShow?
http://www.hulu.com/
An array of buttons is shown in the middle near the bottom of each slide. Then one button
lights up for the slide being shown. Putting the cursor on a particular button will actuate
that particular slide. This would be very useful.

vwphillips
09-08-2013, 02:01 PM
you are looking for pagination.

it is difficult to modify the Continuous Reel Slideshow

example image slider with pagination


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title></title>
<style type="text/css">
<!--

#tst {
position:absolute;left:100px;top:20px;width:400px;height:300px;border:solid red 1px;background-Color:#FFCC66;
}

#tst IMG {
width:200px;height:150px;border-Width:0px;
}

#paginate {
position:absolute;left:100px;top:325px;width:400px;height:30px;border:solid red 1px;background-Color:#FFCC66;
}


#paginate .page {
width:20px;height:20px;border:solid red 1px;background-Color:#FFCC66;float:left;margin-Left:10px;margin-Top:5px;background-Image:url(http://www.vicsjavascripts.org.uk/StdImages/2.gif);
}

#paginate .current {
background-Color:#FF0000;background-Image:url(http://www.vicsjavascripts.org.uk/StdImages/3.gif);
}

#paginate .mouseover {
background-Color:#99CC66;background-Image:url(http://www.vicsjavascripts.org.uk/StdImages/4.gif);
}


#tst2 {
position:absolute;left:100px;top:400px;width:400px;height:300px;border:solid red 1px;background-Color:#FFCC66;
}

#tst2 IMG {
width:400px;height:300px;border-Width:0px;
}

#paginate2 .page {
width:20px;height:20px;border:solid red 1px;background-Color:#FFFFCC;margin-Top:10px;margin-Left:5px;
}

#paginate2 .current {
background-Color:#FF0000;
}

#paginate2 .mouseover {
background-Color:#99CC66;
}


-->
</style></head>

<body>
<div id="tst" >
</div>

<div id="paginate" >
<div class="page" ></div>
<div class="page" ></div>
<div class="page" ></div>
</div>

<div id="tst2" >
</div>

<div id="paginate2" >
<div class="page" ></div>
<div class="page" ></div>
<div class="page" ></div>
</div>


<script type="text/javascript">
<!--
// Slide Slide Show. (07-September-2013)
// by: Vic Phillips - http://www.vicsjavascripts.org.uk/

/*

**** Controlling the Script.
The script may be controlled by inline event calls.

** Function Next.
e.g.
<input type="button" name="" value="Next" onmouseup="zxcFadeSlideShow.Next('i1',1);" >
where:
paramter 0 = the unique ID name of the featured image. (string)
paramter 1 = 1 = display the next image, -1 display the previous image. (number)

** Function GoTo.
e.g.
<input type="button" name="" value="GoTo 1" onmouseup="zxcFadeSlideShow.GoTo('i1',1);" >
where:
paramter 0 = the unique ID name of the featured image. (string)
paramter 1 = index number of the specified image. (number)

** Function Auto.
Function Auto will auto rotate the slide show images.
e.g.
<input type="button" name="" value="Auto" onmouseup="zxcFadeSlideShow.Auto('i1');" >
where:
paramter 0 = the unique ID name of the featured image. (string)

** Function Pause.
e.g.
<input type="button" name="" value="Pause" onmouseup="zxcFadeSlideShow.Pause('i1');" >
where:
paramter 0 = the unique ID name of the featured image. (string)

*/

var zxcSlideSlideShow={

Next:function(id,ud){
var o=this['zxc'+id],ud=typeof(ud)=='number'&&ud<0?-1:1;
if (o){
o.ud=ud;
this.rotate(o,o.n+ud);
}
},

GoTo:function(id,n){
var o=this['zxc'+id];
if (o&&o.ary[n]){
this.rotate(o,n);
}
},

Auto:function(id,ms){
var o=this['zxc'+id],oop=this;
if (o){
o.to=setTimeout(function(){ oop.rotate(o,true); },ms||200);
}
},

Pause:function(id,ms){
var o=this['zxc'+id];
if (o){
clearTimeout(o.to);
o.auto=false;
}
},

init:function(o){
var id=o.ParentID,ia=o.ImageArray,pge=document.getElementById(o.PaginateID),m=o.Mode,ud=o.Direction,ms=o.Animate,add=o.AddEvents,hold=o.AutoHold,srt=o.AutoStart,p=d ocument.getElementById(id),add=add instanceof Array?add:[];
if (p&&ia instanceof Array){
p.style.overflow='hidden';
var m=typeof(m)=='string'&&m.charAt(0).toUpperCase()=='V'?['top','height',p.offsetHeight,'left','width',p.offsetWidth]:['left','width',p.offsetWidth,'top','height',p.offsetHeight],ms=typeof(ms)=='number'&&ms>0?ms:1000,a=document.createElement('A'),i,obj,t,c=0,pgs=pge?pge.childNodes:[],z0=0,z1=0,z2=0;
o.ary=[];
for (;z0<ia.length;z0++){
if (ia[z0]&&ia[z0][0]){
i=document.createElement('IMG');
a=document.createElement('A');
p.appendChild(a);
i.src=ia[z0][0];
ia[z0][1]?a.href=ia[z0][1]:null;
ia[z0][2]?i.title=ia[z0][2]:null;
a.appendChild(i);
i.style.position='absolute';
i.style[m[0]]=(c>0?m[2]:(m[2]-i[m[1]]+.1)/2)+'px';
i.style[m[3]]=(m[5]-i[m[4]])/2+'px';
o.ary[c]=[i,m[0],(m[2]-i[m[1]])/2];
c++;
}
}
o.pgs=[];
c=0;
for (;z1<pgs.length;z1++){
pge=pgs[z1].className;
if (pge){
o.pgs[c]=[pgs[z1],pge,pge+' current',pge+' mouseover'];
this.pge(o,c,c>0?1:2);
this.addevt(pgs[z1],'mouseup','slide',o,c);
this.addevt(pgs[z1],'mouseover','mse',o,c,3);
this.addevt(pgs[z1],'mouseout','mse',o,c,1);
c++;
}
}
for (;z2<add.length;z2++){
if (add[z2]&&add[z2][0]){
obj=document.getElementById(add[z2][0]);
if (obj&&this[add[z2][2]]){
t=add[z2][1];
this.addevt(obj,t=='click'||t=='mouseover'||t=='mouseout'||t=='mousedown'?t:'mouseup',add[z2][2],id,add[z2][3]);
}
}
}
o.id=id;
o.m=m;
o.ud=typeof(ud)=='number'&&ud<0?-1:1;
o.ms=ms;
o.s=o.OnAnimate;
o.f=o.OnComplete;
o.hold=typeof(hold)=='number'&&hold>0?hold:ms*4;
o.n=0;
this['zxc'+id]=o;
typeof(srt)=='number'&&srt>=0?this.Auto(id,srt):null;
}
},

rotate:function(o,auto){
clearTimeout(o.to);
var m=o.m,n=o.n,a=o.ary[n],lgth=o.ary.length-1;
this.pge(o,n,1);
this.animate(o,a,a[2],m[2]*(o.ud>0?-1:1),new Date(),o.ms+20);
o.auto=auto===true;
n=o.auto?n+o.ud:auto;
n=n>lgth?0:n<0?lgth:n;
typeof(o.s)=='function'?o.s(n):null;
a=o.ary[n];
this.pge(o,n,2);
this.animate(o,a,m[2]*(o.ud>0?1:-1),(m[2]-a[0][m[1]]+.1)/2,new Date(),o.ms,true);
o.n=n;
},

animate:function(o,a,f,t,srt,mS,c){
clearTimeout(a[5]);
var oop=this,ms=new Date()-srt,n=(t-f)/mS*ms+f;
if (isFinite(n)){
a[2]=Math.floor(n);
a[0].style[a[1]]=a[2]+'px';
}
if (ms<mS){
a[5]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS,c); },10);
}
else {
a[2]=t;
a[0].style[a[1]]=t+'px';
typeof(o.f)=='function'?o.f(n):null;
c&&o.auto?oop.Auto(o.id,o.hold):null;
}
},

pge:function(o,n,ud){
o.pgs[n]?o.pgs[n][0].className=o.pgs[n][ud]:null;
},

slide:function(o,n){
n!=o.n?o.ud=n<o.n?-1:1:null;
this.rotate(o,n);
},

mse:function(o,n,ud){
n!=o.n?o.pgs[n][0].className=o.pgs[n][ud]:null;
},

addevt:function(o,t,f,p,p1,p2){
var oop=this;
o.addEventListener?o.addEventListener(t,function(e){ return oop[f](p,p1,p2);},false):o.attachEvent?o.attachEvent('on'+t,function(e){ return oop[f](p,p1,p2); }):null;
}


}

zxcSlideSlideShow.init({
ParentID:'tst', // the unique ID name of the parent DIV. (string)
ImageArray:[ // an array of arrays defining the images. (array)
// field 0 = the image scr.
// field 1 = (optional) the image link href.
// field 2 = (optional) the image title.
['http://www.vicsjavascripts.org.uk/StdImages/1.gif','http://www.vicsjavascripts.org.uk/','Egypt 1'],
['http://www.vicsjavascripts.org.uk/StdImages/2.gif','http://www.vicsjavascripts.org.uk/','Egypt 2'],
['http://www.vicsjavascripts.org.uk/StdImages/3.gif','http://www.vicsjavascripts.org.uk/','Egypt 3']
],
PaginateID:'paginate', //(optional) the unique ID name of the parent DIV. (string, default = np psgination)
Mode:'Horizontal', //(optional) the mode, 'Horizontal' or 'Vertical'. (string, default = 'Horizontal')
Animate:500, //(optional) the animation duration in milli sceconds. (number, default = 1000)
Direction:1, //(optional) the initial auto rotation direction, >0 = forward, < o = back. (number, default = 1 = forward)
AutoHold:2000, //(optional) the auto rotation hold delay in milli sceconds. (number, default = Animation*4)
AutoStart:1000, //(optional) the auto rotation start delay in milli sceconds. (number, default = no auto start)
AddEvents:[ //(optional) an array defining the event calls to add. (array, default = inline event calls)
// field 0 = the unique ID name of the element.
// field 1 = the event type.
// field 2 = the function name.
// field 3 = (optional) the parameter to pass to the function.
['tst','mouseover','Pause'],
['tst','mouseout','Auto']
],
OnAnimate:function(n){ //(optional) a function to call when starting sliding of new image. (function, default = no function)
// n =the current imasge index.
},
OnComplete:function(n){ //(optional) a function to call when sliding in is complete. (function, default = no function)
// n =the current imasge index.
}
});

zxcSlideSlideShow.init({
ParentID:'tst2',
ImageArray:[
['http://www.vicsjavascripts.org.uk/StdImages/1.gif','http://www.vicsjavascripts.org.uk/','Egypt 1'],
['http://www.vicsjavascripts.org.uk/StdImages/2.gif','http://www.vicsjavascripts.org.uk/','Egypt 2'],
['http://www.vicsjavascripts.org.uk/StdImages/3.gif','http://www.vicsjavascripts.org.uk/','Egypt 3']
],
PaginateID:'paginate2',
Mode:'Vertical',
AutoStart:1000,
AddEvents:[
['tst2','mouseover','Pause'],
['tst2','mouseout','Auto']
]
});

//-->
</script>



</body>

</html>

the appearance of the pagination can be controlled by the CSS

kenrogers
09-09-2013, 12:43 AM
I tried it and it works well! Now if I can just integrate it with the
rest of my web page. Thank you very much!

Best, Ken