Programación Web en cliente

Es quizá la más famosa de la herramientas/librerias dedicada a la visualización de imágenes. Tiene una estética mas cuidada e impactante que en el caso de iBox. Como problema fundamental tiene su excesivo peso, debido fundamentalmente a que requiere jQuery. Hay que tener en cuenta que solamente se pueden mostrar imágenes con esta librería.

Para hacer uso de este complemento vamos a necesitar incluir jQuery en nuestra Web. Después solo debemos incluir el fichero .js con el plugin, un fichero css y la carpeta de imágenes. La web del proyecto donde podemos bajar los códigos la podemos encontrar en la siguiente url: http://leandrovieira.com/projects/jquery/lightbox/. En total deberemos incluir tres ficheros en nuestros scripts:

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

A la hora de utilizar LightBox, lo hacemos de la misa forma que se usan todos los plugins de jQuery, utilizando el selector $:

$('#selectorCss').lightBox();

Con esta librería también podemos cargar varias imágenes y pasar de una a otra una vez seleccionamos una de ellas. Para hacer esto, solo debemos utilizar un selector Css que englobe varios elementos:

$('.claseGaleria').lightBox();

En este caso referenciariamos a todos los elementos de la clase “claseGaleria”.

En el siguiente código mostramos una web donde se visualizará una galería de tres fotos haciendo uso de LightBox:

<html>
   <head>
      <script type="text/javascript" src="jquery.js"></script>
      <script type="text/javascript"
         src="jquery.lightbox-0.5.js"></script>
         <link rel="stylesheet"
            href="jquery.lightbox-0.5.css"
            type="text/css"
            media="screen" />
         <script type="text/javascript">
            $(function() {
               $('.galeria').lightBox();
            });
         </script>
   </head>
   <body>
      <a class="galeria" style="decoration:none"
         href="imagenes/imagen1big.jpg" >
         <img border="0" src="imagenes/imagen1.jpg"/>
      </a>
      <a class="galeria" style="decoration:none"
         href="imagenes/imagen2big.jpg" >
         <img border="0" src="imagenes/imagen2.jpg"/>
      </a>
      <a class="galeria" style="decoration:none"
         href="imagenes/imagen3big.jpg" >
         <img border="0" src="imagenes/imagen3.jpg"/>
      </a>
   </body>
</html>

El resultado de este script sería fig_ejemplo_lightbox: