Foros del Web » Programando para Internet » Javascript » Frameworks JS »

Cargar Zoom dentro de Ventana emergente.

Estas en el tema de Cargar Zoom dentro de Ventana emergente. en el foro de Frameworks JS en Foros del Web. Tengo lo siguiente, es que tengo el detalle de producto el cual tiene imagenes e imagen principal, la cual al hacer clic se abre una ...
  #1 (permalink)  
Antiguo 09/05/2011, 12:21
 
Fecha de Ingreso: febrero-2007
Ubicación: Caracas
Mensajes: 148
Antigüedad: 17 años, 1 mes
Puntos: 6
Cargar Zoom dentro de Ventana emergente.

Tengo lo siguiente, es que tengo el detalle de producto el cual tiene imagenes e imagen principal, la cual al hacer clic se abre una ventana (galeria) en JQUERY, donde necesito el efecto lupa adentro del recuadro o ventena emergente.

Aqui les muestro el Codigo

Código HTML:
<head>
<script type="text/javascript" src="tjpzoom.js"</script>
</script>
</head>

<?php

	if($_GET[id]) {

		$query = mysql_query("SELECT p.CodigoProducto, p.Descripcion, p.DescripcionInterna, p.Referencia, p.PrecioUnitario1, l.Descripcion as linea, p.CodigoLinea, p.CodigoFamilia, f.Descripcion as familia FROM vwProductosWeb p, Lineas l, FamiliaProductos f WHERE p.CodigoProducto='" . $_GET[id] . "' AND p.CodigoLinea=l.CodigoLinea AND p.CodigoFamilia=f.CodigoFamilia",$db);
		$row = mysql_fetch_row($query); 

		$data_id = $row[0];		
		$data_titulo = $row[1];		
		$data_interna = $row[2];			
		$data_referencia = $row[3];					
		$data_precio = $row[4];	
		$data_linea = $row[5];				
		$data_codigolinea = $row[6];		
		$data_codigofamilia = $row[7];
		$data_familia = $row[8];		

		$cual = array_search($data_codigofamilia, $data_categorias[id]);	
		$data_color = $data_categorias[color][$cual];		

		setlocale(LC_MONETARY, 'es_VE');		
		
	}


?>
<div class="cabeza" style="background-color: <?php echo $data_color; ?> !important"><a href="/proyectocrossh/catalogo.php?pag=catalogo&categoria=<?php echo $data_codigofamilia; ?>"><?php echo $data_familia; ?></a>: <a href="/proyectocrossh/catalogo.php?pag=catalogo&categoria=<?php echo $data_codigofamilia; ?>&linea=<?php echo $data_codigolinea; ?>"><?php echo $data_linea; ?></a></div>
<div class="detalle">
<table width='675' cellpadding='0' cellspacing='0'>
<tr valign='top'><td width='360' align='center'><?php

	if(file_exists($_SERVER[DOCUMENT_ROOT] . "/proyectocrossh/img/productos/1-" . $data_id . ".jpg")) {

	
		echo "<div style='position:absolute;'><img src='/proyectocrossh/img/productos/1-" . $data_id . ".jpg' alt='" . $data_titulo . "' border='0' width='360' height='361' onmouseover='TJPzoom(this);'style='border:0;padding:0;'/></div>";
		
	}
	else
	{
		echo "<img src='/proyectocrossh/img/trans.gif' alt='" . $data_titulo . "' border='0' width='360' height='361' /></div>";
	}
	
?></td><td><div class='descripcion'>
<h1><?php echo ucwords(strtolower($data_titulo)) ; ?></h1>
<h2>Nº Referencia: <?php echo $data_referencia; ?></h2>
<p><?php echo $data_interna; ?></p>
<h3>Precio:<?php /*?><?php echo money_format('%.2n', $data_precio);?><?php */?></h3>
</div>
<div class='galeria' style="text-align: center; padding: 10px 10px 10px 10px;" >

<?php

	for($a=2; $a<=10; $a++) {
	
		if(file_exists($_SERVER[DOCUMENT_ROOT] . "/proyectocrossh/img/productos/" . $a . "-" . $data_id . ".jpg")) {

			if((!(file_exists($_SERVER[DOCUMENT_ROOT] . "/proyectocrossh/img/productos/t-" . $a . "-" . $data_id . ".jpg"))) OR (filemtime($_SERVER[DOCUMENT_ROOT] . "/proyectocrossh/img/productos/t-" . $a . "-" . $data_id . ".jpg")<($timestamp-18000)))  {

				@cropImage(100, 111,$_SERVER[DOCUMENT_ROOT] . "/proyectocrossh/img/productos/" . $a . "-" . $data_id . ".jpg", "jpg",$_SERVER[DOCUMENT_ROOT] . "/proyectocrossh/img/productos/t-" . $a . "-" . $data_id . ".jpg");

			}		

			echo "<a href='/proyectocrossh/img/productos/" . $a . "-" . $data_id . ".jpg' title='" . $data_titulo  . "' class='cpModal' rel='galeria'><img src='/proyectocrossh/img/productos/t-" . $a . "-" . $data_id . ".jpg' alt='" . $data_titulo . "' border='0' vspace='3' hspace='3' bgcolor='#FFFFFF' /></a>";
			
		}
	
	}
	
?>

</div>

<div><?php echo "<form name='votos' action='voto.php' method='POST'><input type='hidden' name='CodigoProducto' value='".$data_id."'><button name='MeGusta' type='submit'  value='MeGusta'><img src='/proyectocrossh/img/megusta.jpg' width='20' height='20'/></button></form>";?>
</div>
</td></tr></table>

</div>

