Cargar Zoom dentro de Ventana emergente.

[Anna Carolina]

A continuacion este es el JQUERY Efecto Lupa o Zoom

Código:

// TJPzoom 3 * Janos P Toth
// 2007.07.12
// 2011.03.24 firefox 4 apparently has a style.filter attribute (which i didn't expect in 2007)
// Docs @ http://valid.tjp.hu/tjpzoom/ 
// News @ http://blog.tjp.hu/

function TJPzoomswitch(obj) {
 TJPon[obj]=((TJPon[obj])?(0):(1));
 return TJPon[obj];
}

function TJPzoomif(obj,highres) {
 if(TJPon[obj]) {TJPzoom(obj,highres);}
}

function TJPzoom(obj,highres) {
 TJPzoomratio=TJPzoomheight/TJPzoomwidth;
 if(TJPzoomoffsetx > 1) {
  TJPzoomoffset='dumb';
  TJPzoomoffsetx=TJPzoomoffsetx/TJPzoomwidth;
  TJPzoomoffsety=TJPzoomoffsety/TJPzoomheight;
 }
 if(!obj.style.width) {
  if(obj.width > 0) {
   //educated guess
   obj.style.width=obj.width+'px';
   obj.style.height=obj.height+'px';
  }
 }
 if(typeof(highres) != typeof('')) {highres=obj.src}
 var TJPstage=document.createElement("div");
 TJPstage.style.width=obj.style.width;
 TJPstage.style.height=obj.style.height;
 TJPstage.style.overflow='hidden';
 TJPstage.style.position='absolute';
 if(typeof(TJPstage.style.filter) != typeof(nosuchthing)) {
  //hi IE
  if((navigator.appVersion + '').indexOf('Mac') == -1 && navigator.appName == 'Microsoft Internet Explorer') { //Mac IE gets out
   TJPstage.style.filter='alpha(opacity=0)';
   TJPstage.style.backgroundColor='#ffffff';
  }
 } else {
  //hi decent gentlemen
  TJPstage.style.backgroundImage='transparent';
 }
 TJPstage.setAttribute('onmousemove','TJPhandlemouse(event,this);');
 TJPstage.setAttribute('onmousedown','TJPhandlemouse(event,this);');
 TJPstage.setAttribute('onmouseup','TJPhandlemouse(event,this);');
 TJPstage.setAttribute('onmouseout','TJPhandlemouse(event,this);');
 if(navigator.userAgent.indexOf('MSIE')>-1) {
  TJPstage.onmousemove = function() {TJPhandlemouse(event,this);}
  TJPstage.onmousedown = function() {TJPhandlemouse(event,this);}
  TJPstage.onmouseup = function() {TJPhandlemouse(event,this);}
  TJPstage.onmouseout = function() {TJPhandlemouse(event,this);}
 }
 obj.parentNode.insertBefore(TJPstage,obj);
 
 TJPwin=document.createElement("div");
 TJPwin.style.width='0px';
 TJPwin.style.height='0px';
 TJPwin.style.overflow='hidden';
 TJPwin.style.position='absolute';
 TJPwin.style.display='none';
 tw1='<div style="position:absolute;overflow:hidden;margin:';
 TJPwin.innerHTML= 
 tw1+TJPshadowthick+'px 0 0 '+TJPshadowthick+'px; background-color:'+TJPbordercolor+'; width:'+(TJPzoomwidth-TJPshadowthick*2)+'px;height:'+(TJPzoomheight-TJPshadowthick*2)+'px"></div>' +
 tw1+(TJPshadowthick+TJPborderthick)+'px 0 0 '+(TJPshadowthick+TJPborderthick)+'px; width:'+(TJPzoomwidth-TJPshadowthick*2-TJPborderthick*2)+'px;height:'+(TJPzoomheight-TJPshadowthick*2-TJPborderthick*2)+'px;"><img src="'+obj.src+'" style="position:absolute;margin:0;padding:0;border:0; width:'+(TJPzoomamount*parseInt(obj.style.width))+'px;height:'+(TJPzoomamount*parseInt(obj.style.height))+'px;" />'+((obj.src!=highres)?('<img src="'+highres+'" style="position:absolute;margin:0;padding:0;border:0; width:'+(TJPzoomamount*parseInt(obj.style.width))+'px;height:'+(TJPzoomamount*parseInt(obj.style.height))+'px;" onload="if(this.parentNode) {this.parentNode.parentNode.getElementsByTagName(\'div\')[2].style.display=\'none\';}" />'):(''))+'</div>';
 if(highres != obj.src) {
  TJPwin.innerHTML+='<div style="position:absolute; margin:'+(TJPshadowthick+TJPborderthick)+'px 0 0 '+(TJPshadowthick+TJPborderthick)+'px;">'+TJPloading+'</div>';
 }
 if(TJPshadowthick>0) {
  st1='<span style="position:absolute; display:inline-block; margin: ';
  st2='filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=\'scale\',src='
  st3='filter:alpha(opacity=0);margin:0;padding:0;border:0;"/></span>';
  TJPwin.innerHTML+=
  st1+'0 0 0 0    ; width:'+TJPshadowthick*2+'px; height:'+TJPshadowthick*2+'px;'+st2+'\''+TJPshadow+'nw.png\')"><img src="'+TJPshadow+'nw.png" style="width:'+TJPshadowthick*2+'px; height:'+TJPshadowthick*2+'px;'+st3 +
  st1+'0 0 0 '+(TJPzoomwidth-TJPshadowthick*2)+'px; width:'+TJPshadowthick*2+'px; height:'+TJPshadowthick*2+'px;'+st2+'\''+TJPshadow+'ne.png\')"><img src="'+TJPshadow+'ne.png" style="width:'+TJPshadowthick*2+'px; height:'+TJPshadowthick*2+'px;'+st3 +
  st1+''+(TJPzoomheight-TJPshadowthick*2)+'px 0 0 0px; width:'+TJPshadowthick*2+'px; height:'+TJPshadowthick*2+'px;'+st2+'\''+TJPshadow+'sw.png\',sizingMethod=\'scale\')"><img src="'+TJPshadow+'sw.png" style="width:'+TJPshadowthick*2+'px; height:'+TJPshadowthick*2+'px;'+st3 +
  st1+''+(TJPzoomheight-TJPshadowthick*2)+'px 0 0 '+(TJPzoomwidth-TJPshadowthick*2)+'px; width:'+TJPshadowthick*2+'px; height:'+TJPshadowthick*2+'px;'+st2+'\''+TJPshadow+'se.png\',sizingMethod=\'scale\')"><img src="'+TJPshadow+'se.png" style="width:'+TJPshadowthick*2+'px; height:'+TJPshadowthick*2+'px;'+st3 +
  
  st1+'0 0 0 '+(TJPshadowthick*2)+'px; width:'+(TJPzoomwidth-TJPshadowthick*4)+'px; height:'+TJPshadowthick*2+'px;'+st2+'\''+TJPshadow+'n.png\',sizingMethod=\'scale\')"><img src="'+TJPshadow+'n.png" style="width:'+(TJPzoomwidth-TJPshadowthick*4)+'px; height:'+TJPshadowthick*2+'px;'+st3 +
  st1+''+(TJPshadowthick*2)+'px 0 0 0; width:'+(TJPshadowthick*2)+'px; height:'+(TJPzoomheight-TJPshadowthick*4)+'px;'+st2+'\''+TJPshadow+'w.png\',sizingMethod=\'scale\')"><img src="'+TJPshadow+'w.png" style="width:'+(TJPshadowthick*2)+'px; height:'+(TJPzoomheight-TJPshadowthick*4)+'px;'+st3 +
  st1+''+(TJPshadowthick*2)+'px 0 0 '+(TJPzoomwidth-TJPshadowthick*2)+'px; width:'+(TJPshadowthick*2)+'px; height:'+(TJPzoomheight-TJPshadowthick*4)+'px;'+st2+'\''+TJPshadow+'e.png\',sizingMethod=\'scale\')"><img src="'+TJPshadow+'e.png" style="width:'+(TJPshadowthick*2)+'px; height:'+(TJPzoomheight-TJPshadowthick*4)+'px;'+st3 +
  st1+''+(TJPzoomheight-TJPshadowthick*2)+'px 0 0 '+(TJPshadowthick*2)+'px; width:'+(TJPzoomwidth-TJPshadowthick*4)+'px; height:'+TJPshadowthick*2+'px;'+st2+'\''+TJPshadow+'s.png\',sizingMethod=\'scale\')"><img src="'+TJPshadow+'s.png" style="width:'+(TJPzoomwidth-TJPshadowthick*4)+'px; height:'+TJPshadowthick*2+'px;'+st3;
 }
 ;
 //marker - zoomer
 obj.parentNode.insertBefore(TJPwin,TJPstage);

 TJPresize(obj);
}

