Mostrar imagen en popup en PHP
De nuevo yo! Ja!
Tengo un formulario donde agrego un producto con su nombre, descripción, precio, categoría y una imagen. Todo va a una base de datos, con las imágenes subo el nombre a una tabla y guardo las imágenes en una carpeta. Hasta ahí todo bien, cargo todo y va joya.
El tema es cuando muestro el listado de todos los productos, me muestra el nombre, descripción y precio. Y al lado le puse 3 botones, un editar, un borrar y ahora le agregue un "mostrar imagen" que quiero que en un popup me muestre la imagen subida en el form anterior correspondiente a ese producto. Así la mostraría en el mismo listado. Pero no se como hacer para que se habrá en un popup.
<img src="imágenes/<?php echo($fila['prd_foto']);?>" />
¿Alguna sugerencia?
1 Respuesta
Eso que quieres puedes hacerlo mediante javascript.
<html>
<head>
<script type="text/javascript">
function imagepopup(ruta){
document.getElementById("divpopup").innerHTML="<img src='"+ruta+"' width='100'><br><a href="#" onclick="ocultardiv()">Cerrar</a>"; // Añade la imagen
document.getElementById("divpopup").style.display="block"; //Muestra el div
}
function ocultardiv(){
document.getElementById("divpopup").style.display="none"; //Oculta el div
}
</script>
</head>
<body>
<div id="divpopup" style="position:absolute; display:none; width:150px; height: 200px; left: 50%; top: 50%; margin-left: -75; margin-top: -100px; background: #FFFFFF; border: 1px solid #BDBDBD;"></div>
<?php
// Aquí imaginamos que hemos consultado yá la base de datos y tenemos ya los datos del producto
print('<button onClick=imagepopup("'.$fila['prd_foto'].'");>Mostrar imagen</button>');
// Puedes usar echo en vez de print pero a mi me gusta más usar print.
//en el onclick no le pongas comillas porque las tienes que usar dentro de la funcion js
// y si las pones habrá un error, por lo tanto dejalo así -> onclick=imagepopup("'.$fila['prd_foto'].'")
?>
</body>
</html>Bueno ahora te explico el código.
Cuando mediante php imprimas en pantalla el botón de mostrar imagen, le pones el onclick y le pasas la ruta de la imagen que la tienes almacenada en la base de datos.
la ruta se la pasarías así-> echo("<button onclick=imagepopup('".$fila['prd_foto']."'");
Javascript se encargará de poner en un div llamado divpopup, la imagen de la base de datos.
El div está puesto flotante y centrado con fondo blanco y borde gris, para darle un toque más elegante.
La función ocultardiv es para cerrar el popup sin recargar la página.
Si tienes alguna duda, vuelve a preguntarme.
Hola! Gracias por tu ayuda!
Pero debe haber algo que estoy haciendo mal porque no me funciona.
Lo único que cambie fue la ruta, puse el nombre de la carpeta (imágenes) donde están las fotos. En la linea donde imprimo el botón para mostrar la imagen si le saco las comillas me tira error y con las comillas el botón no hace nada(no levanta el popup). Estoy usando el PHP Designer y cuando le saco las comillas me subraya $fila y me tira error de sintaxis.
Gracias por tu ayuda
Si pudieras poner el código de tu web que da error o que no consigues meter a camino, a lo mejor te puedo echar una mano.
$$\begin{align}&<?php\\ &$titulo= "Listado de Productos";\\ &$link = mysql_connect("localhost", "root", "");\\ &mysql_select_db("catalogo", $link);\\ &\\ &// maximo por pagina\\ &$limit = 5;\\ &\\ &// pagina pedida\\ &$pag = (\int) @$_GET["pag"];\\ &if ($pag < 1)\\ &{\\ & $pag = 1;\\ &}\\ &$offset = ($pag-1) * $limit;\\ &\\ &$criterio="ORDER BY prd_precio DESC";\\ &\\ &$sql="SELECT SQL_CALC_FOUND_ROWS prd_id, prd_nombre, prd_descripcion, prd_precio, prd_foto FROM productos $criterio LIMIT $offset, $limit";\\ &$sqlTotal = "SELECT FOUND_ROWS() as total";\\ &$rs = mysql_query($sql);\\ &$rsTotal = mysql_query($sqlTotal);\\ &$rowTotal = mysql_fetch_assoc($rsTotal);\\ &// Total de registros \sin limit\\ &$total = $rowTotal["total"];\\ &@$imagen = $_FILES['prd_foto']['name'];//nombre real, el [name] nunca se cambia, es el nombre real del archivo\\ & @$imagen_temp = $_FILES['prd_foto']['tmp_name'];//nombre temporal\\ & $path = "imagenes/"; //directorio destino TIENE QUE EXISTIR\\ &\\ & move_uploaded_file($imagen_temp, $path.$imagen); //mueve del temporal al directorio definitivo\\ &?>\\ &<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\\ &<html>\\ & <head>\\ & <title><?php echo ($titulo);?></title>\\ & <meta content="\text/html; charset=iso-8859-1" http-\equiv="Content-Type" />\\ & <link href="panel.css" rel="stylesheet" type="\text/css" />\\ & </head>\\ & <body>\\ & <h1><?php echo ($titulo); ?></h1>\\ & <!-- Inicio del desarrollo -->\\ &
\\ & <table class="panel">\\ & <tr>\\ & <th class="titulo">Nombre</th>\\ & <th class="titulo">Descripcion</th>\\ & <th class="titulo">Precio</th>\\ & <th class="titulo">\\ & \\ & iconos/agregar2.png</th>\\ & <th class="titulo">\\ & \\ & iconos/logout.gif</th>\\ & <th class="titulo">\\ & iconos/verfoto.png</th>\\ & </tr>\\ & <?php\\ & //inicio del muestreo\\ & //$cantidad=mysql_num_rows($resultado);\\ & while($fila=mysql_fetch_assoc($rs)){\\ & ?>\\ & <tr>\\ & <td class="lista"><?php echo($fila["prd_nombre"]);?></td>\\ & <td class="lista"><?php echo($fila["prd_descripcion"]);?></td>\\ & <td class="lista"><?php echo($fila["prd_precio"]);?></td>\\ & <td class="lista">\\ & <a href="form-editar.php?prd_id=<?php echo($fila["prd_id"]);?>">\\ & iconos/editar3.png\\ & </td>\\ & <td class="lista">\\ & <a href="form-borrar.php?prd_id=<?php echo($fila["prd_id"]);?>">\\ & iconos/borrar2.png\\ & \\ & </td>\\ & <td class="lista"><!--ACA QUIERO QUE APAREZCA EL ICONO AMPLIAR.PNG Y AL HACER CLICK ABRA EL POPUP-->\\ & \\ & iconos/ampliar.png\\ & \\ & </td>\\ & </tr>\\ & <?php\\ & }\\ & //mysql_close();\\ & //Fin del muestreo\\ & ?>\\ & <tr>\\ & <td class="pie" colspan="5">\\ & <?php \\ & $totalPag = ceil($total/$limit);//ceil redondea hacia arriba\\ & $links = array();\\ & for( $i=1; $i<=$totalPag ; $i++)\\ & {\\ & $links[$i] = "<a href=\"?pag=$i\">$i</a>"; \\ & }\\ & $ant=@$_GET["pag"]-1;\\ & $anterior="<a href=\"?pag=$ant\">Anterior</a>"; \\ & if ($ant>=1)\\ & {\\ & echo ($anterior . " - ");\\ & }\\ & echo implode(" - ", $links);//implode, une elementos de un array en una cadena\\ & $sig=@$_GET["pag"]+1; \\ & if ($sig==1)\\ & {\\ & $sig=$sig+1;\\ & }\\ & $siguiente="<a href=\"?pag=$sig\">Siguiente</a>";\\ & if ($sig<=$totalPag)\\ & { \\ & echo (" - " . $siguiente);\\ & }\\ & ?>\\ & </td>\\ & </tr>\\ & <!--<tr>\\ & <td class="pie" colspan="3">Se han encontrado <?php //echo($cantidad);?> registros</td>\\ & </tr>-->\\ & </table>\\ & \\ & \\ & </body>\\ &</html>\end{align}$$Aquí va......muchas gracias
He detectado varias cositas.
Una vez obtienes la ruta que tiene la imagen en tu servidor
$path.$imagen
No metes esa ruta en ningún lado, en la base de datos.
Tendrías que hacer un insert o un update si ya lo tienes creado mediante sql para que la base de datos sepa donde está la imagen.
Otra cosita. No se si será error al enviarme el código que me llegó supermal, pero detecté después de ordenarlo, que para las imágenes solo pones las rutas.
Para insertar una imagen tienes que hacer lo siguiente.
¿<?php
$rutadelaimagenenladb=$fila['prd_foto'];
echo("<img src='".$rutadelaimagenenladb."' width='X'>");
?>
o también
<img src="<?php echo($fila['prd_foto']); ?>" width="X">
lo que tu haces es
<td><?php echo($fila['prd_foto']) ?></td> Lo que hace esto es imprimirte solo la ruta
en un campo de la tabla.al igual que cuando cologas los iconos pones...
iconos/agregar2.png
lo correcto sería poner...
<img src="iconos/agregar2.png" height="POR">
Prueba eso y mira a ver si hay algo más que necesites.
Con respecto a insertar las imágenes lo hago como me decís, no se porque te llego así el código, lo copie donde dice insertar formula y la vista preliminar se veía bien....pero bue....
Para colocar la imagen en el listado de productos hacia lo siguiente...
<img src="imágenes/<?php echo ($fila['prd_foto']);?>" height="100" width="100" />
Y me la muestra en una columna de la tabla.
Voy a intentar de nuevo con el js que me pasaste a ver que hago mal.
Gracias por todo....
Ok, pruébalo y me cuentas, yo uso así para los formularios.
Tengo una página de una asociación que presido y la tengo hecha como una red social, al enviar un mensaje es como en tuenti, te aparece un formulario flotante (sin recargar la página) y luego cuando lo envías se recarga la página enviando el formulario de forma normal por POST.
Ahí pude hacerlo con otro script, pero tengo una duda.
Me salta el popup si cargo la imagen manual, así....
<a href="javascript:CargarFoto('imágenes/led.png','641','480')">
<img src="iconos/ampliar.png" title="Ampliar imagen" border="0" /></a>
Como puedo meterle el php ahí dentro de "imágenes/led.png" para que me tome las fotos de la base?
Muchas gracias
Puedes hacerlo de dos formas
print('<a href=javascript:CargarFoto("'.$rutadeladb.'","614","480");><img src="iconos/ampliar.png" title="Ampliar imagen" border="0" /></a>');
//Fijate que quité las comillas del href para que no se confunda con la funciono así:
<a href="javascript:CargarFoto('<?php print('$rutadeladb'); ?>','614','480')"><img src="iconos/ampliar.png" title="Ampliar imagen" border="0" /></a>$rutadeladb es la url de la imagen que tienes almacenada en la base de datos
Sustitúyela por la variable que estés usando
