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[*/
#tstH {
position:absolute;overflow:hidden;left:250px;top:150px;width:570px;height:100px;background-Color:#FFCC66;border:solid #FF3333 1px;
}
.slideH {
position:absolute;left:0px;top:10px;width:1300px;
}
.slideH IMG{
width:100px;height:75px;margin-Left:10px;
}
.buttons {
position:absolute;;left:440px;top:270px;
}
.buttons INPUT{
width:100px;background-Color:#FFCC66;
}
#tstV {
position:absolute;overflow:hidden;left:80px;top:20px;width:120px;height:360px;background-Color:#FFCC66;border:solid #FF3333 1px;
}
.slideV {
position:absolute;left:10px;top:0px;
}
.slideV IMG{
width:100px;height:75px;margin-Top:10px;
}
/*]]>*/
</style>
<script type="text/javascript">
/*<![CDATA[*/
// Pan (15-July-2010)
// by Vic Phillips http://www.vicsjavascripts.org.uk
// **** Functional Code- NO NEED to Change
function zxcPan(o){
this.mde=o.Mode.charAt(0).toUpperCase()=='V'?['top','height',1,'offsetTop','offsetHeight']:['left','width',0,'offsetLeft','offsetWidth'];
this.p=document.getElementById(o.ID);
var slide=this.p.getElementsByTagName('DIV')[0];
slide.style[this.mde[1]]='100000px';
for (var clds=slide.childNodes,fst,lst,z0=0;z0<clds.length;z0++){
if (clds[z0].nodeType==1){
if (!fst){
fst=clds[z0];
}
lst=clds[z0];
}
}
this.slide=slide;
this.run=true;
this.min=-lst[this.mde[3]]-lst[this.mde[4]]+this.p[this.mde[4]];
var pan=typeof(o.Distance)=='number'?o.Distance:100;
this.addevt(this.p,'mousemove','move');
this.addevt(this.p,'mouseout','Pause');
this.ends=[pan,this.sv(this.p,this.mde[1])-pan];
this.rev=typeof(o.ReverseEnds)=='boolean'&&o.ReverseEnds?-1:1;
this.maxspd=o.MaxSpeed||5;
}
zxcPan.prototype={
Pan:function(nu){
this.inc=typeof(nu)=='number'?nu:this.maxspd/2;
if (this.run){
this.scroll();
}
},
Pause:function(){
var e=window.event?window.event:arguments.callee?arguments.callee.caller.arguments[0]:false;
if (e&&e.type=='mouseout'){
var obj=e.relatedTarget||e.toElement;
if (obj){
while (obj.parentNode){
if (obj==this.p){
return false;
}
obj=obj.parentNode;
}
}
}
this.run=true;
clearTimeout(this.to);
},
move:function(p,e){
var x=this.mse(e)[this.mde[2]]-this.pos(this.p)[this.mde[2]];
this.inc=this.maxspd*(x<this.ends[0]?1-x/this.ends[0]:x>this.ends[1]?(x-this.ends[1])/this.ends[0]*-1:0)*this.rev;
if (this.run){
this.scroll();
}
},
scroll:function(){
clearTimeout(this.to)
this.run=false;
this.slide.style[this.mde[0]]=Math.max(Math.min(this.sv(this.slide,this.mde[0])+Math.ceil(this.inc),0),this.min)+'px';
var oop=this;
this.to=setTimeout(function(){ oop.scroll(); },50);
},
addevt:function(o,t,f,p){
var oop=this;
if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](p,e);}, false);
else o.attachEvent('on'+t,function(e){ return oop[f](p,e); });
},
mse:function(e){
if (document.all) return [e.clientX+this.docs()[0],e.clientY+this.docs()[1]];
return [e.pageX,e.pageY];
},
docs:function(){
if (!document.body.scrollTop) return [document.documentElement.scrollLeft,document.documentElement.scrollTop];
return [document.body.scrollLeft,document.body.scrollTop];
},
pos:function(obj){
var rtn=[0,0];
while(obj){
rtn[0]+=obj.offsetLeft;
rtn[1]+=obj.offsetTop;
obj=obj.offsetParent;
}
return rtn;
},
sv:function(obj,par){
if (obj.currentStyle) return parseInt(obj.currentStyle[par.replace(/-/g,'')]);
return parseInt(document.defaultView.getComputedStyle(obj,null).getPropertyValue(par.toLowerCase()));
}
}
/*]]>*/
</script>
</head>
<body>
<div id="tstH" >
<div class="slideH" >
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="Egypt" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" alt="Egypt" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg" alt="Egypt" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt9.jpg" alt="Egypt" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt10.jpg" alt="Egypt" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt11.jpg" alt="Egypt" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt12.jpg" alt="Egypt" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt13.jpg" alt="Egypt" />
</div>
</div>
<div id="tstV" >
<div class="slideV" >
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="Egypt" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" alt="Egypt" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg" alt="Egypt" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt9.jpg" alt="Egypt" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt10.jpg" alt="Egypt" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt11.jpg" alt="Egypt" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt12.jpg" alt="Egypt" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt13.jpg" alt="Egypt" />
</div>
</div>
<script type="text/javascript">
/*<![CDATA[*/
C=new zxcPan({
ID:'tstH', // the unique ID name of the slide parent DIV element. (string)
Mode:'Horizontal', // (optional) the mode, 'Horizontal' or 'Vertical'. (string, default = 'Horizontal')
Distance:250, // (optional) the distance from the ends to pan. (digits, default = 100)
MaxSpeed:10, // (optional) the maximum speed to pan. (digits, default = 5)
ReverseEnds:false // (optional) reverse the ends mouseover pan direction. (boolean, default = false)
});
new zxcPan({
ID:'tstV', // the unique ID name of the slide parent DIV element. (string)
Mode:'Vertical', // (optional) the mode, 'Horizontal' or 'Vertical'. (string, default = 'Horizontal')
Distance:150, // (optional) the distance from the ends to pan. (digits, default = 100)
MaxSpeed:10 // (optional) the maximum speed to pan. (digits, default = 5)
});
/*]]>*/
</script></body>
</html>
or
CMotion Gallery more than once on a page?
Reply With Quote
Happy Days.
It stands for Ginas Is Not A Shop.
Originally Posted by vwphillips
Bookmarks