Crear transición de imágenes para Gallery2 con jQuery
Hoy os explicaré como aprovechar el módulo “imageBlock” de Gallery2 para generar una transición de imágenes. Además le daremos un efecto entre transición y transición, para dejarlo más majo :p
Podéis ver el resultado del ejemplo aquí. Lamentablemente la galería de la que dependía el ejemplo ha dejado de funcionar.
Primero de todo, debéis tener instalado y activado dicho módulo en la galería. Si tenéis una de las últimas versiones de Gallery podréis descargarlo automáticamente sin problemas, sino deberéis ir a la página de descarga de Gallery y descargaros una versión de contenga dicho módulo para agregarlo a vuestra instalación.
Una vez lo tengáis activado os aparecerá en vuestro panel de administración de Gallery2, como “Image Block” o “Bloque de imágenes” según vuestra versión, idioma …
En esa misma página podéis ver un ejemplo de cómo utilizar el bloque de imágenes externamente, podéis utilizar ese método (es con el que haré el ejemplo) o bien el método que indican en el codex, incluyendo el fichero embed.php y utilizando los métodos propios de las clases de Gallery2.
El código es el siguiente:
@readfile('http://vuestra.galeria.com/main.php?g2_view=imageblock.External&g2_blocks=randomImage&g2_show=none&g2_maxSize=130');
Utilizad el botón “show source” 
situado en la parte derecha del código para verlo entero.
Como veis lo que hacemos únicamente es importar el módulo image block con readfile para mostrar su contenido. A éste módulo podemos pasarle parámetros para mostrar las imágenes como más nos guste. Podéis ver toda la lista de parámetros desde vuestro panel de administración de Image Block, o bien desde el Codex de Gallery2. Los parámetros que utilizaré para el ejemplo son:
- g2_blocks: una lista separada de barras verticales (|) con aquellas imágenes que queramos mostrar. Estas pueden ser: randomImage, recentImage, viewedImage, randomAlbum, recentAlbum, viewedAlbum, dailyImage, weeklyImage, monthlyImage, dailyAlbum, weeklyAlbum, monthlyAlbum, specificItem; por defecto (si no pasamos el parámetro g2_blocks) será la opción que tengamos seleccionada en la configuración del módulo Image Block.
En mi ejemplo utilizaré el query string: g2_blocks=randomImage|randomImage|randomImage para mostrar 3 imágenes aleatorias. - g2_show: lista separada por barras verticales (|) con los detalles que queramos mostrar de la imagen. Pueden ser: title, date, views, owner, heading, fullSize, rawImage; también podemos utilizar none para no mostrar información alguna (como en el caso de este ejemplo).
- g2_maxSize: define el tamaño máximo a mostrar de las imágenes. Yo lo limitaré a 130 (px).
Y por supuesto el resto de la query string: main.php?g2_view=imageblock.External que es la encargada de cargar el módulo Image Block.
El query string resultante será:
main.php?g2_view=imageblock.External&g2_blocks=randomImage|randomImage|randomImage&g2_show=none&g2_maxSize=130
Así pues guardamos esta línea en un fichero que llamaremos “random_image.php”:
<?php
@readfile('http://vuestra.galeria.com/main.php?g2_view=imageblock.External&g2_blocks=randomImage|randomImage|randomImage&g2_show=none&g2_maxSize=130');
?>
Ahora pasaremos a hacer el código en JavaScript (utilizando jQuery, por supuesto) para hacer la transición de imágenes.
Crearemos dos capas, capa y subcapa dónde cargaremos las imágenes. La capa la utilizaremos para cargar las imágenes y la subcapa para hacer la precarga de la siguiente tanda de imágenes.
Básicamente nuestra función de JavaScript debe hacer:
- Cargar el fichero php en la subcapa y ocultarlo para que no lo vea el usuario.
- Hacer un efecto de FadeOut de las imágenes que hay.
- Mover el contenido de la subcapa a la capa.
- Hacer un FadeIn de la capa para mostrar las imágenes.
Llamaremos a esta función randomImages() (por ejemplo) y más adelante utilizaremos un contador para ejecutar dicha función indefinidamente.
function randomImages(){
// Cargamos el fichero random_image.php en la subcapa y lo ocultamos
$("#subcapa").load('random_image.php').hide();
// Hacemos un fadeOut de la capa de 2000 milisegundos y al terminar ejecutamos una función
$("#capa").fadeOut(2000, function(){
// Ocultamos la capa del todo (por si acaso)
$(this).hide();
// Cargamos el contenido de la subcapa en la capa y hacemos un fadeIn de 2000 milisegundos
$("#capa").html($("#subcapa").html()).fadeIn(2000);
});
}
De nuevo, utilizad el botón “Show Source” para ver el código y los comentarios al completo.
He puesto 2000 milisegundos de tiempo para dar más o menos tiempo a cargar al siguiente grupo de imágenes.
Ahora que ya tenemos nuestra función utilizaremos la función setInterval(String fn, int interval). El primer parámetro de ésta es el nombre de la función (pasado como cadena de texto) y el segundo es el intervalo de tiempo que tarda en ejecutarse dicha función entre ejecución y ejecución.
setInterval("randomImages()", 7000);
Ya tenemos todo el JavaScript que necesitaremos. Ahora sólo hace falta darle un poco de CSS e incluir el fichero PHP que hemos generado antes.
La clase de CSS de la capa que contiene las imágenes (la que nos genera Image Block) se llama “one-image” y dado que en mi ejemplo quiero mostrar las imágenes en hilera horizontal, le daré la opción “float: left” y para que haya un poco de espacio entre ellas “padding-left: 1em”. A demás debemos indicar que ambas capas capa y subcapa están en la misma posición, sino el efecto de transición no se hará correctamente. Para ello indicaremos que tienen una posición absoluta y las ubicaremos en el mismo sitio:
.one-image {
float: left;
padding-left: .7em;
}
#capa, #subcapa {
position: absolute;
top: 1em;
left: .6em;
}
/* ocultamos los bordes feos que aparecen al enlazar imágenes */
a img {
border: none;
}
Finalmente incluimos el fichero random_image.php en la capa para que muestre las imágenes la primera vez que accedamos a la página:
<div id="capa"> <?php include 'random_image.php'; ?> </div>
Aquí podéis ver el documento HTML/PHP entero:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Transición de imágenes aleatorias de Gallery2 con jQuery</title>
<style type="text/css">
.one-image {
float: left;
padding-left: .7em;
}
a img {
border: none;
}
#capa, #subcapa {
position: absolute;
top: 1em;
left: .6em;
}
</style>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
<!--
function randomImages(){
$("#subcapa").load('random_image.php').hide();
$("#capa").fadeOut(2000, function(){
$(this).hide();
$("#capa").html($("#subcapa").html()).fadeIn(2000);
});
}
setInterval("randomImages()", 7000);
-->
</script>
</head>
<body>
<div id="capa">
<?php
include 'random_image.php';
?>
</div>
<div id="subcapa"></div>
</body>
</html>
Y ya está! Ya tenéis vuestra transición de imágenes para Gallery2. Podéis jugar con el CSS y mostrar cuadrículas con imágenes (consultad el Codex de Gallery para más detalles), así como trastear las múltiples opciones de Image Block para mostrar el contenido que queráis.
Como siempre, he intentado explicarlo lo mejor posible. Espero que os sirva de ayuda 😀
Hay una cosa que he intentado hacer y que no he logrado de ninguna de las maneras.. a ver si algún alma caritativa que llegue aquí y sepa explicarlo me lo explique ;p He intentado mediante booleanos, bucles, deteniendo el temporizador… que al pasar el ratón por encima de la capa se detenga la transición de imágenes, pero nada. No lo he conseguido…
Imagino que para hacerlo tendríamos que programar la transición más detenidamente en lugar de utilizar un framework como jQuery. Ahí queda, a ver si alguien sabe hacerlo!
Ver demo del tutorial- Descargar zip con todos los ficheros
Páginas de referencia:
