Galería de imágenes

Ya nos hemos visto siempre en la necesidad de mostrar múltiples imagenes de manera práctica para que un cliente las pueda ver. Siempre invertimos tiempo inventando una nueva manera de mostrarlas. Pero como para la mayoría de nosotros, el tiempo es preciado, aquí tenemos una galería de imágenes sencilla prediseñada capaz de cumplir con muchas de nuestras necesidades.

 ¿Qué obtengo?

 Obtienes una galería que por ahora tiene una lista de imágenes, un slideshow con título, imagen y texto

¿Qué necesito?

  1. Incluir el archivo n2c/lib/gallery/gallery.class.php
  2. Llamar en javascript al archiov n3c/lib/gallery/gallery.class.php.

¿Cómo lo utilizo?

Cuando se trata de ilustrar, un ejemplo es mucho mejor:

require ("n2c/ambienten2c.php"); 
require ("n2c/lib/gallery/gallery.class.php"); 
$gallery = new gallery('', array( 
  'thumbSize' => '100x80', 
  'thumbsPerLine' => 3, 
  'mouseOverTime' => 1000, 
  'imagePath' => 'http://www.venezuelatuya.com/902/img/', 
  'imageClass' => 'imageClass', 
  'thumbClass' => 'thumbClass', 
  'imageDivClass' => 'imageDivClass', 
  'thumbDivClass' => 'thumbDivClass', 
  'controlsClass' => 'controlsClass', 
  'textClass' => 'textClass' 
)); 
$gallery->getData('SUBImagen3,SUBImagen2,SUBNombre,SUBBloque1', 'SUB', "SUBImagen2<>''", '', 20); 
list($script, $list, $slideshow) =
$gallery->getHtml('SUBImagen3', 'SUBImagen2', 'SUBNombre', 'SUBBloque1');

Ahora en HTML se tiene el siguiente código:

