icono_twiter icono LinkedIn
Miguel Arlandy Rodríguez

Consultor tecnológico de desarrollo de proyectos informáticos.

Puedes encontrarme en Autentia: Ofrecemos servicios de soporte a desarrollo, factoría y formación

Somos expertos en Java/JEE

Ver todos los tutoriales del autor

Fecha de publicación del tutorial: 2012-01-09

Tutorial visitado 23.120 veces Descargar en PDF
JQuery: galerías de imágenes y vídeos con Pretty Photo.

JQuery: galerías de imágenes y vídeos con Pretty Photo.


0. Índice de contenidos.


1. Introducción

Existen multitud de ocasiones en las que queremos añadir una galería de imágenes en nuestras web's para hacerlas más atractivas para el usuario. Incluso podríamos pensar en la posibilidad de añadir vídeos a dicha galería para hacerla más completa. Como muchos sabréis, JQuery es una poderosa librería Javascript que permite (entre otras muchas cosas) manipular los elementos del DOM consiguiendo efectos bastante espectaculares.

En este tutorial vamos a ver cómo crear galerías de imágenes y vídeos con JQuery y el plugin "prettyPhoto".


2. Entorno.

El tutorial está escrito usando el siguiente entorno:

  • Hardware: Portátil MacBook Pro 15' (2.2 Ghz Intel Core I7, 8GB DDR3).
  • Sistema Operativo: Mac OS Snow Leopard 10.6.7
  • Entorno de desarrollo: Eclipse 3.7 Indigo.
  • JQuery 1.6.1.
  • Pretty Photo 3.1.3.

3. Preparando el entorno.

Pues vamos a empezar... Lo primero que necesitamos es descargarnos la última versión de prettyPhoto. Comprobamos que viene empaquetado en un .zip. Lo descomprimimos y obvervamos su contenido:

Como podemos observar en la imagen, vienen una gran cantidad de archivos, aunque solo necesitaremos llevarnos algunos a nuestra aplicación. Vamos a explicar qué son:

  • css/prettyPhoto.css: es la hoja de estilos de la galería. Obligatorio.
  • images/prettyPhoto/*: imágenes que utiliza la galería para construirse como tal (no son las imágenes que se mostrarán). Obligatorio.
  • images/thumbnails/*: directorio que para meter las imágenes pequeñas de la galería (las que se ven sin ampliar). Contiene algunas imágenes a modo de ejemplo. Opcional.
  • images/fullscreen/*: directorio que para meter las imágenes grandes de la galería (las que se verán ampliadas). Contiene algunas imágenes a modo de ejemplo. Opcional.
  • js/*: jquery y plugin prettyPhoto. Sólo es obligatorio el archivo jquery.prettyPhoto.js y la versión de jquery que vayamos a usar (en nuestro caso la 1.6.1)
  • Los ficheros: index.html, xhr_response.html y README son ejemplos de uso e información de la distribución. Opcionales.

Para nuestro ejemplo utilizaremos los ficheros obligatorios y, además los directorios con las imágenes de ejemplo que vienen en la distribución: thumbnails y fullscreen.

Seguidamente creamos un fichero ejemploPrettyPhoto.html y lo adaptamos para que importe los recursos necesarios para crear la galería. Quedaría de la siguiente forma:


<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Galería de imágenes y vídeos con Pretty Photo</title>
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css"/>
<script src="js/jquery-1.6.1.min.js" type="text/javascript"></script>
<script src="js/jquery.prettyPhoto.js" type="text/javascript"></script>
</head>
<body>
<h1>GALERÍA DE IMÁGENES Y VÍDEOS CON PRETTY PHOTO</h1>

</body>
</html>

Pues bien, ya estamos en disposición de crear nuestra primera galería...


4. Creando la galería de imágenes.

Crear la galería es un proceso muy sencillo. Hay que realizar dos pasos:

  • Paso 1: crear una lista de enlaces, a modo de imágenes pequeñas, que enlarán con las imágenes más grandes.
  • Paso 2: activar prettyPhoto para que reconozca esos enlaces y trate como una galería.

Para que prettyPhoto entienda que los enlaces son parte de una galería, debemos marcar esos enlaces con el atributo "rel" igual a "prettyPhoto". Si tuviésemos más de una galería, deberíamos añadir además, en el valor de dicho atributo la galería a la que pertenece.

Para que estos enlaces tengan el comportamiento propio de una galería, debemos invocar al método "prettyPhoto" de la librería. El método acepta una gran cantidad de parámetros que establecerán el comportamiento de la galería: autostart, títulos, pies de imagen, enlaces con redes sociales, tiempo de transición entre imágenes, etc... Aquí pueden verse todas las opciones que acepta la librería.

Nuestra primera galería de imágenes quedaría así:


<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Galería de imágenes y vídeos con Pretty Photo</title>
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css"/>
<script src="js/jquery-1.6.1.min.js" type="text/javascript"></script>
<script src="js/jquery.prettyPhoto.js" type="text/javascript"></script>
<style type="text/css">
ul.galeria li {
	display: inline; /* se muestra la galería en horizontal */
}
</style>
</head>
<body>

