PDA

View Full Version : Dots showing images



noobie123
04-01-2015, 09:47 PM
1) Script Title: Continuous Reel Slideshow

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

3) Describe problem: Is it possible to have dots for the number of images rather next/previous buttons. I'd ideally like to have a grey dot for images that aren't show then a, say black, dot for the current image. Then when you click on one of the dots it shows that image?

mlegg
04-01-2015, 11:30 PM
do you mean like the dots at the bottom of this slider?
http://cssslider.com/

noobie123
04-02-2015, 08:54 AM
yep that's the sort of thing I'm after. Although I don't want to dots to show the image when you roll over them. I also don't want the image to move other than when it scrolls if that makes any sense.

mlegg
04-02-2015, 12:44 PM
in the settings you can choose to enable the dots to show a thumbnail preview or not have them
http://cssslider.com/help/using-the-advanced-options-in-cssslider-5.html

5656

you would leave the show bullets navigation unchecked

vwphillips
04-03-2015, 09:12 AM
<!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></title>
<style type="text/css">
/*<![CDATA[*/

#myreel {
position:relative;width:300px;height:200px;border:solid red 1px;
}

#paginate {
position:relative;width:300px;height:20px;border:solid red 1px;
}

#paginate .page {
position:relative;float:left;margin:5px;width:10px;height:10px;background-Color:#C9C9C9;border-radius: 5px;;
}

#paginate .active{
position:relative;width:10px;height:10px;border:solid #000000 1px;background-Color:#000000;
}

/*]]>*/
</style></head>

<body>

<div id="myreel" ></div>
<div id="paginate" >

</div>

<input id="b1" type="button" name="" value="Next" />
<input id="b2" type="button" name="" value="Prev" />
<input type="button" name="" value="GoTo 1" onclick="zxcReelSlideShow.GoTo('myreel',0)"/>
<input type="button" name="" value="GoTo 2" onclick="zxcReelSlideShow.GoTo('myreel',1)"/>
<input id="b5" type="button" name="" value="GoTo 3" onclick="zxcReelSlideShow.GoTo('myreel',2)"/>
<input type="button" name="" value="GoTo 4" onclick="zxcReelSlideShow.GoTo('myreel',3)"/>


<script type="text/javascript">
/*<![CDATA[*/
// Reel Slide Show (02-April-2015)
// by: Vic Phillips - http://www.vicsjavascripts.org/

var zxcReelSlideShow={

GoTo:function(id,n){
var o=this['zxc'+id];
if (o&&o.a[n]){
this.Pause(id);
if (n!=o.n){
o.ud=n>o.n?1:-1;
this.rotate(o,n);
}
}
},

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);
}
},

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

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

Init:function(o){
var id=o.WrapperID,a=o.ImageArray,p=document.getElementById(id),z0=0;
if (p&&a instanceof Array){
o.id=id;
o.p=p;
for (;z0<a.length;z0++){
if (a[z0][0]&&typeof(a[z0][0])=='string'){
a[z0][3]=new Image();
a[z0][3].src=a[z0][0];
}
}
this.load(o,a);
}
},

load:function(o,a){
clearTimeout(o.to);
var oop=this,z0=0,z1=0;
for (;z0<a.length;z0++){
if (a[z0][3]&&a[z0][3].width<40){
o.to=setTimeout(function(){ oop.load(o,a); },200);
}
}
oop.ready(o,a);
},

