Problema con galeria javascript y php

tango84 · #1 (**permalink**) 19/03/2011, 19:29

Buenas noches estube mirando en el foro pero no logro solucionar mi problema
estoy haciendo una galeria y la idea es que cuando pase el mouse sobre la imagen aparesca una tabla con la imagen ampliada y un texto informativo he logrado que funcione colocando nombres de imagenes y textos fijos, pero al tratar de hacerlo con imagenes y textos de una base de datos no me funciona

este es el codigo que estoy usando:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<style>
#tabla {
position:absolute;
text-align:center;
visibility:hidden;
z-index:10;
}

.Estilo20 {
font-family: "Century Gothic";
color: #333333;
}
</style>
<SCRIPT LANGUAGE="JavaScript">
function ver_tabla(user,ValueShow) {
var mousex = window.event.x;
var mousey = window.event.y;
user.style.visibility = ValueShow;
user.style.left = mousex + 5;
user.style.top = mousey;
}
</script>
</HEAD>
<BODY>
<?php
include("conex.php");
$link=conectarse();
$result=mysql_query("select * from galeria1 ORDER BY orden ASC ",$link);
?>
<?php
$i=0;
while($row = mysql_fetch_array($result)) {
$imagen= $row['imagen'];
$referencia= $row['referencia'];
$precio= $row['precio'];
?>

<table border="0" cellspacing="2" cellpadding="1">
<tr>
<td>
<a onmouseover="ver_tabla(tabla,'visible')" onmouseout="ver_tabla(tabla,'hidden')">
<img src="<?php echo $imagen; ?>" width="202">
</a>
</td>
</tr>
</table>

<div id="tabla">
<table bgcolor="#FFFFFF" border="1">
<tr valign="middle">
<td align="center"><img src="<?php echo $imagen; ?>" width="302"><p><span class="Estilo20">REFERENCIA:<?php echo $referencia; ?>
<br>PRECIO:<?php echo $precio; ?><br></span>
</td>
</tr>
</table>
</div>
<?php
}
?>
</body>
</html>

si me pueden ayudar les agradezco mucho

tango84 · #2 (**permalink**) 19/03/2011, 20:06

al abrir la pagina en iexplorer me sale este error

Mensaje: 'style' is null or not an object
Línea: 23
Carácter: 1
Código: 0
URI: http://www.primaverashoes.com/site/ventana3.php

al cerrar el while antes del <div, me muestra la tabla pero muestra el ultimo dato de la base de datos
Gracias

tango84 · #3 (**permalink**) 20/03/2011, 06:06

¡¡¡por favor alguien queme ayude¡¡¡¡¡¡¡¡

tango84 · #4 (**permalink**) 20/03/2011, 10:19

Bueno veo que nadie me va a ayudar

laratik · #5 (**permalink**) 20/03/2011, 11:40

No se si todabia te sirva pero he probado tu script y he tratado de optimizarlo un poco utilizando las direcciones de las imagenes desde una base de datos:

Código PHP:

 
<!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">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Documento sin t&iacute;tulo</title>

<style>

.tooltip {

position:absolute;

text-align:center;

display: none;

z-index:10;

}

 
.Estilo20 {

font-family: "Century Gothic";

color: #333333;

}

</style>

<SCRIPT LANGUAGE="JavaScript">

function ver_tabla(user,ValueShow) {

    user = document.getElementById(user);

var mousex = window.event.x; 

var mousey = window.event.y; 

user.style.display = ValueShow; 

user.style.left = mousex + 5; 

user.style.top = mousey; 

}

</script>

</HEAD>

<BODY>

<?php 

include("class/Conexion.php");

$link= new Conexion(); 

$result=$link->query("select * from galeria1;"); 

?>

<?php

$i=0;