<!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=iso-8859-1" />
  <title>Galería de imagenes</title>
  <style type='text/css'>
  body{font-size:63%}
  .imageDivClass{background-color:#00CCFF;width:300px;text-align:center;float:left;}
  .thumbDivClass{float:left;width:500px;}
  .imageDivClass img{background-color:white;border:1px green solid;padding-bottom:5px;border-bottom-width:5px;}
  .thumbDivClass img{border:1px green solid;float:left;}
  .controlsClass input{background-color:#ccc;border:2px #888 outset;}
  .textClass{text-align:justify;font-family:Verdana, Arial, Helvetica, 
sans-serif; size:1.3em;width:400px;float:left;}
  </style>
  <script type='text/javascript' src='< ?php echo $APP->URLlib; ?>/gallery/gallery.js'></script>
  <script type='text/javascript'>
  < ?php echo $script; ?>
  </script>
  </head>
  <body>
  <h1>HOLA</h1>
  < ?php
  echo $list.$slideshow;
  ?>
  </body>
  </html>

(Se uso la etiqueta phps para evitar que se ejecute el código en la página que estás viendo. Debes usar php)

Nótese que se crea el objeto gallery pasándole una id y luego todas las opciones para personalizarla. Luego se pasan los datos para obtener los datos de la base de datos, y finalmente se obtienen los datos en formato de javascript, la lista de thumbnails y finalmente el html para el slideshow. Vamos a ver más detalladamente qué es todo esto:

Creando mi galería

Para crearla crea un objeto de la siguiente manera $galeria = new gallery('mi_id', $opciones); donde mi_id es la id única de la galería en la página (permite múltiples galerías en una página. $opciones son múltiples opciones. Se pueden escoger cualquiera de estas opciones:

Parámetro Descripción Valor por defecto
thumbSize Tamaño máximo del thumbnail. El ancho máximo separado por una 'x' de la altura máxima. Ejemplo: 80x60 'auto'
imageSize Tamaño máximo de la imagen principal. El ancho máximo separado por una 'x' de la altura máxima. Ejemplo: 400x300 'auto'
thumbsPerLine Cantidad de thumbnails en una línea cuando se muestran los thumbnails en modo de lista. Es un entero. null
mouseOverTime Cantidad de milisegundos que el mouse tiene que estar sobre un thumbnail para que se muestre en la imagen principal. Esto significa que si se escogen 1000 milisegundos, la persona tiene que dejar su mouse un segundo sobre cualquier thumbnai para que esta imagen se pase a mostrar en la imagen principal. Por defecto, no se tendrá acceso a esta facilidad. null
showControls Si se quieren mostrar los controles por defecto de la galería bajo la imagen principal true
controls String de html que indica los controles personalizados que se quieren tener bajo la imagen principal. Más adelante indicaremos los detalles necesarios para escribir estos controles para que funcionen apropiadamente. ''
URLimg

Dirección al lugar en el que se encuentran las imagenes que se van a mostrar. Tanto thumbnails como principales. Cuando se obtienen los nombres de las imágenes de una base de datos, hace falta especificar el directorio en el que se encuentran. Debido a que la ruta es usada internamente en el servidor es obligatorio que sea absoluta para lo que se tienen dos opciones:

http://www.venezuelatuya.com/222/img

/222/img

 ''
thumbLineClass

Cuando se especifica la cantidad de thumbnails por línea, las imagenes son separadas por div. En este caso se ha especificado un thumbsPerLine = 4 y un thumbLineClass = miClaseLinea.

<div class='miClaseLinea'>
    <img /><img /><img /><img />
</div>
<div class='miClaseLinea'>
    <img /><img /><img /><img />
</div>

 ''
imageDivClass

Clase del div que contiene el título, la imagen principal y los controles. Si especificaramos imageDivClass = clasedivimagen, tendríamos:

<div class='clasedivimagen'>
    <h2>título de la imagen</h2>
    <img />
    <br />
    <p><input /><input /><input /><input /></p>
</div>

En el código anterior se puede aprecia el título de la imagen en la etiqueta h2, la imagen principal en la etiqueta img y los cuatro controles por defecto de la galería en las etiquetas input. Para manipular cualquiera de estos elementos, es recomendable hacerlo através del nombre de la clase que se le de a este div.

 ''
thumbDivClass Nombre de la clase que se le va a dar al contenedor div mayor de los thumbnails img. ''
controlsClass Nombre de la clase que se le va a dar al contenedor p de los controles (por defecto input). null
xhtml Si la salida html debe ser xhtml o html. true para xhtml, false para html común. true
initialize Índice de la foto que se inicializará apenas inicie la página. Por defecto se escogerá la primera foto (0). Si no se quiere escoger ninguna foto, se puede colocar -1 0

Métodos

La galería es un conjunto de métodos que intentan brindar utilidad a la hora de crear y customizar la galería.

getData

Este método permite obtener las fotos de una tabla de net2client. Se necesita el ambiente n2c. Esto se puede lograr al llamar la página a través de versup o incluyendo el archivo n2c/ambienten2c.php

Parámetro Descripción Valor por defecto
fields Campos que se van a seleccionar en el query OBLIGATORIO
tables Tablas implicadas en el query OBLIGATORIO
conditions Condiciones para la estracción de las imagenes ''
order Sentencia de orden para obtener las imagenes de manera predeterminada ''
start Si se especifica un LIMIT, este es el start ''
limit LIMIT del query ''

 Cabe destacar que estos parámetros no se pasan en forma de arreglo como al construir la función. El orden es en el que están escritos en la tabla. Los primeros dos son obligatorios. Esto guarda las imagenes conseguidas para mostrarlas posteriormente. Por ejem:

$gallery->getData('SUBImagen3,SUBImagen2,SUBNombre,SUBBloque1', 'SUB', "SUBImagen2<>''", '', 20);

Vale la pena destacar que se puede llamar el método tantas veces como haga falta.

addData

Este es un método que permite añadir un arreglo de imagenes directamente a la función sin tener que pasar por la base de datos. Este pudiera ser útil si las imagenes se encuentran guardados bajo un formato no soportado por getData, si las imagenes son estáticas o si se desean añadir imagenes extras por fuera de la base de datos.

$data = array(
    array(
        'imagen' => 'perrito.jpg',
        'thumbnail' => 'perro.jpg',
        'nombre' => 'Perrito',
        'descripcion' => 'Esta la tome en Mérida'
    ),
    array(
        'imagen' => 'gatico.jpg',
        'thumbnail' => 'gato.jpg',
        'nombre' => 'Gatico',
        'descripcion' => 'Esta era la mascota del perro'
    )
);

$gallery->addData($data);

En el ejemplo anterior añadimos dos fotos. El formato del arreglo debe ser un superarreglo con varios arreglos dentro. Cada uno de los arreglos internos representa una foto y deben tener una misma clave para la imagen, thumbnail, nombre y descripción, ya que posteriormente se leen los valores de estas claves.

getHtml

Una vez que se han otorgado todos los parámetros y los datos, se puede construir la galería. Esta función sólo necesita de parámetro los nombres de las claves del superarreglo de datos para obtener la imagen, el thumbnail, el nombre y la descripción de la foto.

Parámetro Descripción Valor por defecto
nameThumb Nombre de la clave que de valor tiene el nombre del archivo que sirve de thumbnail OBLIGATORIO
nameImage Nombre de la clave que de valor tiene el nombre del archivo que sirve de foto principal OBLIGATORIO
nameTitle Nombre de la clave que de valor tiene el nombre de la foto que sirve de título ''
nameText Nombre de la clave que de valor tiene la descripción de la foto ''

Estos parámetros no se pasan en un arreglo sino directamente a la función en el mismo orden en el que aparecen en la tabla. Este método devuelve un arreglo con tres elementos en las posiciones 0,1,2. En posición 0 está el script que preferiblemente se coloca en el head. El inicializa la galería en javascript para activarla. En la posición 1 está la lista de thumbnails. En la posición 2 está el div que contiene la imagen principal

//Se obtuvieron de la base de datos, las claves son nombres de campos
list($script, $list, $slideshow) = $gallery->getHtml('SUBImagen3', 'SUBImagen2', 'SUBNombre', 'SUBBloque1');
//Se obtuvieron del ejemplo anterior, los nombres son 'imagen', 'thumbnail', 'nombre' y 'descripcion'
list($script, $list, $slideshow) = $gallery->getHtml('imagen', 'thumbnail', 'nombre', 'descripcion');

Nótese que los nombres de los campos pueden variar dependiendo de cual sean los nombres de las claves que se utilizan para denotar la imagen, el thumbnail, el nombre y la descripción

Javascript

A nivel de usuario y de cliente este aspecto es irrelevante si sólo se quieren los aspectos principales y básicos de la galería, pero como cualquiera de nosotros, un buen programador siempre va a querer que su aplicación vaya más allá de lo básico. Pués aquí ofrecemos una pequeña explicación acerca de las utilidades en javascript de las que dispones.

La galería funciona por instancias. Su función principal se llama _gallery y recibe de único parámetro la id de la galería, lo que permite múltiples galerías en una misma página. Esta función devuelve un objeto que posee todos los métodos necesarios para manipular la galería:

<script type='text/javascript'>
  //id = '[ID]'
  var objetoGaleria = _gallery('[ID]');
  //id vacía
  var objetoGaleria = _gallery('');
  //id = 1
  var objetoGaleria = _gallery(1);
  //mostrar la foto en la posición #6 de la presentación
  objetoGaleria.showImage(6);
  //Hemos obtenido el objeto 'miGaleria' y de una manera más sencilla,
  //hemos mostrado la foto en la posición 6 de la presentación
  _gallery('miGaleria').showImage(6);
</script>

En el ejemplo anterior vemos todas las posibilidades de id que se pueden tener. Una cadena, vacía o un número. Pues bien, estas son las maneras de obtener el objeto de javascript que controla la galería a través de esta función. Justo después, demos que de ese objeto hemos llamado al método show(). Este método lo que recibe es el índice de la foto que se quiere mostrar y la muestra en la imagen principal. Cada vez que hacemos clic en cualquiera de los thumbnails, una línea parecida a esta es la que se ejecuta.

Al igual que este poseemos el control sobre un par de propiedades y métodos más, como son

<script type='text/javascript'>
  //id = '[ID]'
  var objetoGaleria = _gallery('[ID]');
  //Índice de la foto seleccionada actualmente en la galería (cuando es -1 no hay ninguna seleccionada)
  objetoGaleria.i;
  //Método que permite la inicialización del objeto de la galería (llamado automáticamente a través del script que devuelve php)
  //Este recibe la dirección a las imagenes, el arreglo con las imagenes y la cantidad el mouseOverTime (especificado en php) 
  objetoGaleria.init(imagePath, data, mouseOverTime);
  //mostrar la foto en la posición #6 de la presentación
  objetoGaleria.showImage(6);
  //Evento que se llama cuando se está colocando el mouse sobre la imagen #6.
  //Esto es para que pasado cierto tiempo sobre el thumbnail, se muestre en la imagen principal
  objetoGaleria.mouserOver(6);
  //Indicar que el mouse ya no está sobre el thumbnail #6,
  //si se estaba contando el tiempo para mostrarlo en la imagen principal, se cancela el evento.
  objetoGaleria.mouseOut(6);
  //Mostrar la primera foto
  objetoGaleria.first();
  //Mostrar la foto anterior
  objetoGaleria.previous();
  //Mostrar la siguiente foto
  objetoGaleria.next();
  //Mostrar la última foto
  objetoGaleria.last();
</script>

Todos estos métodos se pueden llamar dentro de javascript, sería simular el uso desde el lado del usuario.

Controles especializados

Como ya especificamos anteriormente, existen un conjunto de métodos que nos permiten contruir nuestros propios controles. Uno que vaya al principio, otro que vaya a la siguiente, otro que las vaya moviendo si dejamos un botón presionado.. Todo depende de lo que queramos. Un buen ejemplo sería:

<input type='button' value='Siguiente' onclick="_gallery('miGaleria').next();" />

 En este caso hemos creado con una facilidad notable un sencillo control. El botón dice siguiente y en su onclick tiene un script que obtiene la galería 'miGaleria' y hace que se muestre la siguiente imagen. Al igual que con este control, se pueden crear al menos cuatro tipos de controles. Con algo de ingenio, se pueden crear más controles. Todos pueden añadirse al objeto y extenderlo.