function TJPresize(obj) {
 sbr=0; sbl=0;
 if(TJPzoomwidth-2*TJPborderthick-3*TJPshadowthick < 22) {sbr=1}
 if(TJPzoomheight-2*TJPborderthick-3*TJPshadowthick < 22) {sbr=1}
 if(TJPzoomwidth > parseFloat(obj.style.width)) {sbl=1;}
 if(TJPzoomheight > parseFloat(obj.style.height)) {sbl=1}
 
 if(sbr==1 && sbl == 1) {
  TJPzoomwidth=parseFloat(obj.style.width)/2;
  TJPzoomheight=parseFloat(obj.style.height)/2;
  TJPzoomratio=TJPzoomheight/TJPzoomwidth;
 }

 if(sbr==1) {
  if(TJPzoomwidth<TJPzoomheight) {
   TJPzoomheight=TJPzoomheight/TJPzoomwidth*(22+2*TJPborderthick+3*TJPshadowthick); TJPzoomwidth=22+2*TJPborderthick+3*TJPshadowthick;
  } else {
   TJPzoomwidth=TJPzoomwidth/TJPzoomheight*(22+2*TJPborderthick+3*TJPshadowthick); TJPzoomheight=22+2*TJPborderthick+3*TJPshadowthick;
  }
 }
 

 if(sbl==1) {
  if(parseFloat(obj.style.width)/parseFloat(obj.style.height) > TJPzoomwidth/TJPzoomheight) {
   TJPzoomheight=parseFloat(obj.style.height);
   TJPzoomwidth=TJPzoomheight/TJPzoomratio;
  } else {
   TJPzoomwidth=parseFloat(obj.style.width);
   TJPzoomheight=TJPzoomratio*TJPzoomwidth;
  }
 }

 TJPzoomwidth=Math.floor(TJPzoomwidth/2)*2;
 TJPzoomheight=Math.floor(TJPzoomheight/2)*2;

 ww=obj.parentNode.getElementsByTagName('div')[0];
 ww.style.width=TJPzoomwidth+'px';
 ww.style.height=TJPzoomheight+'px';
 w=ww.getElementsByTagName('div')[0];
 w.style.width=TJPzoomwidth-TJPshadowthick*2+'px';
 w.style.height=TJPzoomheight-TJPshadowthick*2+'px';
 w=ww.getElementsByTagName('div')[1];
 w.style.width=TJPzoomwidth-TJPshadowthick*2-TJPborderthick*2+'px';
 w.style.height=TJPzoomheight-TJPshadowthick*2-TJPborderthick*2+'px';
 if(TJPshadowthick > 0) {
  w=ww.getElementsByTagName('span')[1]; w.style.margin='0 0 0 '+(TJPzoomwidth-TJPshadowthick*2)+'px';
  w=ww.getElementsByTagName('span')[2]; w.style.margin=(TJPzoomheight-TJPshadowthick*2)+'px 0 0 0px';
  w=ww.getElementsByTagName('span')[3]; w.style.margin=(TJPzoomheight-TJPshadowthick*2)+'px 0 0 '+(TJPzoomwidth-TJPshadowthick*2)+'px';

  w=ww.getElementsByTagName('span')[6]; w.style.margin=(TJPshadowthick*2)+'px 0 0 '+(TJPzoomwidth-TJPshadowthick*2)+'px';
  w=ww.getElementsByTagName('span')[7]; w.style.margin=(TJPzoomheight-TJPshadowthick*2)+'px 0 0 '+(TJPshadowthick*2)+'px';

  www=(TJPzoomwidth-TJPshadowthick*4)+'px';
  w=ww.getElementsByTagName('span')[4]; w.style.width=www;
  w=w.getElementsByTagName('img')[0]; w.style.width=www;
  w=ww.getElementsByTagName('span')[7]; w.style.width=www;
  w=w.getElementsByTagName('img')[0]; w.style.width=www;
  
  www=(TJPzoomheight-TJPshadowthick*4)+'px';
  w=ww.getElementsByTagName('span')[5]; w.style.height=www;
  w=w.getElementsByTagName('img')[0]; w.style.height=www;
  w=ww.getElementsByTagName('span')[6]; w.style.height=www;
  w=w.getElementsByTagName('img')[0]; w.style.height=www;
 }
}