En la entrada anterior veíamos como podíamos crear una galeria con lightbox, en este caso vamos a crear una galería de imágenes con PrettyPhoto, esta galería es más completa, teniendo un aspecto diferente pudendo elegir entre diferentes temas, además podemos compartir nuestra fotos con las redes sociales o hacer que se cambien automáticamente las fotos de una a otra, también nos permite la inserción de videos de diferentes plataformas o el visualizar un archivo externo.

Lo primero que debemos hacer es descargarnos la galería de su web http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/ o desde el siguiente enlace: prettyphoto 3.1.6

Una vez descargado tenemos que descomprimir el archivo el cual nos generara las siguientes carpetas: js,css,images. Dentro de la carpeta images hay dos carpetas que podemos borrar fullscreen y thumbnails.

A continuación pondremos en nuestra web las fotos en miniatura con un enlace a su correspondiente foto a tamaño completo, algo similar a:

<a href="imagenes/coche1.jpg"><img src="imagenes/coche1_peque.jpg" width="300" height="200" alt=""/></a> 
<a href="imagenes/coche2.jpg" ><img src="imagenes/coche2_peque.jpg" width="300" height="200" alt=""/></a> 
<a href="imagenes/coche3.jpg" ><img src="imagenes/coche3_peque.jpg" width="300" height="200" alt=""/></a> 

En los enlaces tenemos que añadir dos atributos el rel y el title, el primero es obligatorio añadirle y lo que hace es que cuando se muestra una imagen en grande con los botones alante y atrás podamos cambiar de foto a todas aquellas que tengan el mismo atributo rel. El title es opcional y nos mostrara una descripción de la imagen a modo pie de foto, quedando de la siguiente forma.

<a href="imagenes/coche1.jpg" rel="prettyPhoto[pp_gal]" title="Mi coche 1"><img src="imagenes/coche1_peque.jpg" width="300" height="200" alt=""/></a> 
<a href="imagenes/coche2.jpg" rel="prettyPhoto[pp_gal]" title="Mi coche 2"><img src="imagenes/coche2_peque.jpg" width="300" height="200" alt=""/></a> 
<a href="imagenes/coche3.jpg" rel="prettyPhoto[pp_gal]" title="Mi coche 3"><img src="imagenes/coche3_peque.jpg" width="300" height="200" alt=""/></a> 

Ahora debemos añadir la hoja de estilos y los correspondientes js para que funcione, en este caso trae la version 1.6.1 de jquery pero si tenemos una posterior podemos usarla, añadiremos delante del </head> lo siguiente:

<script src="js/jquery-1.6.1.min.js" type="text/javascript" ></script>
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen"/>
<script src="js/jquery.prettyPhoto.js" type="text/javascript" ></script>

Luego por último nos quedaría por inicializar PrettyPhoto que lo haremos al final de la página por encima del </body> insertando lo siguiente:

<script type="text/javascript" charset="utf-8">
  $(document).ready(function(){
    $("a[rel^='prettyPhoto']").prettyPhoto();
  });
</script>

A la hora de inicializar PrettyPhoto podemos personalizar varias cosas como por ejemplo el tema y el auto play de las diapositivas, en tema podemos elegir entre las siguientes opciones: pp_default / light_rounded / dark_rounded / light_square / dark_square / facebook. Podemos ver más opciones en:http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/documentation

<script type="text/javascript" charset="utf-8">
  $(document).ready(function(){
    $("a[rel^='prettyPhoto']").prettyPhoto({
		theme: 'light_rounded',
		autoplay_slideshow: true
		});
  });
</script>

A continuación tenemos un ejemplo funcionando.

Si quieres puedes verlo y descargarlo en: PrettyPhoto