mouseup is more practical
<!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[*/
.slider {
position:absolute;left:10px;top:200px;width:700px;height:150px;border:solid red 1px;
}
.slider IMG{
position:relative;float:left;cursor:pointer;
}
.sliderV {
position:absolute;left:800px;top:10px;width:200px;height:500px;border:solid red 1px;
}
.sliderV IMG{
position:relative;float:left;cursor:pointer;
}
/*]]>*/
</style>
<script type="text/javascript">
/*<![CDATA[*/
// Fade Zoom Slider. (21-January-2012) DRAFT
// by Vic Phillips - http://www.vicsjavascripts.org.uk/
// Functional Code(4.67K)
function zxcFadeZoomSlider(o){
var oop=this,mde=o.Mode,mde=typeof(mde)=='string'&&mde.charAt(0).toUpperCase()=='V'?['top','offsetHeight','offsetTop','height','left']:['left','offsetWidth','offsetLeft','width','top'],obj=document.getElementById(o.ID),ud=o.ScrollDirection,ms=o.ScrollDuration,mag=o.ZoomBy,z=o.ZoomZIndex,fms=o.ZoomFadeDuration,auto=o.AutoStart,sz=obj[mde[1]],slide=obj.getElementsByTagName('DIV')[0],imgs=slide.getElementsByTagName('IMG'),lst=imgs[imgs.length-1],max,ary=[],clone,img,imgary=[],z0=0,z1=1,z2=0;
obj.style.overflow='hidden';
slide.style.position='absolute';
slide.style[mde[3]]='3000px';
max=lst[mde[2]]+lst[mde[3]];
if (typeof(mag)=='number'){
for (;z0<imgs.length;z0++){
img=document.createElement('IMG');
img.src=imgs[z0].src;
img.style.position='absolute';
img.style.zIndex=isFinite(z*1)?z:'101';
img.style.left='-3000px';
img.style.width=imgs[z0].width*mag/100+'px';
img.style.height=imgs[z0].height*mag/100+'px';
document.body.appendChild(img);
imgary[z0]=img;
oop.opacity(imgs[z0],0);
oop.addevt(img,'mouseout','hide',img);
}
}
clone=slide.cloneNode(true);
ary[0]=[0,imgs];
for (;z1<Math.ceil(sz/max)+1;z1++){
clone=clone.cloneNode(true);
clone.style[mde[0]]=max*z1+'px';
clone.style[mde[4]]='0px';
slide.appendChild(clone);
ary[z1]=[max*z1,clone.getElementsByTagName('IMG')];
}
if (typeof(mag)=='number'){
oop.imgs=imgs;
imgs=slide.getElementsByTagName('IMG');
for (;z2<imgs.length;z2++){
oop.addevt(imgs[z2],'mouseup','zoom',imgs[z2],z2%imgary.length);
}
}
slide.style[mde[0]]=-max+'px';
oop.mde=mde;
oop.obj=slide;
oop.sz=sz;
oop.ary=ary;
oop.imgary=imgary;
oop.max=max;
oop.ud=typeof(ud)=='string'&&ud.charAt(0).toUpperCase()=='C';
oop.scroll=false;
oop.now=oop.ud?-max:0;
oop.ms=typeof(ms)=='number'?ms*1000:sz*20;
oop.fms=typeof(fms)=='number'?fms:1000;
oop.addevt(obj,'mouseover','Pause');
oop.addevt(obj,'mouseout','Auto');
oop.animate(mde[0],oop.obj,oop.now+10,oop.now,new Date(),100,this.dly);
if (auto!=false){
oop.Auto(typeof(auto)=='number'?auto:500);
}
}
zxcFadeZoomSlider.prototype={
Scroll:function(){
var oop=this,to=oop.ud?0:-oop.max,mS=oop.ms*Math.abs((to-oop.now)/(oop.max));
clearTimeout(oop.dly);
oop.scroll=true;
oop.animate(oop.mde[0],oop.obj,oop.now,to,new Date(),mS,this.dly);
},
Pause:function(){
clearTimeout(this.dly);
this.scroll=false;
},
Auto:function(ms){
var oop=this;
clearTimeout(oop.dly);
oop.dly=setTimeout(function(){ oop.Scroll(); },ms||500);
},
animate:function(mde,obj,f,t,srt,mS,to){
var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
if (isFinite(now)){
if (mde!='opacity'){
oop.now=now;
obj.style[mde]=now+'px';
oop.fade();
}
else {
oop.opacity(obj,now);
}
}
if (oop.scroll||mde=='opacity'){
if (ms<mS){
to=setTimeout(function(){ oop.animate(mde,obj,f,t,srt,mS,to); },10);
}
else {
if (mde!='opacity'){
oop.now=oop.ud?-oop.max:0;
oop.Scroll();
}
else if (t==0){
obj.style.left='-3000px';
oop.scroll=true;
oop.Auto();
}
}
}
},
fade:function(){
var oop=this,mde=oop.mde,ary=oop.ary,c=oop.sz/2,imgs,z0=0,z0a,img,lft,w;
for (;z0<ary.length;z0++){
for (var z0a=0;z0a<ary[z0][1].length;z0a++){
img=ary[z0][1][z0a];
w=img[mde[3]];
lft=oop.now+ary[z0][0]+img[mde[2]];
if (lft>-w&&lft<c-w){
oop.opacity(img,(lft+w)/c*100);
}
else if (lft>c&&lft<oop.sz){
oop.opacity(img,100-((lft-c)/c*100));
}
else if (lft>0&&lft<oop.sz){
oop.opacity(img,100);
}
}
}
},
zoom:function(img,nu){
var oop=this,p=oop.pos(img),mimg=oop.imgary[nu];
clearTimeout(oop.dly);
setTimeout(function(){ clearTimeout(oop.dly) },110);
mimg.style.left=p[0]-(mimg.width-img.width)/2+'px';
mimg.style.top=p[1]-(mimg.height-img.height)/2+'px';
oop.scroll=false;
oop.animate('opacity',mimg,5,100,new Date(),oop.fms,oop.to);
},
hide:function(mimg){
this.animate('opacity',mimg,100,0,new Date(),this.fms,this.to);
},
pos:function(obj){
var rtn=[0,0];
while(obj){
rtn[0]+=obj.offsetLeft;
rtn[1]+=obj.offsetTop;
obj=obj.offsetParent;
}
return rtn;
},
opacity:function(obj,o){
obj.style.filter='alpha(opacity='+o+')';
obj.style.opacity=obj.style.MozOpacity=obj.style.WebkitOpacity=obj.style.KhtmlOpacity=o/100-.001;
},
addevt:function(o,t,f,p,p1){
var oop=this;
if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](p,p1,e);}, false);
else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](p,p1,e); });
}
}
/*]]>*/
</script>
<script type="text/javascript">
/*<![CDATA[*/
function Init(){
new zxcFadeZoomSlider({
ID:'tst', // the unique ID name of the slider parent node. (string)
Mode:'horizontal', //(optional) the mode of execution, 'horizontal' or 'verticla'. (string, default = 'horizontal')
ScrollDuration:16, //(optional) the scroll duration in seconds. (number, default = (parent width*20)/1000)
ScrollDirection:'clockwise', //(optional) the scroll dirction, 'anticlockwise' or 'clockwise'. (string, default = 'anticlockwise')
AutoStart:2000, //(optional) the delay before scrolling or false = no auto start (number, default = 500)
ZoomBy:150, //(optional) the percentage zoom of the image. (number, default = no zoom)
ZoomFadeDuration:1000, //(optional) the zoom fade duration in milli seconds. (number, default = 1000)
ZoomZIndex:101 //(optional) the z-Index of the zoom image. (number, default = 101)
});
new zxcFadeZoomSlider({
ID:'tstV',
Mode:'vertical',
ScrollDirection:'anticlockwise',
ZoomBy:150
});
}
if (window.addEventListener){
window.addEventListener('load',Init, false);
}
else if (window.attachEvent){
window.attachEvent('onload',Init);
}
/*]]>*/
</script>
</head>
<body>
<div id="tst" class="slider" >
<div>
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="img" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" alt="img" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg" alt="img" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg" alt="img" />
</div>
</div>
<div id="tstV" class="sliderV" >
<div>
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="img" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" alt="img" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg" alt="img" />
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg" alt="img" />
</div>
</div>
</body>
</html>