<?php
	
	$queryproductos = mysql_query("SELECT * FROM vwProductosWeb WHERE CodigoProducto in (SELECT ProductoRelacionado from ProductosRelacionados WHERE CodigoProducto='" . $data_id  . "')",$db);

	unset($a);
	
	if (mysql_num_rows($queryproductos)>0) {
	
		echo "<div class=\"otras\">Otras opciones disponibles</div>
<table cellpadding=\"3\" cellspacing=\"0\" width=\"700\" class=\"catalogo_tabla\">";
	
		while($row = mysql_fetch_array($queryproductos)) {	
			
			$a++;
			
			if($a==1) {
				echo "<tr valign='top'>";
			}
			
			if(file_exists($_SERVER[DOCUMENT_ROOT] . "/proyectocrossh/img/productos/1-" . $row[CodigoProducto] . ".jpg")) {
						
				if((!(file_exists($_SERVER[DOCUMENT_ROOT] . "/proyectocrossh/img/productos/t-" . $row[CodigoProducto] . ".jpg"))) OR (filemtime($_SERVER[DOCUMENT_ROOT] . "/proyectocrossh/img/productos/t-" . $row[CodigoProducto] . ".jpg")<($timestamp-18000))) {
				
					@cropImage(135, 150,$_SERVER[DOCUMENT_ROOT] . "/proyectocrossh/img/productos/1-" . $row[CodigoProducto] . ".jpg", "jpg",$_SERVER[DOCUMENT_ROOT] . "/proyectocrossh/img/productos/t-" . $row[CodigoProducto] . ".jpg");
			
				}
				
				$imagen = "/proyectocrossh/img/productos/t-" . $row[CodigoProducto] . ".jpg";
				
			}
			else
			{
			
				$imagen = "/proyectocrossh/img/trans.gif";

			}
			
			
			echo "<td width='280' align='left'><div class='catalogo_descripcion'><h1>" . ucwords(strtolower($row[Descripcion])) . "</h1><h2>COD " . $row[CodigoProducto] . "</h2><a href='/proyectocrossh/?pag=detalle&id=" . $row[CodigoProducto] . "'>Ver Detalle</a></div><a href='/proyectocrossh/?pag=detalle&id=" . $row[CodigoProducto] . "'><img src='" . $imagen . "' border='0' alt='" . $row[Descripcion] . "' /></a></td>\n";
			
			if($a==3) {
				unset($a);
				echo "</tr>";
			}
					
		
		}
		
		if($a!=3) {
		
			for ($a=($a+1); $a<=3; $a++) {
			
				echo "<td width='280' align='left'>&nbsp;</td>";
			
			}
			
			unset($a);
			echo "</tr>";		
			
		}
		
		echo "</table>";
		
	}	
?>
<div class="pie">Precios y disponibilidad están sujetos a cambios sin previo aviso, contáctenos directamente para verificar la existencia del producto deseado.</div>

  #2 (permalink)  
Antiguo 09/05/2011, 12:24
 
Fecha de Ingreso: febrero-2007
Ubicación: Caracas
Mensajes: 148
Antigüedad: 17 años, 1 mes
Puntos: 6
Respuesta: Cargar Zoom dentro de Ventana emergente.

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;
 }
}
  #3 (permalink)  
Antiguo 09/05/2011, 12:25
 
Fecha de Ingreso: febrero-2007
Ubicación: Caracas
Mensajes: 148
Antigüedad: 17 años, 1 mes
Puntos: 6
Respuesta: Cargar Zoom dentro de Ventana emergente.

Código:
function TJPfindposy(obj) {
 var curtop = 0;
 if(!obj) {return 0;}
 if (obj.offsetParent) {
  while (obj.offsetParent) {
   curtop += obj.offsetTop
   obj = obj.offsetParent;
  }
 } else if (obj.y) {
  curtop += obj.y;
 }
 return curtop;
}

function TJPfindposx(obj) {
 var curleft = 0;
 if(!obj) {return 0;}
 if (obj && obj.offsetParent) {
  while (obj.offsetParent) {
   curleft += obj.offsetLeft
   obj = obj.offsetParent;
  }
 } else if (obj.x) {
  curleft += obj.x;
 }
 return curleft;
}


function TJPhandlemouse(evt,obj) {
 var evt = evt?evt:window.event?window.event:null; if(!evt) { return false; }
 if(evt.pageX) {
  nowx=evt.pageX-TJPfindposx(obj)-TJPadjustx;
  nowy=evt.pageY-TJPfindposy(obj)-TJPadjusty;
 } else {
  if(document.documentElement && document.documentElement.scrollTop) {
   nowx=evt.clientX+document.documentElement.scrollLeft-TJPfindposx(obj)-TJPadjustx;
   nowy=evt.clientY+document.documentElement.scrollTop-TJPfindposy(obj)-TJPadjusty;
  } else {
   nowx=evt.x+document.body.scrollLeft-TJPfindposx(obj)-TJPadjustx;
   nowy=evt.y+document.body.scrollTop-TJPfindposy(obj)-TJPadjusty;
  }
 }
 if(evt.type == 'mousemove') {
  TJPsetwin(obj,nowx,nowy);
 } else if(evt.type == 'mousedown') {
  TJPmouse=1; //left: 1, middle: 2, right: 3
  TJPmousey=nowy;
  TJPmousex=nowx;
 } else if(evt.type =='mouseup') {
  TJPmouse=0;
 } else if(evt.type =='mouseout') {
  TJPmouse=0;
  if(navigator.appVersion.indexOf('Mac') == -1 || navigator.appVersion.indexOf('MSIE') == -1) { //hi Mac IE
   x=obj.parentNode;
   x.removeChild(x.getElementsByTagName('div')[0]);
   x.removeChild(x.getElementsByTagName('div')[0]);
  }
 }
}


