Trabajando con el plugin Lightbox de jQuery

Sigo con los desarrollos en PHP matando mi tiempo de parado (creo que me matricularé en un curso de desarrollo para Android de Aula Mentor mañana, por meterme al fin en el mundo de las apps móviles aunque, por otra parte, no tenga smartphone, ni lo tendré hasta que no tengan un SO totalmente libre), y el otro día me vi en la situación idónea para utilizar Lightbox, un plugin para jQuery con licencia Copyleft, fácil de implementar y con un resultado vistoso.

En fin, lo primero que debéis hacer es descargaros el plugin desde la página de su creador y la librería jQuery. De la página del creador os bajaréis un zip con cuatro carpetas:

  • La carpeta js contiene el código javascript del plugin, en versión comprimida (la que pone min, que ocupa menos porque se come los espacioes en blanco) y en una versión más legible (por si queréis meterle mano y modificarlo). Bueno, también podéis modificar la min, pero al estar sin sangrado ni saltos de línea para ocupar menos no hay dios que lea el código. Hay un tercer archivo que pone pack, que la verdad no se muy bien para qué vale (los estudiaré a fondo más adelante)
  • En la capeta css encontraréis la hoja de estilos para usar el plugin.
  • En la carpeta images hay varias imágenes que utiliza el plugin para la presentación (botones de NEXT, PREV  y CLOSE).
  • Finalmente la carpeta photo incluye varias imágenes de ejemplo, podéis borrarla sin problema.
  • También hay un archivo index.html que incluye un ejemplo con las imágenes de la carpeta photo.

Bien, copia a tu proyecto la biblioteca jQuery, el archivo .css y el archivo .js (si vas a usarlo a saco, sin modificar, usa el .min.js porque ocupa menos) del plugin y la carpeta images. Tras esto debes chargar los archivos en la cabecera del proyecto, dentro de una etiqueta SCRIPT para ls .js y de LINK para los CSS, tal que así:

<script type="text/javascript">// <![CDATA[
type</span>="text/javascript" src="js/jquery-1.7.1.min.js">
// ]]></script>
<script type="text/javascript">// <![CDATA[
type</span>="text/javascript" src="js/jquery.lightbox-0.5.min.js">
// ]]></script>
rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css"/>

Bueno, he usado las rutas de mi proyecto, acordaos de usar las vuestras cuando lo implementéis.
Luego lo más tópico es crear una lista de thumbnails, usando una estructura de lista desordenada, algo tipo:

</pre>
<div id="<span class=">dvFotoFilo"></div>
<pre>
<ul>
<ul>
	<li><a class="hiddenSpellError">class="foto" href="photo/0.jpg"><img src="photo/0.jpg" alt="" width="125px" height="93px" /></a></li>
</ul>
<ul>
	<li><a class="hiddenSpellError">class="foto" href="photo/00.jpg"><img src="photo/00.jpg" alt="" width="125px" height="93px" /></a></li>
</ul>
<ul>
	<li><a class="hiddenSpellError">class="foto" href="photo/000.jpg"><img src="photo/000.jpg" alt="" width="125px" height="93px" /></a></li>
</ul>
</ul>
</div>

La estructura es simple: Un div para las fotos, dentro de dicho div una lista desordenada y dentro de cada elemento de la lista un enlace a la ruta de la imágen que queréis mostrar, y dentro de dicho enlace una versión reducida de la imagen. En este caso estoy usando la imagen grande reducida con propiedades css, pero podéis crear un thumbnail del tamaño adecuado, que sería más recomendable porque acelerará la carga. En cualquier caso la clave es la clase (class = “foto”) que se aplicará al elemento, porque la necesitaremos en el siguiente punto, que es invocar la función lightbox del plugin, con el siguiente script:

$(document).ready(function(){
$('.foto').lightBox();
});

El script es simple como el mecanismo de un chupete: usamos el selector para coger todos los elementos con la categoría foto y le aplicamos  la función lightBox() de la librería .js del plugin.
Con esto ya tenemos implementado lightbox en nuestra página. He utilizado la estructura de lista desordenada, pero podéis utilizar cualqueir estructura html, simplemente recordad la regla “” y en la función de invocación llamáis a dicha clase.

Anuncios

Un comentario en “Trabajando con el plugin Lightbox de jQuery

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s