Abrir una galería de imágenes con Rlightbox

Name: Abrir una galería de imágenes con Rlightbox
Brand: Jose Aguilar
SKU: joseaguilarblog-2942
Availability: InStock
Rating: 5 (1 reviews)

rlightbox es una interfaz de usuario jQuery mediabox que puede mostrar muchos tipos de contenidos tales como imágenes, vídeos de YouTube y Vimeo. Tiene muchas características únicas, como la vista en panorama y la redimensión en vivo.

En este artículo vamos a explicar como abrir en una ventana modal una galería de imágenes utilizando Rlightbox.

Para hacer funcionar este estupendo ampliador de imágenes deberemos incluir en el <head> de nuestra página Web lo estilos y scripts:

<link type="text/css" rel="stylesheet" href="css/ui-lightness/jquery-ui-1.8.16.custom.css" />
<link type="text/css" rel="stylesheet" href="css/lightbox.min.css" />
<script type="text/javascript" src="lib/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="lib/jquery.ui.core.min.js"></script>
<script type="text/javascript" src="lib/jquery.ui.widget.min.js"></script>
<script type="text/javascript" src="lib/jquery.ui.rlightbox.min.js"></script>
<script type="text/javascript">
    jQuery(function($) {
        $( ".lb_galery" ).rlightbox({counterDelimiter: " de "});
    });
</script>

Después en el <body>, por ejemplo para obtener una estupenda galería de imágenes podemos hacer lo siguiente:

<a class="lb_galery" title="Warsaw, April 10, 2011: ‘combat lie with the truth’" href="images/01.jpg">
   <img alt="Warsaw, April 10, 2011: ‘combat lie with the truth’" src="images/01.jpg" width="160" height="120"/>
</a>
<a class="lb_galery" title="authority vs. the people" href="images/03.jpg">
   <img alt="Warsaw, April 10, 2011: ‘combat lie with the truth’" src="images/03.jpg" width="160" height="120"/>
</a>
<a class="lb_galery" title="‘Katyń: I remember’" href="images/05.jpg">
   <img alt="Warsaw, April 10, 2011: ‘combat lie with the truth’" src="images/05.jpg" width="160" height="120"/>
</a>
<a title="take Tusk to court" href="images/06.jpg">
   <img alt="Warsaw, April 10, 2011: ‘combat lie with the truth’" src="images/06.jpg" width="160" height="120"/>
</a>
<a class="lb_galery" title="thousands of lights" href="images/07.jpg">
   <img alt="Warsaw, April 10, 2011: ‘combat lie with the truth’" src="images/07.jpg" width="160" height="120"/>
</a>

Ver ejemplos en funcionamiento