// TJPzoom 3 * János Pál Tóth
// Docs @ http://valid.tjp.hu/tjpzoom/ 
// News @ http://tjpzoom.blogspot.com/


function TJPsetwin(obj,nowx,nowy) {
 obj.parentNode.getElementsByTagName('div')[0].style.display='block';
 if(TJPzoomoffset=='smart') {
  TJPzoomoffsetx=.1+.8*nowx/parseFloat(obj.style.width);
  TJPzoomoffsety=.1+.8*nowy/parseFloat(obj.style.height);
 }

 stage=obj.parentNode.getElementsByTagName('div')[0];
 if(TJPmouse == 1) {
  if(Math.abs(nowy-TJPmousey) >= 1) {
   TJPzoomamount*=((nowy>TJPmousey)?(0.909):(1.1));
   TJPmousey=nowy;
   if(TJPzoomamount < TJPzoomamountmin) {TJPzoomamount=TJPzoomamountmin;}
   if(TJPzoomamount > TJPzoomamountmax) {TJPzoomamount=TJPzoomamountmax;}
   stage.getElementsByTagName('div')[1].getElementsByTagName('img')[0].style.width=  parseInt(obj.style.width)*TJPzoomamount+'px';
   stage.getElementsByTagName('div')[1].getElementsByTagName('img')[0].style.height=  parseInt(obj.style.height)*TJPzoomamount+'px';
   if(stage.getElementsByTagName('div')[1].getElementsByTagName('img')[1]) {
    stage.getElementsByTagName('div')[1].getElementsByTagName('img')[1].style.width= stage.getElementsByTagName('div')[1].getElementsByTagName('img')[0].style.width;
    stage.getElementsByTagName('div')[1].getElementsByTagName('img')[1].style.height= stage.getElementsByTagName('div')[1].getElementsByTagName('img')[0].style.height;
   }
  }
  if(Math.abs(nowx-TJPmousex) >= 12 && TJPzoomwindowlock==0) {
   TJPzoomwidth*=((nowx>TJPmousex)?(1.1):(0.909));
   TJPzoomheight=TJPzoomwidth*TJPzoomratio;
   TJPresize(obj);
   TJPmousex=nowx;
  }
 }
 stage.style.marginLeft=nowx-(TJPzoomwidth -2*TJPborderthick-2*TJPshadowthick)*TJPzoomoffsetx-TJPborderthick-TJPshadowthick+'px';
 stage.style.marginTop= nowy-(TJPzoomheight-2*TJPborderthick-2*TJPshadowthick)*TJPzoomoffsety-TJPborderthick-TJPshadowthick+'px';
 clip1=0; clip2=TJPzoomwidth; clip3=TJPzoomheight; clip4=0;
 nwidth=TJPzoomwidth; nheight=TJPzoomheight;
 tmp=(1-2*TJPzoomoffsetx)*(TJPborderthick+TJPshadowthick);
 
 if(nowx-TJPzoomwidth*TJPzoomoffsetx < tmp) {
  clip4=TJPzoomwidth*TJPzoomoffsetx-nowx + tmp;
 } else if(parseFloat(nowx-TJPzoomwidth*TJPzoomoffsetx+TJPzoomwidth) > parseFloat(obj.style.width)+tmp) {
  clip2= TJPzoomwidth*TJPzoomoffsetx - nowx + parseFloat(obj.style.width)+tmp;
  nwidth=TJPzoomwidth*TJPzoomoffsetx-nowx+parseInt(obj.style.width)+TJPborderthick+TJPshadowthick;
 }
 
 tmp=(1-2*TJPzoomoffsety)*(TJPborderthick+TJPshadowthick);
 
 if(nowy-TJPzoomheight*TJPzoomoffsety < tmp) {
  clip1=TJPzoomheight*TJPzoomoffsety-nowy+tmp;
 } else if(parseFloat(nowy-TJPzoomheight*TJPzoomoffsety+TJPzoomheight) > parseFloat(obj.style.height)+tmp) {
  clip3= TJPzoomheight*TJPzoomoffsety - nowy + parseFloat(obj.style.height)+tmp;
  nheight=TJPzoomheight*TJPzoomoffsety - nowy + parseFloat(obj.style.height)+TJPborderthick+TJPshadowthick;
 }
 stage.style.width=nwidth+'px';
 stage.style.height=nheight+'px';

 stage.style.clip='rect('+clip1+'px,'+clip2+'px,'+clip3+'px,'+clip4+'px)';

 if(nowy-TJPzoomoffsety*(TJPzoomheight-2*TJPborderthick-2*TJPshadowthick) < 0) { t=-(nowy-TJPzoomoffsety*(TJPzoomheight-2*TJPborderthick-2*TJPshadowthick))} 
 else if(nowy-TJPzoomoffsety*(TJPzoomheight-2*TJPborderthick-2*TJPshadowthick) > parseFloat(obj.style.height)-TJPzoomheight+TJPborderthick*2+TJPshadowthick*2) { t=-TJPzoomamount*parseFloat(obj.style.height)+TJPzoomheight-TJPborderthick*2-TJPshadowthick*2-((nowy-TJPzoomoffsety*(TJPzoomheight-2*TJPborderthick-2*TJPshadowthick))-(parseFloat(obj.style.height)-TJPzoomheight+TJPborderthick*2+TJPshadowthick*2)); }
 else { t=(-TJPzoomamount*parseFloat(obj.style.height)+TJPzoomheight-TJPborderthick*2-TJPshadowthick*2)/(parseFloat(obj.style.height)-TJPzoomheight+TJPborderthick*2+TJPshadowthick*2)*(nowy-TJPzoomoffsety*(TJPzoomheight-2*TJPborderthick-2*TJPshadowthick)) }
 stage.getElementsByTagName('div')[1].getElementsByTagName('img')[0].style.marginTop=t+'px';

 if(stage.getElementsByTagName('div')[1].getElementsByTagName('img')[1]) {
  stage.getElementsByTagName('div')[1].getElementsByTagName('img')[1].style.marginTop=t+'px';
 }

 if(nowx-TJPzoomoffsetx*(TJPzoomwidth-2*TJPborderthick-2*TJPshadowthick) < 0) { t=-(nowx-TJPzoomoffsetx*(TJPzoomwidth-2*TJPborderthick-2*TJPshadowthick))} 
 else if(nowx-TJPzoomoffsetx*(TJPzoomwidth-2*TJPborderthick-2*TJPshadowthick) > parseFloat(obj.style.width)-TJPzoomwidth+TJPborderthick*2+TJPshadowthick*2) { t=-TJPzoomamount*parseFloat(obj.style.width)+TJPzoomwidth-TJPborderthick*2-TJPshadowthick*2-((nowx-TJPzoomoffsetx*(TJPzoomwidth-2*TJPborderthick-2*TJPshadowthick))-(parseFloat(obj.style.width)-TJPzoomwidth+TJPborderthick*2+TJPshadowthick*2)); }
 else { t=(-TJPzoomamount*parseFloat(obj.style.width)+TJPzoomwidth-TJPborderthick*2-TJPshadowthick*2)/(parseFloat(obj.style.width)-TJPzoomwidth+TJPborderthick*2+TJPshadowthick*2)*(nowx-TJPzoomoffsetx*(TJPzoomwidth-2*TJPborderthick-2*TJPshadowthick)) }
 stage.getElementsByTagName('div')[1].getElementsByTagName('img')[0].style.marginLeft=t+'px';

 if(stage.getElementsByTagName('div')[1].getElementsByTagName('img')[1]) {
  stage.getElementsByTagName('div')[1].getElementsByTagName('img')[1].style.marginLeft=t+'px';
 }
}

