Rlightbox

Name: Rlightbox
Brand: Jose Aguilar
SKU: joseaguilarblog-1595
Availability: InStock
Rating: 0 (0 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.

Tiene una gran similitud al script Lightbox para ampliar imágenes pero además permite por ejemplo ampliar una imagen con gran calidad, abrir una galería de imágenes donde cada foto puede tener su descripción podiendo pasar de foto a foto dentro de la vista en panorama. También permite visionar videos de YouTube o Vimeo con un aspecto muy agradable.

La visión en panorama es una forma de mostrar parte de una imagen de tamaño completo en la pantalla. Puesto que a menudo una imagen es más grande que la pantalla, tiene que ser reducido. La vista en panorama le permite verlo en sus resoluciones nativas mediante los movimientos horizontales, es decir, arrastrar y soltar.

El modo Panorama está disponible cuando el icono con cuatro flechas aparece en la esquina superior izquierda del widget. Para activarlo, puede hacer clic en el icono o el uso del teclado (tecla [Z] es la opción predeterminada).

rlightbox ha sido probado en muchos navegadores. Algunos navegadores como Internet Explorer 6 son demasiado antiguos y no se apoya. Debido a algún ciclo de liberación como la de los navegadores Chrome y Firefox hasta hace poco, es muy difícil hacer un seguimiento del comportamiento de rlightbox en estos navegadores. Así, el widget se puso a prueba sólo en Chrome / Chromium y Firefox 4 y 5.

rlightbox fue probado en los siguientes navegadores:

Internet Explorer 7+
Firefox 3.0.19+
Chrome
Opera 10.00+
Safari 4.0.5+

Para hacer funcionar este estupendo ampliador de imágenes y videos 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 class="lb_galery" 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