En la página para la Creación de áreas en imágenes, se indica que las imágenes se almacenarán en una base de datos, pero para poder gestionar esa base de datos con imágenes, he tenido que implementar un sistema paginado por el volumen de datos que ha tenido.
Una galería puede tener su propia estética, y en ese asunto no nos detendremos, aunque procuraremos darle un aspecto agradable.
En lo que sí nos detendremos es en conseguir un sistema dinámico y eficaz, evitando cargar datos innecesarios, y tratando de que la visualización sea rápida en cada petición Ajax.
En base a las conclusiones de la página Destripando objetos Ajax, obtendremos los datos en formato XML al tratarse de peticiones de datos de manera estructurada.
En la pestaña trabajando...
Una de las características más importante de Ajax, viene dado por su carácter asincrono, en donde la respuesta no la recibimos de forma inmediata, teniendo que estar pendiente del evento readystatechange; o sea dependiendo del atributo (variable) readyState.
Por cada evento de cambio de estado, crearemos un contenedor de datos para mostrar el valor de cada uno de los atributos obtenidos.
La pestaña "Editar código javascript" permite modificar el código javascript de la página y luego probarlo usando el botón "probar" que se encuentra al pie de la pestaña. Para usar el código original hay que pulsar el botón "enlazar".
Esta peculiar posibilidad no se recomienda usar a no ser de que se trate de un experimentado programador, ya que se pueden provocar errores no deseados... de todos modos podría ayudar a mejorar el código actual. Si alguien obtiene alguna mejora en el código, recomiendo que me lo haga saber.
Nuestras herramientas adicionales para gestionar la galería, se pueden encontrar fácilmente en la web. El objeto ajax y los alias y funciones básicas serán las mismas implementadas en la página Destripando objetos Ajax, aunque necesitaremos otros métodos adicionales.
Mostramos a continuación, el código con el que mostraremos las miniaturas. El fichero "miniatura.php" recibe como parámetros el atributo id asociado en la base de datos, y el valor máximo que deberá tener de anchura o altura, dependiendo que sea apaisada o no.
<?php session_start(); foreach($_GET as $datos => $item) $$datos = $item; $galeria = "galeria"; $_max = (isset($max)) ? $max : 800; include("conexion.php"); include("galeria-datos.php"); $mysqli = new mysqli($host, $usuario, $clave, $basedatos); $sql = "select archivo_binario, archivo_tipo, activo from $_paginador_galeria where $_paginador_clave = '$id'"; if ($res = $mysqli->query($sql)) { $encontrado = ($res->num_rows == 1); if ($encontrado) { $dato = $res->fetch_array(); if ($dato["activo"] == "1" || $_paginador_admin) { $codigo = $dato["archivo_binario"]; $tipo = $dato["archivo_tipo"]; } else { echo ($encontrado) ? "si":"no ".$dato['activo']; $codigo = file_get_contents("../dibujos/odalisca.gif"); $tipo = "image/gif"; } } else { $codigo = file_get_contents("../dibujos/odalisca.gif"); $tipo = "image/gif"; } $imagen = imagecreatefromstring($codigo); $ancho = imagesX($imagen); $alto = imagesY($imagen); $mayor = ($ancho > $alto) ? $ancho:$alto; $ratio = $_max / $mayor; if ($_max > $mayor) { header("Content-type: $tipo"); echo $codigo; } else { $mancho = (int) $ancho * $ratio; $malto = (int) $alto * $ratio; $mini = imagecreatetruecolor($mancho, $malto); $_fondo = imagecolorallocate($mini, 255, 255, 255); imagefill($mini, 1, 1, $_fondo); imagecolortransparent($mini, $_fondo); imagecopyresized($mini, $imagen, 0, 0, 0, 0, $mancho, $malto, $ancho, $alto); switch($tipo) { case "image/gif" : header("Content-type: $tipo"); imagegif($mini, NULL); //echo $mini; break; case "image/png" : header("Content-type: $tipo"); imagepng($mini, NULL); break; default : header("Content-type: image/jpeg"); imagejpeg($mini, NULL); break; } imagedestroy($mini); } imagedestroy($imagen); } ?>
Puede verse que si no se encuentra una imagen o es inactiva, se genera la ubicada en "../dibujos/odalisca.gif", que se ve a la izquierda de este párrafo.
Vamos a provocar que se muestre esta imagen en miniatura, incluyendo una imagen inexistente, por ejemplo usando el id=0: <img src="miniatura.php?id=0&max=15" alt="miniatura" /> => .
Diremos también sobre las miniaturas, que si se omite el parámetro max, el valor máximo de la imagen sería 800 pixeles (de anchura o altura); y si la imagen original es menor de tamaño que ese parámetro, se mostrará la original, permitiendo que los formatos animados (gif), mantengan su animación.
Si la imagen tiene que redimensionarse, y tenía transparencia, esta se mantendrá, al crear en el script un fondo transparente.
La estructura de la tabla de imágenes se puede crear con una instrucción sql similar a la que se muestra a continuación, aunque en realidad hay alguna diferencia.
CREATE TABLE `galeria` ( `id` int(10) unsigned NOT NULL auto_increment, `archivo_binario` longblob NOT NULL, `archivo_nombre` varchar(255) NOT NULL, `archivo_peso` varchar(15) NOT NULL, `archivo_tipo` varchar(25) NOT NULL, 'activo' tinyint(1) NOT NULL default '1', `desc_es` varchar(255) NOT NULL default '', `desc_en` varchar(255) NOT NULL default '', `categoria` varchar(20) NOT NULL default '', PRIMARY KEY (`id`) ) COMMENT='archivos binarios' AUTO_INCREMENT=1;
Como puede apreciarse, el campo clave es el id, por lo que ese será el campo de búsqueda, aunque podría usarse cualquier otro campo, y crear distintas consultas, usando la cláusula sql "order by".
Al abrirse la página necesitamos una serie de datos entre los cuales deben encontrarse los de la primera paginación, y un array con todos los id's ordenados (siempre existe la posibilidad de que se hayan borrado algunos de esos registros).
Listaremos las registros en grupos de 10 y con orden ascendente, aunque podemos modificar esos datos con unos controles adjuntos.
En esta pestaña se puede ver el código javascript de esta propia página, pudiéndose modificar y probar, aunque se corre el riesgo de provocar errores inesperados.
A pie de pestaña hay un par de botones con el siguiente significado: "probar" hace que se ejecute el código con las modificaciones que se hagan en él desde la sesión actual. Si se quiere usar el código original de la página debe pulsarse el botón "enlazar".
Si se usa a conciencia, se puede aprender con el código de esta misma página... espero que lo disfruten.