GALERÍA DE IMÁGENES Y VÍDEOS CON PRETTY PHOTO

GALERIA 1

</body> </html>

Observemos que en el código anterior:

  • Los enlaces tienen el atributo rel="prettyPhoto[gallery]", con lo que estamos indicando que pertenecen a una galería a la que hemos llamado gallery.
  • Los enlaces contienen una imagen pequeña (thumbnails) y enganchan con una imagen grande.
  • Las rutas de las imágenes pueden ser tanto relativas (imagen 1) como absolutas (imágenes 2 y 3).
  • El atributo tittle de los enlaces será el texto que aparecerá en el pie de la foto y el atributo alt de la imagen será el texto que aparecerá encima de la foto grande.
  • Al iniciar prettyPhoto le estamos pasando 3 propiedades: el tema (estilo) que queremos que use, el tiempo de transición entre imágenes y que queremos que las imágenes pasen automáticamente. Recordar que se pueden ver las propiedades aquí.

5. Creando una galería con imágenes y vídeos.

Añadir un vídeo a una galería es muy sencillo. Lo único que varía con respecto a la imagen es que el enlace debe apuntar al recurso, que puede ser un .swf o la URL de un vídeo de youtube. Nótese que los vídeos pueden combinarse con imágenes en la misma galería


GALERIA 2

<script type="text/javascript"> $(document).ready(function(){ $("#imagenesVideos a[rel^='prettyPhoto']").prettyPhoto({theme: 'facebook'}); }); </script>

Observemos que ahora, al inicializar la nueva galería (gallery2), no estamos añadiendo la opción de pase automático de imágenes o vídeos.

Podemos ver el ejemplo completo aquí.


6. Referencias.


7. Conclusiones.

En este tutorial hemos visto una solución bastante interesante para crear galerías de imágenes y vídeos en nuestras webs. Nótese que prettyPhoto tambíen puede incluir en sus galerías iframes o respuestas Ajax. Otra característica muy interesante de este plugin, es la capacidad de compartir los contenidos de la galería en Facebook o Twitter.

Espero que este tutorial os haya sido de ayuda. Un saludo.

Miguel Arlandy

marlandy@autentia.com

Twitter: @m_arlandy

A continuación puedes evaluarlo:

Regístrate para evaluarlo

Por favor, vota +1 o compártelo si te pareció interesante

Share |
Anímate y coméntanos lo que pienses sobre este TUTORIAL:

Fecha publicación: 2014-08-01-23:43:55

Autor: gbzero

:D Gracias! Me sirvió mucho tu tutorial

Fecha publicación: 2014-03-21-12:07:44

Autor: Libertad

pedón por la duplicidad del mensaje, mi nena que le encanta....

Fecha publicación: 2014-03-21-12:06:32

Autor: Libertad

Hola Marlandy.
Gracias por el tutorial.
Mi pregunta es como hacerlo en blogger. Antes del </head> importo los archivos de prettyPhoto.css y los jquery. Para aplicar Pretty foto en las entradas, se puede hacer general, es decir, para todas las fotos que hay en el blog o tengo que poner en cada entrada el script y la galería de las misma?

Gracias.

Fecha publicación: 2014-03-21-11:46:00

Autor: Libertad

Hola Marlandy.
Gracias por el tutorial.
Mi pregunta es como hacerlo en blogger. Antes del </head> importo los archivos de prettyPhoto.css y los jquery. Para aplicar Pretty foto en las entradas, se puede hacer general, es decir, para todas las fotos que hay en el blog o tengo que poner en cada entrada el script y la galería de las misma?

Gracias.

Fecha publicación: 2012-11-03-16:27:41

Autor: Mapache

Hola Marlandy,

Ya lo he conseguido por ahora. Se vé que el código original de "PrettyPhoto" está mal. Lo he hecho con el vuestro y funciona. Ahora sólo me falta personalizarlo.
Gracias.www.malagaexplorer.com/terrakas/

Fecha publicación: 2012-11-03-15:45:26

Autor: Mapache

Hola Marlandy,

Perdona por el retraso en contestar. Vamos que no pensaba que te iba a pillar conectado.
A tu pregunta te puedo decir que si veo el código fuente.
Además he subido los archivos a mi web : http://www.malagaexplorer.com/cat%20jquer/
Por si quieres echarle un vistazo arriba. He utilizado el código original de "PrettyPhoto". Aún así no me sale el dichoso botón de facebook.
Gracias.

Fecha publicación: 2012-11-03-15:42:21

Autor: Mapache

Hola Marlandy,

Perdona por el retraso en contestar. Vamos que no pensaba que te iba a pillar conectado.
A tu pregunta te puedo decir que si veo el código fuente.
Además he subido los archivos a mi web : http://www.malagaexplorer.com/cat%20jquer/
Por si quieres echarle un vistazo arriba. He utilizado el código original de "PrettyPhoto". Aún así no me sale el dichoso botón de facebook.
Gracias.