function TJPinit() {
 TJPadjustx=0; TJPadjusty=0;
 if(navigator.userAgent.indexOf('MSIE')>-1) {TJPadjustx=2;TJPadjusty=2;}
 if(navigator.userAgent.indexOf('Opera')>-1) {TJPadjustx=0; TJPadjusty=0;}
 if(navigator.userAgent.indexOf('Safari')>-1) {TJPadjustx=1; TJPadjusty=2;}
}

// configuration - do not modify the following, instead read the behaviors.html file in the tutorial!
var TJPon=new Array();
var TJPadjustx,TJPadjusty;
var TJPmouse=0; var TJPmousey; var TJPmousex;
var TJPloading='<div style="background-color: #ffeb77; color: #333333; padding:2px; font-family: verdana,arial,helvetica; font-size: 10px;">Loading...</div>';

var TJPzoomwidth=160;
var TJPzoomheight=120;
var TJPzoomratio;
var TJPzoomwindowlock=0;

var TJPzoomoffsetx=.5;
var TJPzoomoffsety=.5;
var TJPzoomoffset;

var TJPzoomamount=4;
var TJPzoomamountmax=12;
var TJPzoomamountmin=1;

var TJPborderthick=2;
var TJPbordercolor='#888888';

var TJPshadowthick=8;
var TJPshadow='dropshadow/';

TJPinit();

// TJPzoom 3 * János Pál Tóth
// Docs @ http://valid.tjp.hu/tjpzoom/ 
// News @ http://tjpzoom.blogspot.com/
  #4 (permalink)  
Antiguo 09/05/2011, 12:28
 
Fecha de Ingreso: febrero-2007
Ubicación: Caracas
Mensajes: 148
Antigüedad: 17 años, 1 mes
Puntos: 6
Respuesta: Cargar Zoom dentro de Ventana emergente.

Este es el Codigo de la Ventana Emergente.
Al final del Documento es donde se nombre la variable de la Galeria.

Código:
/* Ultimate Fade-in slideshow (v2.4)
* Last updated: May 24th, 2010. This notice must stay intact for usage 
* Author: Dynamic Drive at http://www.dynamicdrive.com/
* Visit http://www.dynamicdrive.com/ for full source code
*/

//Oct 6th, 09' (v2.1): Adds option to randomize display order of images, via new option displaymode.randomize
//May 24th, 10' (v2.4): Adds new "peakaboo" option to "descreveal" setting. oninit and onslide event handlers added.

var fadeSlideShow_descpanel={
	controls: [['x.png',7,7], ['restore.png',10,11], ['loading.gif',54,55]], //full URL and dimensions of close, restore, and loading images
	fontStyle: 'normal 11px Verdana', //font style for text descriptions
	slidespeed: 200 //speed of description panel animation (in millisec)
}

//No need to edit beyond here...

jQuery.noConflict()

