PDA

View Full Version : CMotion Image Gallery



samukacpz
05-25-2009, 02:49 PM
Good morning guys.

I am new to the forum, sorry my English, was translated by google.

Next:

Someone has already run 2 galleries of CMotion (vertical and horizontal) on the same page?

Thanks

Samuel

samukacpz
05-25-2009, 07:02 PM
someone already has?

http://www.dynamicdrive.com/dynamicindex4/cmotiongallery.htm
http://www.dynamicdrive.com/dynamicindex4/cmotiongallery2.htm

I did run horizontally, but not the vertical rolls.

someone help me?

thanks

samukacpz
05-28-2009, 12:18 PM
anyone?

vwphillips
05-28-2009, 03:49 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/
#tst1 {
position:relative;overflow:hidden;width:105px;height:200px;border:solid black 1px;
}

#tst2 {
position:relative;overflow:hidden;width:200px;height:100px;border:solid black 1px;
}

#tst3 {
position:relative;overflow:hidden;width:105px;height:200px;border:solid black 1px;
}
/*]]>*/
</style>

<script type="text/javascript">
/*<![CDATA[*/
// Slide (28-May-2009)
// by Vic Phillips http://www.vicsjavascripts.org.uk/

// parameter 0 = the mode, 'V' = vertical, 'H' = horizontal. (string)
// parameter 1 = the unique Id name og the parent node. (string)
// parameter 2 = the distance from the ends to execte slide. (digits)
// parameter 3 = the minimum slide speed. (digits)

function zxcSlide(mde,id,d,ms){
this.mde=mde.charAt(0).toUpperCase()=='V'?['top','offsetTop','offsetHeight','height',1]:['left','offsetLeft','offsetWidth','width',0];
this.obj=document.getElementById(id);
this.div=this.obj.getElementsByTagName('DIV')[0]
this.div.style.position='absolute';
this.div.style.left='0px';
this.div.style.top='0px';
this.div.style[this.mde[3]]='10000px';
var clds=this.div.childNodes;
for (var max,z0=0;z0<clds.length;z0++){
if (clds[z0].nodeType==1) max=(clds[z0][this.mde[1]]+clds[z0][this.mde[2]]);
}
this.max=-max+this.obj[this.mde[2]];
d=d||this.obj[this.mde[2]]/3;
this.mm=[d,this.obj[this.mde[2]]-d];
this.addevt(this.obj,'mousemove','mse');
this.addevt(this.obj,'mouseout','end');
this.ms=ms||100;
this.to=null;
}

zxcSlide.prototype.mse=function(e){
this.end();
var p=zxcMse(e)[this.mde[4]]-zxcPos(this.obj)[this.mde[4]];
this.spd=Math.max(this.ms-(this.ms*(p<this.mm[0]?(this.mm[0]-p)/this.mm[0]:p>this.mm[1]?(p-this.mm[1])/this.mm[0]:0))+5,5);
clearTimeout(this.to);
if (this.spd!=this.ms+5) this.slide(p<this.mm[0]?1:-1)
}

zxcSlide.prototype.slide=function(ud){
var oop=this;
this.div.style[this.mde[0]]=Math.max(Math.min(parseInt(this.div.style[this.mde[0]])+ud,0),this.max)+'px';
this.to=setTimeout(function(){ oop.slide(ud); },this.spd);
}

zxcSlide.prototype.end=function(){
clearTimeout(this.to);
}

zxcSlide.prototype.addevt=function(o,t,f,p){
var oop=this;
if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](e,p);}, false);
else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](e,p); });
else {
var prev=o['on'+t];
if (prev) o['on'+t]=function(e){ prev(e); oop[f](e,p); };
else o['on'+t]=o[f];
}
}



function zxcMse(ev){
if(!ev) var ev=window.event;
if (document.all) return [ev.clientX+zxcDocS()[0],ev.clientY+zxcDocS()[1]];
return [ev.pageX,ev.pageY];
}

function zxcDocS(){
if (!document.body.scrollTop) return [document.documentElement.scrollLeft,document.documentElement.scrollTop];
return [document.body.scrollLeft,document.body.scrollTop];
}

function zxcPos(obj){
var rtn=[obj.offsetLeft,obj.offsetTop];
while(obj.offsetParent!=null){
var objp=obj.offsetParent;
rtn[0]+=objp.offsetLeft;
rtn[1]+=objp.offsetTop;
obj=objp;
}
return rtn;
}


/*]]>*/
</script>
</head>

<body onload="var oop=new zxcSlide('V','tst1',80);var oop=new zxcSlide('H','tst2',80);var oop=new zxcSlide('V','tst3',80);">
<div id="tst1" >
<div >
<img src="http://www.dynamicdrive.com/dynamicindex4/dynamicbook1.gif" />
<img src="http://www.dynamicdrive.com/dynamicindex4/dynamicbook1.gif" />
<img src="http://www.dynamicdrive.com/dynamicindex4/dynamicbook1.gif" />
<img src="http://www.dynamicdrive.com/dynamicindex4/dynamicbook1.gif" />
<img title="4" src="http://www.dynamicdrive.com/dynamicindex4/dynamicbook1.gif" />
</div>
</div>
<div id="tst2" >
<div >
<img src="http://www.dynamicdrive.com/dynamicindex4/dynamicbook1.gif" />
<img src="http://www.dynamicdrive.com/dynamicindex4/dynamicbook1.gif" />
<img src="http://www.dynamicdrive.com/dynamicindex4/dynamicbook1.gif" />
<img src="http://www.dynamicdrive.com/dynamicindex4/dynamicbook1.gif" />
<img title="4" src="http://www.dynamicdrive.com/dynamicindex4/dynamicbook1.gif" />
</div>
</div>
<div id="tst3" >
<div >
<img src="http://www.dynamicdrive.com/dynamicindex4/dynamicbook1.gif" />
<img src="http://www.dynamicdrive.com/dynamicindex4/dynamicbook1.gif" />
<img src="http://www.dynamicdrive.com/dynamicindex4/dynamicbook1.gif" />
<img src="http://www.dynamicdrive.com/dynamicindex4/dynamicbook1.gif" />
<img src="http://www.dynamicdrive.com/dynamicindex4/dynamicbook1.gif" />
</div>
</div>

</body>

</html>