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/dynamici...iongallery.htm
http://www.dynamicdrive.com/dynamici...ongallery2.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

Code:

<!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>

Thread: CMotion Image Gallery

Thread Tools

Search Thread

CMotion Image Gallery

Bookmarks

Bookmarks

Posting Permissions