function fadeSlideShow(settingarg){
	this.setting=settingarg
	settingarg=null
	var setting=this.setting
	setting.fadeduration=setting.fadeduration? parseInt(setting.fadeduration) : 500
	setting.curimage=(setting.persist)? fadeSlideShow.routines.getCookie("gallery-"+setting.wrapperid) : 0
	setting.curimage=setting.curimage || 0 //account for curimage being null if cookie is empty
	setting.currentstep=0 //keep track of # of slides slideshow has gone through (applicable in displaymode='auto' only)
	setting.totalsteps=setting.imagearray.length*(setting.displaymode.cycles>0? setting.displaymode.cycles : Infinity) //Total steps limit (applicable in displaymode='auto' only w/ cycles>0)
	setting.fglayer=0, setting.bglayer=1 //index of active and background layer (switches after each change of slide)
	setting.oninit=setting.oninit || function(){}
	setting.onslide=setting.onslide || function(){}
	if (setting.displaymode.randomize) //randomly shuffle order of images?
		setting.imagearray.sort(function() {return 0.5 - Math.random()})
	var preloadimages=[] //preload images
	setting.longestdesc="" //get longest description of all slides. If no desciptions defined, variable contains ""
	for (var i=0; i<setting.imagearray.length; i++){ //preload images
		preloadimages[i]=new Image()
		preloadimages[i].src=setting.imagearray[i][0]
		if (setting.imagearray[i][3] && setting.imagearray[i][3].length>setting.longestdesc.length)
			setting.longestdesc=setting.imagearray[i][3]
	}
	var closebutt=fadeSlideShow_descpanel.controls[0] //add close button to "desc" panel if descreveal="always"
	setting.closebutton=(setting.descreveal=="always")? '<img class="close" src="'+closebutt[0]+'" style="float:right;cursor:hand;cursor:pointer;width:'+closebutt[1]+'px;height:'+closebutt[2]+'px;margin-left:2px" title="Hide Description" />' : ''
	var slideshow=this
	jQuery(document).ready(function($){ //fire on DOM ready
		var setting=slideshow.setting
		var fullhtml=fadeSlideShow.routines.getFullHTML(setting.imagearray) //get full HTML of entire slideshow
		setting.$wrapperdiv=$('#'+setting.wrapperid).css({position:'relative', visibility:'visible', background:'black', overflow:'hidden', width:setting.dimensions[0], height:setting.dimensions[1]}).empty() //main slideshow DIV
		if (setting.$wrapperdiv.length==0){ //if no wrapper DIV found
			alert("Error: DIV with ID \""+setting.wrapperid+"\" not found on page.")
			return
		}
		setting.$gallerylayers=$('<div class="gallerylayer"></div><div class="gallerylayer"></div>') //two stacked DIVs to display the actual slide 
			.css({position:'absolute', left:0, top:0, width:'100%', height:'100%', background:'black'})
			.appendTo(setting.$wrapperdiv)
		var $loadingimg=$('<img src="'+fadeSlideShow_descpanel.controls[2][0]+'" style="position:absolute;width:'+fadeSlideShow_descpanel.controls[2][1]+';height:'+fadeSlideShow_descpanel.controls[2][2]+'" />')
			.css({left:setting.dimensions[0]/2-fadeSlideShow_descpanel.controls[2][1]/2, top:setting.dimensions[1]/2-fadeSlideShow_descpanel.controls[2][2]}) //center loading gif
			.appendTo(setting.$wrapperdiv)
		var $curimage=setting.$gallerylayers.html(fullhtml).find('img').hide().eq(setting.curimage) //prefill both layers with entire slideshow content, hide all images, and return current image
		if (setting.longestdesc!="" && setting.descreveal!="none"){ //if at least one slide contains a description (versus feature is enabled but no descriptions defined) and descreveal not explicitly disabled
			fadeSlideShow.routines.adddescpanel($, setting)
			if (setting.descreveal=="always"){ //position desc panel so it's visible to begin with
				setting.$descpanel.css({top:setting.dimensions[1]-setting.panelheight})
				setting.$descinner.click(function(e){ //asign click behavior to "close" icon
					if (e.target.className=="close"){
						slideshow.showhidedescpanel('hide')
					}
				})
				setting.$restorebutton.click(function(e){ //asign click behavior to "restore" icon
					slideshow.showhidedescpanel('show')
					$(this).css({visibility:'hidden'})
				})
			}
			else if (setting.descreveal=="ondemand"){ //display desc panel on demand (mouseover)
				setting.$wrapperdiv.bind('mouseenter', function(){slideshow.showhidedescpanel('show')})
				setting.$wrapperdiv.bind('mouseleave', function(){slideshow.showhidedescpanel('hide')})
			}
		}
		setting.$wrapperdiv.bind('mouseenter', function(){setting.ismouseover=true}) //pause slideshow mouseover
		setting.$wrapperdiv.bind('mouseleave', function(){setting.ismouseover=false})
		if ($curimage.get(0).complete){ //accounf for IE not firing image.onload
			$loadingimg.hide()
			slideshow.paginateinit($)
			slideshow.showslide(setting.curimage)
		}
		else{ //initialize slideshow when first image has fully loaded
			$loadingimg.hide()
			slideshow.paginateinit($)
			$curimage.bind('load', function(){slideshow.showslide(setting.curimage)})
		}
		setting.oninit.call(slideshow) //trigger oninit() event
		$(window).bind('unload', function(){ //clean up and persist
			if (slideshow.setting.persist) //remember last shown image's index
				fadeSlideShow.routines.setCookie("gallery-"+setting.wrapperid, setting.curimage)
			jQuery.each(slideshow.setting, function(k){
				if (slideshow.setting[k] instanceof Array){
					for (var i=0; i<slideshow.setting[k].length; i++){
						if (slideshow.setting[k][i].tagName=="DIV") //catches 2 gallerylayer divs, gallerystatus div
							slideshow.setting[k][i].innerHTML=null
						slideshow.setting[k][i]=null
					}
				}
			})
			slideshow=slideshow.setting=null
		})
	})
}