while($row = $result->toArray()) {

$imagen= $row['imagen']; 

$referencia= $row['referencia']; 

$precio= $row['precio']; 

?>

 
<table border="0" cellspacing="2" cellpadding="1">

<tr>

<td>

<a onmouseover="ver_tabla('<?php echo $referencia ?>','block')" onmouseout="ver_tabla('<?php echo $referencia ?>','none')">

<img src="<?php echo $imagen ?>" width="202">

</a>

</td>

</tr>

</table>

 
 
<div id="<?php echo $referencia ?>" class="tooltip">

<table bgcolor="#FFFFFF" border="1">

<tr valign="middle">

<td align="center"><img src="<?php echo $imagen; ?>" width="302"><p><span class="Estilo20">REFERENCIA:<?php echo $referencia; ?>

<br>PRECIO:<?php echo $precio; ?><br></span>

</td>

</tr>

</table>

</div>

<?php 

} 

?>

</body>

</html>

Recuerda que dentro de la base de datos todas las imágenes deben tener su respectiva extensión.

tango84 · #6 (**permalink**) 24/03/2011, 12:55

Hola LaratiK
bueno como cambiaste el include("conex.php"); por include("class/Conexion.php"); me salen varios errores ya que mi archivo se llama conex.php, el otro error que me sale es por el array (debo crear un array nuevo no sabria que hacer con el array), como tengo el codigo funciona mas o menos al poner el cierre del while antes del div me carga la tabla dentro del div la cosa es que la informacion que muestra es la del ultimo dato de la bbdd no logro hacer que por cada imagen, me muestre la info e imagen ampliada correspondiente

tango84 · #7 (**permalink**) 24/03/2011, 12:56

Gracias por tu respuesta Laratik, y si claro todabia necesito ayuda gracias de nuevo

laratik · #8 (**permalink**) 24/03/2011, 13:10

Claro que te da error, ya que he utilizado la clase con la que yo me conecto a la base de datos para poder hacer la prueba. Tendrías que adaptarla a tu base de datos, según veo seria algo así:

Código PHP:

 
<!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"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Documento sin t&iacute;tulo</title> 
<style> 
.tooltip { 
position:absolute; 
text-align:center; 
display: none; 
z-index:10; 
} 

.Estilo20 { 
font-family: "Century Gothic"; 
color: #333333; 
} 
</style> 
<SCRIPT LANGUAGE="JavaScript"> 
function ver_tabla(user,ValueShow) { 
    user = document.getElementById(user); 
var mousex = window.event.x;  
var mousey = window.event.y;  
user.style.display = ValueShow;  
user.style.left = mousex + 5;  
user.style.top = mousey;  
} 
</script> 
</HEAD> 
<BODY> 
<?php  
iinclude("conex.php"); 
$link=conectarse(); 
$result=mysql_query("select * from galeria1 ORDER BY orden ASC ",$link);   
?> 
<?php 
$i=0; 
while($row = mysql_fetch_array($result)) { 
$imagen= $row['imagen'];  
$referencia= $row['referencia'];  
$precio= $row['precio'];  
?> 

<table border="0" cellspacing="2" cellpadding="1"> 
<tr> 
<td> 
<a onmouseover="ver_tabla('<?php echo $referencia ?>','block')" onmouseout="ver_tabla('<?php echo $referencia ?>','none')"> 
<img src="<?php echo $imagen ?>" width="202"> 
</a> 
</td> 
</tr> 
</table> 


<div id="<?php echo $referencia ?>" class="tooltip"> 
<table bgcolor="#FFFFFF" border="1"> 
<tr valign="middle"> 
<td align="center"><img src="<?php echo $imagen; ?>" width="302"><p><span class="Estilo20">REFERENCIA:<?php echo $referencia; ?> 
<br>PRECIO:<?php echo $precio; ?><br></span> 
</td> 
</tr> 
</table> 
</div> 
<?php  
}  
?> 
</body> 
</html>

Acercadel array me imagino que te refieres al array que creas al momento de entrar al while $row = mysql_fetch_array($result), pues a mi me funciona perfecto. Espero que te sirva de algo.

tango84 · #9 (**permalink**) 07/04/2011, 15:18

Muchas Gracias laratik por la respuesta estuve dandole vueltas y no se bien que le hace falta, solucione el problema usando fancybox en lugar del codigo que tenia.