PDA

View Full Version : Expando Image Script



maroun_sawma
01-08-2012, 10:05 PM
i am using Expando Image Script with the following url http://www.dynamicdrive.com/dynamicindex4/expandoimage.htm

i used it in asp.net project. everything is working fine

when i used master page and i used this script in a content place holder it doesn't work any idea plz ?

Thank you

vwphillips
01-09-2012, 01:39 PM
<!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[*/

#expand {
width:0px;height:0px;
}

/*]]>*/
</style>

<script type="text/javascript">
/*<![CDATA[*/

function zxcExpand(o){
var lks=document.getElementsByTagName('A'),img,oo,rel,i,z0=0,z0a;
for (;z0<lks.length;z0++){
rel=lks[z0].rel;
img=lks[z0].getElementsByTagName('IMG')[0];
if (rel&&img){
if (rel.match(o.CommonName+';')){
oo={link:lks[z0]};
rel=rel.split(';');
for (var split,z0a=0;z0a<rel.length;z0a++){
i=rel[z0a].indexOf(':');
if (i>1){
oo[rel[z0a].substring(0,i).replace(/\s/g,'').toLowerCase()]=rel[z0a].substring(i+1);
}
}
new zxcExpandOOP(img,o,oo);
}
}
}
}

function zxcExpandOOP(img,o,oo){
var oop=this,mag=oo.magnifyby||o.MagnifyBy,ms=oo.duration||o.Duation,cimg=new Image();
cimg.src=oo.link.href||img.src;
oop.obj=document.getElementById(oo.magnityid)||document.getElementById(o.MagnityID);
oop.cimg=cimg;
oop.img=img;
oop.mag=mag;
oop.ms=ms||1000;
oop.wdly=null;
oop.hdly=null;
oo.link.removeAttribute('href');
img.onmouseover=function(){ oop.expand(true); }
img.onmouseout=function(){ oop.expand(false); }
}

zxcExpandOOP.prototype={

expand:function(ud){
var oop=this,w=oop.img.width*oop.mag,h=oop.img.height*oop.mag,ow=oop.obj.width,oh=oop.obj.height;
clearTimeout(oop.wdly);
clearTimeout(oop.hdly);
oop.obj.src=oop.cimg.src;
oop.animate('width',ud?0:ow,ud?w:0,new Date(),oop.wdly);
oop.animate('height',ud?0:oh,ud?h:0,new Date(),oop.hdly);
},

animate:function(mde,f,t,srt,dly){
var oop=this,obj=oop.obj,ms=new Date().getTime()-srt,now=(t-f)/oop.ms*ms+f;
if (isFinite(now)&&now>=0){
obj.style[mde]=now+'px';
}
if (ms<oop.ms){
dly=setTimeout(function(){ oop.animate(mde,f,t,srt,dly); },10);
}
else {
obj.style[mde]=t+'px';
}
}

}


/*]]>*/
</script>
<script type="text/javascript">
/*<![CDATA[*/

function Init(){
zxcExpand({
CommonName:'magnify'
});
}

if (window.addEventListener){
window.addEventListener('load',Init, false);
}
else if (window.attachEvent){
window.attachEvent('onload',Init);
}

/*]]>*/
</script>


</head>

<body>
<a src="http://www.vicsjavascripts.org.uk/StdImages/WinterPalace.jpg" rel="magnify; MagnityID:expand; MagnifyBy:3; Duration:1000; " >
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt12.jpg" />
</a>
<a rel="magnify; MagnityID:expand; MagnifyBy:2; Duration:500; " >
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" />
</a>
<br />
<img id="expand" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" />

</body>

</html>