fadeSlideShow.prototype={

	navigate:function(keyword){
		var setting=this.setting
		clearTimeout(setting.playtimer)
		if (setting.displaymode.type=="auto"){ //in auto mode
			setting.displaymode.type="manual" //switch to "manual" mode when nav buttons are clicked on
			setting.displaymode.wraparound=true //set wraparound option to true
		}
		if (!isNaN(parseInt(keyword))){ //go to specific slide?
			this.showslide(parseInt(keyword))
		}
		else if (/(prev)|(next)/i.test(keyword)){ //go back or forth inside slide?
			this.showslide(keyword.toLowerCase())
		}
	},
  #5 (permalink)  
Antiguo 09/05/2011, 12:29
 
Fecha de Ingreso: febrero-2007
Ubicación: Caracas
Mensajes: 148
Antigüedad: 17 años, 1 mes
Puntos: 6
Respuesta: Cargar Zoom dentro de Ventana emergente.

Continuacion de Galeria
Código:
showslide:function(keyword){
		var slideshow=this
		var setting=slideshow.setting
		if (setting.displaymode.type=="auto" && setting.ismouseover && setting.currentstep<=setting.totalsteps){ //if slideshow in autoplay mode and mouse is over it, pause it
			setting.playtimer=setTimeout(function(){slideshow.showslide('next')}, setting.displaymode.pause)
			return
		}
		var totalimages=setting.imagearray.length
		var imgindex=(keyword=="next")? (setting.curimage<totalimages-1? setting.curimage+1 : 0)
			: (keyword=="prev")? (setting.curimage>0? setting.curimage-1 : totalimages-1)
			: Math.min(keyword, totalimages-1)
		var $slideimage=setting.$gallerylayers.eq(setting.bglayer).find('img').hide().eq(imgindex).show() //hide all images except current one
		var imgdimensions=[$slideimage.width(), $slideimage.height()] //center align image
		$slideimage.css({marginLeft: (imgdimensions[0]>0 && imgdimensions[0]<setting.dimensions[0])? setting.dimensions[0]/2-imgdimensions[0]/2 : 0})
		$slideimage.css({marginTop: (imgdimensions[1]>0 && imgdimensions[1]<setting.dimensions[1])? setting.dimensions[1]/2-imgdimensions[1]/2 : 0})
		if (setting.descreveal=="peekaboo" && setting.longestdesc!=""){ //if descreveal is set to "peekaboo", make sure description panel is hidden before next slide is shown
			clearTimeout(setting.hidedesctimer) //clear hide desc panel timer
			slideshow.showhidedescpanel('hide', 0) //and hide it immediately
		}
		setting.$gallerylayers.eq(setting.bglayer).css({zIndex:1000, opacity:0}) //background layer becomes foreground
			.stop().css({opacity:0}).animate({opacity:1}, setting.fadeduration, function(){ //Callback function after fade animation is complete:
				clearTimeout(setting.playtimer)
				try{
					setting.onslide.call(slideshow, setting.$gallerylayers.eq(setting.fglayer).get(0), setting.curimage)
				}catch(e){
					alert("Fade In Slideshow error: An error has occured somwhere in your code attached to the \"onslide\" event: "+e)
				}
				if (setting.descreveal=="peekaboo" && setting.longestdesc!=""){
					slideshow.showhidedescpanel('show')
					setting.hidedesctimer=setTimeout(function(){slideshow.showhidedescpanel('hide')}, setting.displaymode.pause-fadeSlideShow_descpanel.slidespeed)
				}	
				setting.currentstep+=1
				if (setting.displaymode.type=="auto"){
					if (setting.currentstep<=setting.totalsteps || setting.displaymode.cycles==0)
						setting.playtimer=setTimeout(function(){slideshow.showslide('next')}, setting.displaymode.pause)
				}
			}) //end callback function
		setting.$gallerylayers.eq(setting.fglayer).css({zIndex:999}) //foreground layer becomes background
		setting.fglayer=setting.bglayer
		setting.bglayer=(setting.bglayer==0)? 1 : 0
		setting.curimage=imgindex
		if (setting.$descpanel){
			setting.$descpanel.css({visibility:(setting.imagearray[imgindex][3])? 'visible' : 'hidden'})
			if (setting.imagearray[imgindex][3]) //if this slide contains a description
				setting.$descinner.empty().html(setting.closebutton + setting.imagearray[imgindex][3])
		}
		if (setting.displaymode.type=="manual" && !setting.displaymode.wraparound){
			this.paginatecontrol()
		}
		if (setting.$status) //if status container defined
			setting.$status.html(setting.curimage+1 + "/" + totalimages)
	},

	showhidedescpanel:function(state, animateduration){
		var setting=this.setting
		var endpoint=(state=="show")? setting.dimensions[1]-setting.panelheight : this.setting.dimensions[1]
		setting.$descpanel.stop().animate({top:endpoint}, (typeof animateduration!="undefined"? animateduration : fadeSlideShow_descpanel.slidespeed), function(){
			if (setting.descreveal=="always" && state=="hide")
				setting.$restorebutton.css({visibility:'visible'}) //show restore button
		})
	},

	paginateinit:function($){
		var slideshow=this
		var setting=this.setting
		if (setting.togglerid){ //if toggler div defined
			setting.$togglerdiv=$("#"+setting.togglerid)
			setting.$prev=setting.$togglerdiv.find('.prev').data('action', 'prev')
			setting.$next=setting.$togglerdiv.find('.next').data('action', 'next')
			setting.$prev.add(setting.$next).click(function(e){ //assign click behavior to prev and next controls
				var $target=$(this)
				slideshow.navigate($target.data('action'))
				e.preventDefault()
			})
			setting.$status=setting.$togglerdiv.find('.status')
		}
	},

	paginatecontrol:function(){
		var setting=this.setting
			setting.$prev.css({opacity:(setting.curimage==0)? 0.4 : 1}).data('action', (setting.curimage==0)? 'none' : 'prev')
			setting.$next.css({opacity:(setting.curimage==setting.imagearray.length-1)? 0.4 : 1}).data('action', (setting.curimage==setting.imagearray.length-1)? 'none' : 'next')
			if (document.documentMode==8){ //in IE8 standards mode, apply opacity to inner image of link
				setting.$prev.find('img:eq(0)').css({opacity:(setting.curimage==0)? 0.4 : 1})
				setting.$next.find('img:eq(0)').css({opacity:(setting.curimage==setting.imagearray.length-1)? 0.4 : 1})
			}
	}

	
}

