Ajax: Galería de imágenes paginada

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.

icono Introducción
icono Herramientas
icono Trabajando
icono La Galería
icono Editar código
pluma

Introducción


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.

trabajando

Trabajando


En la pestaña trabajando...

navegando

Listado


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.

editando

Editar código javascript


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.

Herramientas

Herramientas


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.

Miniaturas con php

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);
}
?>
odalisca

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" /> => 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.

Trabajando

Trabajando


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

Datos en el inicio

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).

listado

La galería


Listaremos las registros en grupos de 10 y con orden ascendente, aunque podemos modificar esos datos con unos controles adjuntos.

Información de la paginación

registros totales: 29
visitados: 10
ordenación: ascendente
páginas totales: 3
miniatura 1
id: 1; nombre: tamaño: tipo:
categoria:


informe:
miniatura 23
id: 23; nombre: tamaño: tipo:
categoria:


informe:
miniatura 24
id: 24; nombre: tamaño: tipo:
categoria:


informe:
miniatura 25
id: 25; nombre: tamaño: tipo:
categoria:


informe:
miniatura 26
id: 26; nombre: tamaño: tipo:
categoria:


informe:
miniatura 27
id: 27; nombre: tamaño: tipo:
categoria:


informe:
miniatura 32
id: 32; nombre: tamaño: tipo:
categoria:


informe:
miniatura 542
id: 542; nombre: tamaño: tipo:
categoria:


informe:
miniatura 4557
id: 4557; nombre: tamaño: tipo:
categoria:


informe:
miniatura 4558
id: 4558; nombre: tamaño: tipo:
categoria:


informe:
editando

Editar código javascript


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.


Código