I want to have an imageslider similair to the one used on this WP theme. http://theme.crumina.net/index.php?theme=onetouch
Anyone have any tips? I don’t want it to be a WP plugin tho.
I want to have an imageslider similair to the one used on this WP theme. http://theme.crumina.net/index.php?theme=onetouch
Anyone have any tips? I don’t want it to be a WP plugin tho.
<!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[*/
.wrapper {
position:absolute;left:200px;top:100px;width:300px;height:226px;border:solid red 1px;
}
.wrapper IMG {
position:absolute;left:-26px;top:-18px;width:300px;height:226px;
}
.mask {
position:absolute;left:0px;top:26px;width:300px;height:226px;background-Color:#FFFFCC;
/* Moz */
opacity: .5;
/* IE5-7 */
filter: alpha(opacity=50);
/* IE8 */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}
/*]]>*/
</style></head>
<body>
<div id="i1" class="wrapper" >
<img src="http://www.vicsjavascripts.org.uk/StdImages/WinterPalace.jpg" alt="img" />
<div class="mask" ></div>
</div>
<script type="text/javascript">
/*<![CDATA[*/
function zxcZoom(o){
var obj=document.getElementById(o.ID),z=o.Zoom,ms=o.Speed,i=obj?obj.getElementsByTagName('IMG')[0]:null;
if (obj&&i){
var msk=obj.getElementsByTagName('DIV')[0],msk=msk?msk:obj.cloneNode(false),w=obj.offsetWidth,h=obj.offsetHeight,z=typeof(z)=='number'?z/100:110,z=Math.max(z,1),ms=typeof(ms)=='number'&&ms>0?ms:1000;
obj.style.overflow='hidden';
i.style.position='absolute';
i.style.left='0px';
i.style.top='0px';
i.style.width=w+'px';
i.style.height=h+'px';
msk.style.position='absolute';
msk.style.top=h+'px';
this.ary=[[i,'width',w,Math.round(w*z),w],[i,'height',h,Math.round(h*z),h],[i,'left',0,Math.round((w-w*z)/2),0],[i,'top',0,Math.round((h-h*z)/2),0],[msk,'top',h,0,h]];
this.ms=ms;
this.addevt(obj,'mouseover','Zoom',true);
this.addevt(obj,'mouseout','Zoom',false);
}
}
zxcZoom.prototype={
Zoom:function(ud){
var o=this,a=o.ary,ms=o.ms*Math.abs((o.ary[0][4]-a[0][ud?3:2])/(a[0][2]-a[0][3])+.001)+20,d=new Date(),z0=0;
for (;z0<5;z0++){
o.animate(a[z0],a[z0][4],a[z0][ud?3:2],d,ms);
}
},
animate:function(a,f,t,srt,mS){
clearTimeout(a[5]);
var oop=this,ms=new Date().getTime()-srt,n=(t-f)/mS*ms+f;
if (isFinite(n)){
a[4]=Math.round(n);
a[0].style[a[1]]=a[4]+'px';
}
if (ms<mS){
a[5]=setTimeout(function(){ oop.animate(a,f,t,srt,mS); },10);
}
else {
a[4]=t;
a[0].style[a[1]]=t+'px';
}
},
addevt:function(o,t,f,p){
var oop=this;
if (o.addEventListener){
o.addEventListener(t,function(e){ return oop[f](p);}, false);
}
else if (o.attachEvent){
o.attachEvent('on'+t,function(e){ return oop[f](p); });
}
}
}
new zxcZoom({
ID:'i1',
Zoom:110,
Speed:1000
});
/*]]>*/
</script>
</body>
</html>