Una forma rápida de acceder a una galería de Flickr utilizando jQuery

¡Saludos de nuevo blogueros!

Siguiendo con las pruebas de la biblioteca jQuery, ahora me puse a revisar su potencial explotando algún servicio de imágenes de Internet, entre los que encontré los servicios para acceder a las galerías de imágenes de Flickr. Este manejador de imágenes posee varias formas para que nuestras aplicaciones puedan descargarse una lista con la información de las imágenes que tienen sus álbumes, ya sea a consumiendo alguna de sus APIs para la búsqueda de fotografías o utilizando su servicio de suscripción al feed RSS de un usuario.

Si consumimos alguna de las APIs de Flickr, tenemos la posibilidad de buscar sobre toda la base de datos del sistema, cualquier fotografía que coincida con las palabras clave o el identificador del usuario que estemos buscando. Esta forma de utlizar jQuery se explora en este artículo de CocinaMental, donde se utiliza la API flickr.photos.search.

Por otro lado, a través de un feed RSS, podemos acceder a la información de las últimas fotografías que han sido agregadas a la galería de un usuario específico.

El método que exploraremos en este artículo consistirá en consumir el feed RSS de una galería de Flickr desde nuestra aplicación AJAX, dejando a los usuarios que deseen saber como explotar las APIs de Flickr la referencia a al artículo en CocinaMental, donde se expone bastante claro como lograrlo. Como no es mi intención crear una artículo redundante me decante por este método sobre el de las APIs, además de que es sumamente rápido ponerlo a trabajar.

Antes de empezar

Adicionalmente a la biblioteca jQuery, en el programa utilizaremos un plug in llamado cycle, el cual nos permitirá agregar el efecto de cambio automático de imágenes con desvanecimiento a la galería que mostraremos.

Ambas bibliotecas las incluiremos en nuestro código con referencias a sus archivos fuente, pero en esta ocasión no será necesario descargar ningún archivo, ya que referenciaremos directamente al último archivo fuente, que se encuentra en los servidores de cada uno de los proveedores de sus códigos fuente.

Primero elegimos las imágenes

El primer paso consiste en darnos un paseo por Flickr y encontrar alguna galería que nos interese utilizar para la prueba, toda galería posee un autor, es decir el usuario que subió las imágenes, así que la galería que elijamos está directamente vinculada con este usuario. Por ejemplo en una consulta a una imagen de Flickr acabé accediendo a la galería del usuario Plateada, que podemos ver en la imagen siguiente:

Dentro de la información que aparece, lo que nos interesa para nuestra aplicación está al final de la página, en esta parte podemos ver el enlace al feed RSS de la galería, llamado Latest:

Pero no haremos clic sobre el enlace, sino que nos fijaremos en la URL que aparece en éste, ya que dentro de esta URL está la información que utilizaremos para acceder a la galería. Podemos copiar esta dirección URL para verla con calma y obtendremos un texto como el siguiente:

http://api.flickr.com/services/feeds/photos_public.gne?id=59492828@N00&lang=en-us&format=rss_200

El campo id corresponde al identificador del usuario autor de la galería Plateada, y este es precisamente el dato que utilizaremos en nuestra aplicación de ejemplo.

Vamos al código

El código para la aplicación Web que implementará esta galería es el siguiente:

galeriaJQuery.html

<!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=utf-8" />
<title>Galería de imágenes de Flickr con jQuery</title>
    <style type="text/css">
 .slideshow { margin: 20px auto; padding: 0; }
 .slide { margin: 0; padding: 0}
 .slide img { padding: 15px; border: 1px solid #ccc; background-color: #eee; margin: auto; display: block }
    </style>
    <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
    <script src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.min.js" type="text/javascript"></script>
    <script type="text/javascript"> 
 $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?id=59492828@N00&lang=en-us&format=json&jsoncallback=?",
  function(data){ 
     $.each(data.items, function(i,item){
       $("<img/>").attr("src", item.media.m).appendTo("#imagenes").wrap("<div class=\"slide\"><h3>"+ item.title +"</h3><a href='" + item.link + "'></a></div>");
     });
     $('#imagenes').cycle({
       fx:     'fade',       
       timeout:  5000
     });
  });
    </script>    
</head>
<body>
<div id="imagenes" class="slideshow"></div> 
</body>
</html>

Como vemos, se referencia a los archivos fuente de las blibliotecas jQuery y cycle desde su ubicación dentro de Internet en sus servidores Web.

Además se incluye un pequeño syle CSS para darle una apariencia más agradable a las imágenes, incluyendo en cada una un pequeño marco gris.

En lo que corresponde a la funcionalidad, el acceso a la lista de imágenes se lleva a cabo por mediante la funcionalidad jQuery.getJSON, que lleva a cabo una petición de datos en formato JSON al servidor de Flickr, utilizando una solicitud HTTP-GET (es decir, con los datos incluidos un la dirección URL del recurso al que estamos accediendo).

$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?id=59492828@N00〈=en-us&format=json&jsoncallback=?",

Dentro de la URL que utiliza la función es donde se incluirá el id del usuario que obtuvimos previamente, en este caso 59492828@N00.

Recibir la información de respuesta en formato JSON facilita bastante el trabajo, ya que es interpretada por javascript como una estructura nativa del lenguaje, y gracias a esto podemos utilizarla directamente dentro de la aplicación. Como sucede en la función que se define en seguida:

function(data){
 $.each(data.items, function(i,item){
   $("<img/>").attr("src", item.media.m).appendTo("#imagenes").wrap("<div class=\"slide\"><h3>"+ item.title +"</h3><a href='" + item.link + "'></a></div>");
 });
 $('#imagenes').cycle({
   fx:     'fade',   
   timeout:  5000
 });
});

En donde, utilizando la funcionalidad de jQuery each, podemos rellenar el elemento div "imagenes" con la información de cada una de las imágenes que recibimos como respuesta a la petición, incluyendo la ruta URL al archivo de la imagen, con lo que utilizando etiquetas HTML podemos visualizar todas las imagenes un nuestra aplicación.

Finalmente, utilizando el plug in cycle, es que podemos agregar la función para cambiar automáticamente una imagen por la siguiente en la lista, incluyendo un atractivo efecto de desvanecimiento entre una imagen y la otra. En este caso el efecto para hacer el cambio es el 'fade' (se desvanecen) que nos proporciona la biblioteca, con un tiempo entre los cambios de 5000 milisegundos.

El resultado final deberá desplegar todas las imágenes de la galería Plateada, incluyendo el título de cada una, haciendo automáticamente el cambio ante nuestros ojos:

Para visualizar cualquier otra galería de Flickr que deseemos, bastará modificar el argumento id dentro de la URL que aparece en el código fuente, con el identficador del autor de la galería que queramos. De esta forma, utilizando recursos 100% libres, podemos agregar un atractivo elemento para nuestras aplicaciones Web.

Hasta la próxima.

La cabaña del eremita Web

miércoles, 28 de abril de 2010