fadeSlideShow.routines={

	getSlideHTML:function(imgelement){
		var layerHTML=(imgelement[1])? '<a href="'+imgelement[1]+'" target="'+imgelement[2]+'">\n' : '' //hyperlink slide?
		layerHTML+='<img src="'+imgelement[0]+'" style="border-width:0;" />\n'
		layerHTML+=(imgelement[1])? '</a>\n' : ''
		return layerHTML //return HTML for this layer
	},

	getFullHTML:function(imagearray){
		var preloadhtml=''
		for (var i=0; i<imagearray.length; i++)
			preloadhtml+=this.getSlideHTML(imagearray[i])
		return preloadhtml
	},

	adddescpanel:function($, setting){
		setting.$descpanel=$('<div class="fadeslidedescdiv"></div>')
			.css({position:'absolute', visibility:'hidden', width:'100%', left:0, top:setting.dimensions[1], font:fadeSlideShow_descpanel.fontStyle, zIndex:'1001'})
			.appendTo(setting.$wrapperdiv)
		$('<div class="descpanelbg"></div><div class="descpanelfg"></div>') //create inner nav panel DIVs
			.css({position:'absolute', left:0, top:0, width:setting.$descpanel.width()-8, padding:'4px'})
			.eq(0).css({background:'black', opacity:0.7}).end() //"descpanelbg" div
			.eq(1).css({color:'white'}).html(setting.closebutton + setting.longestdesc).end() //"descpanelfg" div
			.appendTo(setting.$descpanel)
		setting.$descinner=setting.$descpanel.find('div.descpanelfg')
		setting.panelheight=setting.$descinner.outerHeight()
		setting.$descpanel.css({height:setting.panelheight}).find('div').css({height:'100%'})
		if (setting.descreveal=="always"){ //create restore button
			setting.$restorebutton=$('<img class="restore" title="Restore Description" src="' + fadeSlideShow_descpanel.controls[1][0] +'" style="position:absolute;visibility:hidden;right:0;bottom:0;z-index:1002;width:'+fadeSlideShow_descpanel.controls[1][1]+'px;height:'+fadeSlideShow_descpanel.controls[1][2]+'px;cursor:pointer;cursor:hand" />')
				.appendTo(setting.$wrapperdiv)


		}
	},


	getCookie:function(Name){ 
		var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair
		if (document.cookie.match(re)) //if cookie found
			return document.cookie.match(re)[0].split("=")[1] //return its value
		return null
	},

	setCookie:function(name, value){
		document.cookie = name+"=" + value + ";path=/"
	}
}
  #6 (permalink)  
Antiguo 09/05/2011, 12:35
 
Fecha de Ingreso: febrero-2007
Ubicación: Caracas
Mensajes: 148
Antigüedad: 17 años, 1 mes
Puntos: 6
Respuesta: Cargar Zoom dentro de Ventana emergente.

Cita:
Iniciado por Anna Carolina Ver Mensaje
Tengo lo siguiente, es que tengo el detalle de producto el cual tiene imagenes e imagen principal, la cual al hacer clic se abre una ventana (galeria) en JQUERY, donde necesito el efecto lupa adentro del recuadro o ventena emergente.

Aqui les muestro el Codigo

Código HTML:
<head>
aqui iria el Script de JAva
</head>

<?php

	if($_GET[id]) {

		$query = mysql_query("SELECT p.CodigoProducto, p.Descripcion, p.DescripcionInterna, p.Referencia, p.PrecioUnitario1, l.Descripcion as linea, p.CodigoLinea, p.CodigoFamilia, f.Descripcion as familia FROM vwProductosWeb p, Lineas l, FamiliaProductos f WHERE p.CodigoProducto='" . $_GET[id] . "' AND p.CodigoLinea=l.CodigoLinea AND p.CodigoFamilia=f.CodigoFamilia",$db);
		$row = mysql_fetch_row($query); 

		$data_id = $row[0];		
		$data_titulo = $row[1];		
		$data_interna = $row[2];			
		$data_referencia = $row[3];					
		$data_precio = $row[4];	
		$data_linea = $row[5];				
		$data_codigolinea = $row[6];		
		$data_codigofamilia = $row[7];
		$data_familia = $row[8];		

		$cual = array_search($data_codigofamilia, $data_categorias[id]);	
		$data_color = $data_categorias[color][$cual];		

		setlocale(LC_MONETARY, 'es_VE');		
		
	}


?>
<div class="cabeza" style="background-color: <?php echo $data_color; ?> !important"><a href="/proyectocrossh/catalogo.php?pag=catalogo&categoria=<?php echo $data_codigofamilia; ?>"><?php echo $data_familia; ?></a>: <a href="/proyectocrossh/catalogo.php?pag=catalogo&categoria=<?php echo $data_codigofamilia; ?>&linea=<?php echo $data_codigolinea; ?>"><?php echo $data_linea; ?></a></div>
<div class="detalle">
<table width='675' cellpadding='0' cellspacing='0'>
<tr valign='top'><td width='360' align='center'><?php

	if(file_exists($_SERVER[DOCUMENT_ROOT] . "/proyectocrossh/img/productos/1-" . $data_id . ".jpg")) {

	
		echo "<a href='/proyectocrossh/img/productos/1-" . $data_id . ".jpg' title='" . $data_titulo  . "' class='cpModal' rel='galeria'><img src='/proyectocrossh/img/productos/1-" . $data_id . ".jpg' alt='" . $data_titulo . "' border='0' width='360' height='361' /></a>";		
	}
	else
	{
		echo "<img src='/proyectocrossh/img/trans.gif' alt='" . $data_titulo . "' border='0' width='360' height='361' /></div>";
	}
	