Fecha publicación: 2012-11-03-13:23:11

Autor: marlandy

Hola Mapache,
No es la primera vez que alguien me comenta que ha tenido problemas con el botón de Facebook pero si que es el primer caso donde no aparece el botón. Sin ver tu código no puedo hacer mucho, sin embargo en el ejemplo del tutorial si que aparece y funciona correctamente. Puedes ver el código fuente aquí:
http://www.adictosaltrabajo.com/tutoriales/galeriaImagenesVideosPrettyPhoto/ejemploPrettyPhoto.html

Fecha publicación: 2012-11-03-13:14:57

Autor: Mapache

Hola Buenas,
Me parece muy bueno el tutorial y me funciona perfectamente excepto por el boton de facebook que no me aparece ni en la imagen ni en el video. ¿Podrías echarme una mano?.
Gracias,

Fecha publicación: 2012-11-03-13:00:45

Autor: Mapache

Hola Buenas,
Me parece muy bueno el tutorial y me funciona perfectamente excepto por el boton de facebook que no me aparece ni en la imagen ni en el video. ¿Podrías echarme una mano?.
Gracias,

Fecha publicación: 2012-05-23-22:19:22

Autor: danielcg23

Hola Buena tarde he visto que aquí hay galerías de prettyphoto y me han parecido muy buenos ademas de ser muy útiles... yo tengo una galería de la cual conseguí en otra web antes de encontrar esta... pero lo que no logro hacer es que dentro de la foto que se muestra al hacer click en la galería aparezcan los botones de twitter y facebook mi pregunta es::: que comandos puedo agravar a la galería de prettyphoto que yo tengo en mi web para que puedan aparecer estos botones de twitter y facebook... aquí les dejo el link donde tengo alojada la web con la galería http://www.emsisa.mx/tips/clientes.html .... espero puedas ayudarme ,saludos

Fecha publicación: 2012-04-30-17:42:36

Autor: alfa

Hola gracias ya logre encontrar el problema ya quedo resuelto gracias saludos

Fecha publicación: 2012-04-30-17:22:53

Autor: alfa

Disculpe que moleste nuevamente no quisiera pero he hecho al pie de la letra como lo marca su tutorial pero cuando cargo mi proyecto solo me muestra todas mis imagenes en forma vertical poniendome primero las imagenes grandes y luego las pequeñas pero sin ninguna animación por que cuando le doy clic a una imagen pequeña solo me mueve en la pagina a donde esta esa misma imagen en grande, desde ya gracias por su ayuda y paciencia

Fecha publicación: 2012-04-29-22:20:46

Autor: marlandy

Has hecho muy bien. Con eso debería funcionarte sin problemas

Fecha publicación: 2012-04-29-22:09:00

Autor: alfa

Solo un ultimo comentario me encontraba tratando de descargar jquery 1.6.1 y en la pagina solo me mandaba a otra pagina con código me parece es decir no me daba un archivo directo a descarga es correcto que haya copiado ese código, lo haya copiado en una bloc de notas y guardado como jquery 1.6.1 con extension .js?

disculpe tantas preguntas pero soy un novato

Fecha publicación: 2012-04-29-22:03:50

Autor: alfa

Solo un ultimo comentario me encontraba tratando de descargar jquery 1.6.1 y en la pagina solo me mandaba a otra pagina con código me parece es decir no me daba un archivo directo a descarga es correcto que haya copiado ese código, lo haya copiado en una bloc de notas y guardado como jquery 1.6.1 con extension .js?

disculpe tantas preguntas pero soy un novato

Fecha publicación: 2012-04-29-22:00:21

Autor: alfa

Muchas gracias por su atención y del mismo modo gracias por compartir el conocimiento acerca de este plugin saludos cordiales

Fecha publicación: 2012-04-29-21:56:46

Autor: marlandy

Hola alfa,

El plugin Pretty Photo tiene licencia GPLv2 por lo que puedes usarlo tranquilamente en cualquier proyecto. Del mismo modo, puedes hacer lo que quieras con el código fuente del ejemplo de este tutorial.

Fecha publicación: 2012-04-29-21:22:51

Autor: alfa

Me parece excelente el trabajo desarrollado pero tengo una pregunta se puede utilizar este ejemplo en alguna página que yo este desarrollando por ejemplo, bueno tengo la duda por que no se si este permitido o no gracias de antemano

Fecha publicación: 2012-02-03-17:53:23

Autor: coffeerotw

Excelente :D me parece perfecto justo lo que buscaba,
UNA PAGINA DE VERDAD !!!! GRACIAS
Soy de Mexico yo tmb puedo obtener una camiseta igual???

Fecha publicación: 2012-01-10-17:40:21

Autor: marlandy

Hola andrs, pues muy sencillo... Pásate por la oficina de Autentia y te damos una.

Fecha publicación: 2012-01-09-23:34:51

Autor: andrs

Miguel, quiero una camiseta de @terrakas, por favor, ¿dónde puedo conseguir una?.