Ampliar Imagen De Lista De Productos

hoberwilly · #1 (**permalink**) 09/07/2008, 16:14

Hola amigos, quisiera por favor me puedan ayudar a realizar lo siguiente:
1. Tengo un catalogo de productos, dentro de las cuales cada item (producto1, producto2, producto3, etc) presenta su imagen

catalogo.php
------------------
<?php
ob_start("ob_gzhandler");
session_start();
include('conec.php');
conectarse();
if(isset($_SESSION['carro']))
$carro=$_SESSION['carro'];else $carro=false;
$qry=mysql_query("select id, producto, precio from catalogo order by producto");
?>

<html>
<head>
</head>
<body>
<table width="100%" align="center" border="0">
<?php while($row=mysql_fetch_assoc($qry)){ ?>
<tr>
<td width="42%" align="center"><?php echo "<img src=\"verBlob.php?id=".$row['id']."\">"; ?></td>
<td width="58%" align="left" valign=top><br><strong>Nombre: </strong><?php echo $row['producto'] ?><br><br>
<strong>Precio (S/.): </strong><?php echo $row['precio'] ?><br><br>
<strong>Producto a Seleccionar: </strong><?php
if(!$carro || !isset($carro[md5($row['id'])]['identificador']) || $carro[md5($row['id'])]['identificador']!=md5($row['id'])){

?><a href="agregacar.php?<?php echo SID ?>&id=<?php echo $row['id']; ?>"><img src="productonoagregado.gif" border="0"></a><?php }
else

{?><a href="borracar.php?<?php echo SID ?>&id=<?php echo $row['id']; ?>"><img src="productoagregado.gif" border="0"></a><?php } ?></td>
</tr>
<?php } ?>
</table>
<p>
<table width="530" align="center">
<tr>
<td width="15%" align="right"><a href="vercarrito.php?<?php echo SID ?>" title="Ver el contenido del carrito">Ver el contenido del carrito</a></td>
</tr>
</table>
</body>
</html>
<?php
ob_end_flush();
?>

2. Lo que quisiera que el usuario pueda darle click a una de las imagenes y esta pueda ser visualizada en otra ventana pero de forma ampliada (ademas si se pudiese tambien incluir su descripcion y precio)...para cada item

p.d. las fotos fueron almacenadas en la bd

agradesco por la atencion brindada y esperando una respuesta positiva

killerangel · #2 (**permalink**) 09/07/2008, 22:52

hola hoberwilly:

Si lo que quieres es una mejor vision de tu web puedes usar ligthbox y cargar en esta una web q muestre lo que deseas...

de lo contrario tendras q hacer un..

onclick="window.open(...parametros.)"

y sino cargar lo que deseas en la misma pagina y eso ya sera php puro.

suerte

hoberwilly · #3 (**permalink**) 10/07/2008, 07:40

Disculpen por la ignorancia, pero... creo no haber entendido mucho...recien soy nuevo pero con muchas ganas para aprender...

mira lo mas importante para mi es que el usuario pueda darle click a una de las imagenes y esta pueda ser visualizada en otra ventana (solamente la imagen) pero de forma ampliada

la linea de la imagen en mi archivo (catalogo.php) es:
...
<td><?php echo "<img src=\"verBlob.php?id=".$row['id']."\">"; ?></td>

y el archivo verBlob.php donde se consultan las imagenes es:
<?php
error_reporting(E_ALL);
include("conec.php");

$idfoto = (isset($_GET["id"])) ? $_GET["id"] : exit();
$tam = (isset($_GET["tam"])) ? $_GET["tam"] : 1;
switch($tam) {
case "1":
$campo = "foto";break;;
default:
$campo = "foto";break;;
}

$sql = "SELECT $campo, mime FROM catalogo WHERE id = $idfoto";
$conn = mysql_query($sql));
$datos = mysql_fetch_array($conn);

$imagen = $datos[0];
$mime = $datos[1];
header("Content-Type: $mime");
echo $imagen;
?>

ojo: los productos se listan con su respectiva imagen

agradesco de antemano la respuesta brindada

hoberwilly · #4 (**permalink**) 14/07/2008, 15:30

Hola amigos a todos, quisiera le den un vistazo al sgte codigo lo encontre en la web y me parecio interesante, funciona a la perfeccion para una sola figura... el cual al pasar el mouse por la figura se observa su imagen ampliada.

AMPLIARIMAGEN.PHP
---------------------------
<html>
<head>
<style type='text/css'>

.thumbnail{
position: relative;
z-index: 0;
}

.thumbnail:hover{
background-color: transparent;
z-index: 50;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: none;
padding: 5px;
left: -100px;
border: none;
visibility: hidden;
color: #FFFF00;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 50px; /*position where enlarged image should offset horizontally */

}

</style>

</head>
</head>
<body>
<a class="thumbnail" href="#thumb" target="_blank"><img src="producto1.jpg" width="44" height="75" border="0" /><span><img src="producto1.jpg" /><br /></span></a>

</body>
</html>

...Ahora el problema esta en que no se como seria para adecuarlo a mis necesidades debido a que en mi codigo original (CATALOGO.PHP), la imagen lo cargo con:

<td><?php echo "<img src=\"verBlob.php?id=".$row['id']."\">"; ?></td>

Por favor agradesco de antemano por el apoyo que me puedan brindar.

hoberwilly · #5 (**permalink**) 15/07/2008, 07:45

Agradesco si alguien me puede ayudar por favor...

hoberwilly · #6 (**permalink**) 17/07/2008, 07:25

Gracias por todo, ya logre implementarlo la carga de las imagenes usando lightbox

Quisiera compartir lo que encontre en la web:

LIGHTBOX.PHP
-------------------
<html>
<head>
<title>Lightbox</title>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
<script src="js/lightbox.js" type="text/javascript"></script>

</head>
<body>
<h2>Example LIGHTBOX</h2>

<a href="mi_figura.gif" rel="lightbox">
<img src="mi_figura.gif" alt="" />
</a>

</body>
</html>

no olvidar de descargar lightbox (y guardarlo en la raiz, puede ser appserv/www), es alii donde encontraras los js y css...si tienen alguna duda con mucho gusto les podria ayudar, hasta donde este a mi alcance...

saludos