?></td><td><div class='descripcion'>
<h1><?php echo ucwords(strtolower($data_titulo)) ; ?></h1>
<h2>Nº Referencia: <?php echo $data_referencia; ?></h2>
<p><?php echo $data_interna; ?></p>
<h3>Precio:<?php /*?><?php echo money_format('%.2n', $data_precio);?><?php */?></h3>
</div>
<div class='galeria' style="text-align: center; padding: 10px 10px 10px 10px;" >

<?php

	for($a=2; $a<=10; $a++) {
	
		if(file_exists($_SERVER[DOCUMENT_ROOT] . "/proyectocrossh/img/productos/" . $a . "-" . $data_id . ".jpg")) {

			if((!(file_exists($_SERVER[DOCUMENT_ROOT] . "/proyectocrossh/img/productos/t-" . $a . "-" . $data_id . ".jpg"))) OR (filemtime($_SERVER[DOCUMENT_ROOT] . "/proyectocrossh/img/productos/t-" . $a . "-" . $data_id . ".jpg")<($timestamp-18000)))  {

				@cropImage(100, 111,$_SERVER[DOCUMENT_ROOT] . "/proyectocrossh/img/productos/" . $a . "-" . $data_id . ".jpg", "jpg",$_SERVER[DOCUMENT_ROOT] . "/proyectocrossh/img/productos/t-" . $a . "-" . $data_id . ".jpg");

			}		

			echo "<a href='/proyectocrossh/img/productos/" . $a . "-" . $data_id . ".jpg' title='" . $data_titulo  . "' class='cpModal' rel='galeria'><img src='/proyectocrossh/img/productos/t-" . $a . "-" . $data_id . ".jpg' alt='" . $data_titulo . "' border='0' vspace='3' hspace='3' bgcolor='#FFFFFF' /></a>";
			
		}
	
	}
	
?>

</div>

<div><?php echo "<form name='votos' action='voto.php' method='POST'><input type='hidden' name='CodigoProducto' value='".$data_id."'><button name='MeGusta' type='submit'  value='MeGusta'><img src='/proyectocrossh/img/megusta.jpg' width='20' height='20'/></button></form>";?>
</div>
</td></tr></table>

</div>

<?php
	
	$queryproductos = mysql_query("SELECT * FROM vwProductosWeb WHERE CodigoProducto in (SELECT ProductoRelacionado from ProductosRelacionados WHERE CodigoProducto='" . $data_id  . "')",$db);

	unset($a);
	
	if (mysql_num_rows($queryproductos)>0) {
	
		echo "<div class=\"otras\">Otras opciones disponibles</div>
<table cellpadding=\"3\" cellspacing=\"0\" width=\"700\" class=\"catalogo_tabla\">";
	
		while($row = mysql_fetch_array($queryproductos)) {	
			
			$a++;
			
			if($a==1) {
				echo "<tr valign='top'>";
			}
			
			if(file_exists($_SERVER[DOCUMENT_ROOT] . "/proyectocrossh/img/productos/1-" . $row[CodigoProducto] . ".jpg")) {
						
				if((!(file_exists($_SERVER[DOCUMENT_ROOT] . "/proyectocrossh/img/productos/t-" . $row[CodigoProducto] . ".jpg"))) OR (filemtime($_SERVER[DOCUMENT_ROOT] . "/proyectocrossh/img/productos/t-" . $row[CodigoProducto] . ".jpg")<($timestamp-18000))) {
				
					@cropImage(135, 150,$_SERVER[DOCUMENT_ROOT] . "/proyectocrossh/img/productos/1-" . $row[CodigoProducto] . ".jpg", "jpg",$_SERVER[DOCUMENT_ROOT] . "/proyectocrossh/img/productos/t-" . $row[CodigoProducto] . ".jpg");
			
				}
				
				$imagen = "/proyectocrossh/img/productos/t-" . $row[CodigoProducto] . ".jpg";
				
			}
			else
			{
			
				$imagen = "/proyectocrossh/img/trans.gif";

			}
			
			
			echo "<td width='280' align='left'><div class='catalogo_descripcion'><h1>" . ucwords(strtolower($row[Descripcion])) . "</h1><h2>COD " . $row[CodigoProducto] . "</h2><a href='/proyectocrossh/?pag=detalle&id=" . $row[CodigoProducto] . "'>Ver Detalle</a></div><a href='/proyectocrossh/?pag=detalle&id=" . $row[CodigoProducto] . "'><img src='" . $imagen . "' border='0' alt='" . $row[Descripcion] . "' /></a></td>\n";
			
			if($a==3) {
				unset($a);
				echo "</tr>";
			}
					
		
		}
		
		if($a!=3) {
		
			for ($a=($a+1); $a<=3; $a++) {
			
				echo "<td width='280' align='left'>&nbsp;</td>";
			
			}
			
			unset($a);
			echo "</tr>";		
			
		}
		
		echo "</table>";
		
	}	
?>
<div class="pie">Precios y disponibilidad están sujetos a cambios sin previo aviso, contáctenos directamente para verificar la existencia del producto deseado.</div>


Etiquetas: ajax, jquery
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 14:54.