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></title>
<style type="text/css">
/*<![CDATA[*/
.examples {
position:relative;left:20px;top:0px;width:850px;height:380px;margin-Top:20px;border:solid red 1px;
}
.text {
position:absolute;left:20px;top:10px;width:820px;text-Align:center;
}
.horizontal {
position:absolute;left:20px;top:30px;width:400px;height:150px;background-Color:#FFCC66;border:solid red 1px;
}
.innerH {
position:absolute;left:0px;top:0px;background-Color:#FFCC66;
}
.innerH IMG{
width:200px;height:150px;float:left;margin-Left:5px; /* do not use margin-Right */
}
.step {
position:absolute;left:20px;top:80px;width:400px;height:130px;background-Color:#FFCC66;border:solid red 1px;
}
.stepinner {
position:absolute;left:0px;top:0px;background-Color:#FFCC66;
}
.stepinner IMG{
width:185px;height:130px;float:left;margin-Left:5px; /* do not use margin-Right */
}
.buttons {
position:absolute;left:20px;top:30px;width:400px;height:130px;text-Align:center;
}
.buttons INPUT{
width:70px;background-Color:#FFCC66;font-Size:12px;
}
.vertical {
position:absolute;left:440px;top:30px;width:185px;height:320px;background-Color:#FFCC66;border:solid red 1px;
}
.innerV {
position:absolute;left:0px;top:0px;
}
.innerV IMG {
width:185px;height:130px;float:left;margin-Top:5px; /* do not use margin-Bottom */
}
/*]]>*/
</style>
<script type="text/javascript">
/*<![CDATA[*/
// Multi Mode Scroller (17-July-2011)
// by Vic Phillips - http://www.vicsjavascripts.org.uk/
/*
A scroller with options for 'Continuous', 'End Control' and 'Step' scroll applications
and with both 'Horizontal' and 'Vertical' modes of execution.
The scroll may be controlled by inline event calls.
Removed to allow posting
*/
// ****** Functional Code - NO NEED to Change.
function zxcMMScroller(o){
var oop=this,mde=o.Mode,mde=typeof(mde)=='string'&&mde.charAt(0).toUpperCase()=='V'?['top','offsetTop','offsetHeight','height',1]:['left','offsetLeft','offsetWidth','width',0],obj=document.getElementById(o.ID),slide=obj.getElementsByTagName('*')[0],fst=slide.getElementsByTagName('*')[0],psz=obj[mde[2]],esz=o.EndSize,esz=typeof(esz)=='number'&&esz>0?esz:false,clds=slide.childNodes,lst=clds[clds.length-1],lst=lst.nodeType==1?lst:lst.previousSibling,ms=o.StepDuration,ctr=o.StepCenter,slider=document.createElement('DIV'),z0=0,spd=o.Direction,ssz=o.ParentSize,ss=o.StartScroll,nme=o.ID+'=',days=o.DaysPersistence,days=typeof(days)=='number'&&this.cookie?days:false;
obj.style.overflow='hidden';
slide.style.position='absolute';
slide.style[mde[3]]='10000px';
var sz=lst[mde[1]]+lst[mde[2]],nu=Math.ceil(psz/sz)+(ctr!=true?1:2);
slider.style.position='absolute';
slider.style[mde[0]]=-sz+'px';
obj.appendChild(slider);
for (;z0<nu;z0++){
slide=z0>0?slide.cloneNode(true):slide;
slide.style[mde[0]]=sz*z0-(ctr!=true?0:sz)+'px';
slider.appendChild(slide);
}
this.obj=obj;
this.mde=mde;
this.sz=sz;
this.slider=slider;
this.dly=null;
this.ary=false;
this.nowrap=typeof(o.Wrap)!='boolean'||o.Wrap?false:[-sz,-fst[mde[1]]-fst[mde[2]]];
this.mm=false;
this.end=false;
this.ms=this.ud=typeof(spd)=='number'?Math.abs(spd)*1000:10000;
this.ud=typeof(spd)=='number'&&spd<0?true:false;
this.days=days;
this.nme=nme;
this.now=this.ud?0:-sz;
if (typeof(ms)!='number'||!this.stepinit||esz){
if (esz&&this.endinit){
this.endinit(o,mde,obj,esz,spd,fst,lst,ss);
}
else if (typeof(ss)!='boolean'||ss==true){
this.Scroll();
}
}
else {
this.stepinit(o,mde,clds,sz,ctr,ms,ss);
}
}
zxcMMScroller.prototype={
Pause:function(){
clearTimeout(this.dly);
},
// Optional 'End Control' Code
endinit:function(o,mde,obj,esz,spd,fst,lst,ss){
var max=o.MaxEndSpeed,min=o.MinEndSpeed,now=this.days&&this.cookie()?this.cookie()*1:0;
this.nowrap=typeof(o.Wrap)!='boolean'||o.Wrap?false:[-lst[mde[1]]-lst[mde[2]]+obj[mde[2]],-fst[mde[1]]];
this.slider.style[mde[0]]=(this.nowrap?-fst[mde[1]]:0)+'px';
this.slider.style[this.mde[0]]=now+'px';
this.slider=[this.slider,now];
this.panends=[esz,obj[this.mde[2]]-esz];
this.ends=[-1,1];
this.min=typeof(min)=='number'?min:0;
this.maxspd=typeof(max)=='number'?max:spd;
this.inc=this.min;
this.addevt(obj,'mousemove','move');
this.addevt(obj,'mouseout','epause',obj);
if (ss){
this.escroll();
}
},
epause:function(obj){
var oop=this,e=window.event||arguments.callee.caller.arguments[0];
if (e.type=='mouseout'){
var eo=e.relatedTarget?e.relatedTarget:e.toElement;
if (eo){
while (eo.parentNode){
if (eo==obj){
return false;
}
eo=eo.parentNode;
}
}
}
this.inc=this.min;
this.Pause();
if (this.days){
this.cookieset(this.slider[1]);
}
this.dly=setTimeout(function(){ oop.escroll(); },25);
},
escroll:function(){
clearTimeout(this.dly);
var oop=this,slider=this.slider,ud=this.inc,sz=this.sz,min=this.min,min=ud!=0?Math.abs(min)*(ud>0?1:-1):min,nw=this.nowrap,now=slider[1]+ud;
slider[1]=!nw?((ud<0&&now<-sz)||(ud>0&&now>0)?ud<0?0:-sz:slider[1])+ud:(ud<0&&now<nw[0])||(ud>0&&now>nw[1])?nw[ud<0?0:1]:now;
slider[0].style[this.mde[0]]=slider[1]+'px';
this.min=min;
this.dly=setTimeout(function(){ oop.escroll(); },20);
},
addevt:function(o,t,f,p){
var oop=this;
if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](p,e); }, false);
else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](p,e); });
},
move:function(x,e){
var mde=this.mde[4],x=this.mse(e)[mde]-this.pos(this.obj)[mde],ends=this.panends;
this.inc=(x>ends[1]?this.maxspd*((x-ends[1])/ends[0]):x<ends[0]?-this.maxspd*(1-x/ends[0]):0);
if (this.dly==null){
this.escroll();
}
},
mse:function(e){
if (window.event){
var docs=[document.body.scrollLeft,document.body.scrollTop];
if (!document.body.scrollTop){
docs=[document.documentElement.scrollLeft,document.documentElement.scrollTop];
}
return [e.clientX+docs[0],e.clientY+docs[1]];
}
return [e.pageX,e.pageY];
},
pos:function(obj){
var rtn=[0,0];
while(obj){
rtn[0]+=obj.offsetLeft;
rtn[1]+=obj.offsetTop;
obj=obj.offsetParent;
}
return rtn;
},
// Optional 'Persistance' Code
cookie:function(){
var re=new RegExp(this.nme+'[^;]+','i');
if (document.cookie.match(re)){
return document.cookie.match(re)[0].split("=")[1];
}
return null
},
cookieset:function(v){
document.cookie=this.nme+v+';expires='+(new Date(new Date().getTime()+this.days*86400000).toGMTString())+';path=/';
}
}
/*]]>*/
</script>
<script type="text/javascript">
/*<![CDATA[*/
function Init(){
E5=new zxcMMScroller({
ID:'example5',
Mode:'Vertical',
Direction:1,
Wrap:false, //(optional) false = scroll will not wrap first to last or last to first. (boolean, default = true)
DaysPersistence:1,
StartScroll:false,
// End Scroller Options
EndSize:100, // the scroll is controlled by mousemove over the ends. (number)
MinEndSpeed:0, //(optional) the minimum scroll speed on mousemove over the ends. (number, default = 0)
MaxEndSpeed:-5 //(optional) the maximum scroll speed on mousemove over the ends. (number, default = option Speed)
});
}
if (window.addEventListener){
window.addEventListener('load',Init, false);
}
else if (window.attachEvent){
window.attachEvent('onload',Init);
}
/*]]>*/
</script>
</head>
<body>
<div id="example5" class="vertical" >
<div class="innerV" >
<img alt="Egypt" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" />
<img alt="Egypt" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" />
<img alt="Egypt" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg" />
<img alt="Egypt" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg" />
<img alt="Egypt" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt9.jpg" />
</div>
</div>
</body>
</html>
Is there "cookies" version of the vertical CMotion Gallery 2 script?
Reply With Quote
Bookmarks