ready:function(o,a){
var d=o.Cookie,d=typeof(d)=='string'&&d.charAt(0).toUpperCase()=='S'?'S':typeof(d)=='number'?d:-1,c=this.cookie(o.id),n=d!=-1&&c?c*1:0;
var m=o.Orientation,ms=o.SlideDuration,ah=o.AutoHold,as=o.AutoStart,add=o.AddEvents,add=add instanceof Array?add:[],w=this.css(o.p,'width'),h=this.css(o.p,'height'),m=typeof(m)=='string'?m.charAt(0).toUpperCase():'H',m=m=='V'?['top','left',h]:['left','top',w];
var p=document.getElementById(o.PaginateID),clds=p?p.getElementsByTagName('*'):[],d,an,i,z0=0,z1=0,z2=0,z3=0;
o.a=[];
for (;z0<a.length;z0++){
if (a[z0][3]&&a[z0][3].width>40){
d=document.createElement('DIV');
o.p.appendChild(d);
an=document.createElement('A');
d.appendChild(an);
i=document.createElement('IMG');
i.src=a[z0][0];
an.appendChild(i);
i.style.position=d.style.position='absolute';
d.style[m[0]]=(o.a.length!=n?m[2]:0)+'px';
d.style[m[1]]='0px';
d.style.width=w+'px';
d.style.heigth=h+'px';
i.style.left=(w-i.width)/2+'px';
i.style.top=(h-i.height)/2+'px';
a[z0][1]?a.href=a[z0][1]:null;
a[z0][2]?a.target=a[z0][2]:null;
o.a.push([d,m[0]]);
}
}
o.l=o.a.length;
o.pgs=[];
for (;z1<clds.length;z1++){
c=clds[z1].className;
if ((' '+c+' ').indexOf(' page ')>=0){
o.pgs.push([clds[z1],c]);
}
}
for (;z2<o.l;z2++){
if (!o.pgs[z2]){
d=document.createElement('DIV');
d.className='page';
o.pgs[z2]=[d,'page'];
p?p.appendChild(d):null;
}
z2!=n?null:o.pgs[z2][0].className+=' active';
this.addevt(o.pgs[z2][0],'click','GoTo',o.id,z2);
}
for (;z3<add.length;z3++){
if (add[z3]&&add[z3][0]){
p=document.getElementById(add[z3][0]);
if (p&&this[add[z3][2]]){
c=add[z3][1];
this.addevt(p,c=='mouseover'||c=='mouseout'||c=='mouseup'||c=='mousedown'||c=='mousemove'?c:'click',add[z3][2],o.id,add[z3][3]);
}
}
}
o.days=d;
o.sz=m[2];
o.ms=typeof(ms)=='number'&&ms>0?ms:1000;
o.h=typeof(ah)=='number'&&ah>0?ah:o.ms*4;
o.n=n;
o.ud=1;
this['zxc'+o.id]=o;
o.p.style.overflow='hidden';
typeof(as)=='number'&&as>0?this.Auto(o.id,as):null;
},

rotate:function(o,n){
this.Pause(o.id);
o.auto=n===true;
n=o.auto?o.n+o.ud:n;
n=(n+o.l)%o.l;
this.animate(o,o.a[o.n],0,o.sz*(o.ud>0?-1:1),new Date(),o.ms);
this.animate(o,o.a[n],o.sz*(o.ud>0?1:-1),0,new Date(),o.ms,true);
o.pgs[o.n][0].className=o.pgs[o.n][1];
o.n=n;
o.pgs[o.n][0].className=o.pgs[o.n][1]+' active';
o.days!=-1?document.cookie=o.id+'='+n+(typeof(o.days)=='number'?';expires='+(new Date(new Date().getTime()+o.days*86400000).toGMTString())+';path/;':';'):null;
},

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

css:function(o,p){
return parseInt(o.currentStyle?o.currentStyle[p.replace(/-/g,'')]:document.defaultView.getComputedStyle(o,null).getPropertyValue(p.toLowerCase()));
},

cookie:function(nme){
var re=new RegExp(nme+'=[^;]+','i');
return document.cookie.match(re)?document.cookie.match(re)[0].split("=")[1]:null;
},

setc:function(o,n,v){
o.days!=-1?document.cookie=n+'='+v+(typeof(o.days)=='number'?';expires='+(new Date(new Date().getTime()+o.days*86400000).toGMTString())+';path/;':';'):null;
},


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


}

zxcReelSlideShow.Init({
WrapperID:"myreel", //ID of blank DIV on page to house Slideshow
ImageArray:[
["http://www.vicsjavascripts.org/StdImages/1.gif"], //["image_path", "optional_link", "optional_target"]
["http://www.vicsjavascripts.org/StdImages/2.gif", "http://en.wikipedia.org/wiki/Cave", "_new"],
["http://www.vicsjavascripts.org/StdImages/3.gif"],
["http://www.vicsjavascripts.org/StdImages/4.gif"] //<--no trailing comma after very last image element!
],
Orientation:"h", //Valid values: "h" or "v"
Cookie:1, //remember last viewed slide and recall within same session?
SlideDuration:1000, //transition duration (milliseconds)
AutoHold:2000,
AutoStart:2000,
PaginateID:'paginate', //(optional) the unique ID of the paginate wrapper element.
AddEvents:[
// field 0 = the unique ID of the element.
// field 1 = the event type.
// field 2 = the script function name.
// field 3 = the command parameter to pass to the function.
['b1','click','Next',1],
['b2','click','Next',-1],
['b5','click','GoTo',2],
['myreel','mouseover','Pause'],
['myreel','mouseout','Auto']
]
});


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

</html>