En el Taller de jQuery os tenemos acostumbrados a explicar cómo realizar diversos efectos y componentes para páginas web, pero en este caso no vamos a contaros cómo realizar un plugin, sino como utilizar uno que ya está publicado.
Este plugin que vamos a tratar, llamado jQuery lightBox, sirve para hacer una caja modal, en la que se presenta una imagen, oscureciendo el resto de la página, para que resalte aun más. El usuario podrá ver la imagen de cualquier tamaño en una capa que se superpone al contenido de la web y además, navegar hacia delante o atrás entre otras imágenes asociadas al plugin.
El trabajo está realizado por el desarrollador brasileño Leandro Vieira Pinho y publicado, con link para descarga en la siguiente URL:
En este caso os enseñamos el plugin, en vez de comentar cómo se realiza porque no es un trabajo nuestro y simplemente me he limitado a ponerlo en marcha, no a estudiar cómo se ha desarrollado. Lo he elegido por estar bastante bien hecho y con funcionalidades que me han venido muy bien en un trabajo que estoy haciendo para un amigo. Como me parece muy útil he decidido explicar en español cómo utilizarlo, aunque veremos que es todo muy sencillo.
Nota: Realmente no hace ni falta tener conocimientos de jQuery para poder instalar y utilizar este plugin, pero puedes aprender jQuery de una manera sencilla en profundidad en el Manual de jQuery de DesarrolloWeb.com.
Contenido de la descarga de lightBox
El archivo de descarga contiene varios directorios:
- Carpeta "js", con el código Javascript y el framework jQuery.
- Carpeta "css", con las hojas de estilo CSS necesarias para que todo se vea correctamente.
- Carpeta "images", con varias imágenes que necesita el plugin
- Carpeta "photos", con algunas fotos para el ejemplo que realmente no necesitaremos cuando queramos utilizar el plugin en nuestra página web. Solo está ahí para utilizarse en el ejemplo que acompaña la descarga.
Además contiene un archivo llamado index.htm con un ejemplo para ver el plugin funcionando. A partir de ese ejemplo puedes comprobar, si tienes una mínima idea de Javascript y jQuery, lo fácil que es iniciar el plugin, pero si no la tienes, sigue estos pasos que te voy a relatar.
Nota: He probado y estoy comentando la versión 0.5, que es la que estaba publicada en el momento de escribir este texto. Por lo que pueda pasar (posibles salidas de línea del sitio del creador o cualquier otra falta de disponibilidad) y ya que el contenido está licenciado con Copyleft, os dejo el enlace para descarga de este script en la versión que hoy Leandro ofrece en su propia página web.
Pasos para poner en marcha el plugin lightBox
Si deseas poner en marcha este plugin tendrás que realizar una serie de pasos sencillos.
1.- Copia en tu sitio web las carpetas "js", "css" e "images". En principio da igual dónde lo coloques todo, pero acuérdate de donde lo has puesto, porque luego vas a tener que enlazar varios de los archivos que hay en estas carpetas y tendrás que utilizar las rutas correctas.
2.- Enlaza los archivos Javascript y CSS. Esto lo consigues con algunas etiquetas SCRIPT (para los archivos Javascript) y LINK (para enlazar la declaración CSS).
Primero tienes que incluir jQuery:
<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
Nota: En la propia descarga de lightBox tienes un archivo con el framework Javascript jQuery (jQuery.js) que podrías utilizar, pero la verdad es que está bastante desactualizado. Te recomiendo descargar la versión actual de jQuery, que puedes obtener del propio sitio de jQuery.com, en mi caso estoy utilizando la versión 1.6.1 del framework Javascript y el plugin funciona perfectamente.
Luego has de incluir el script del lightBox:
<script type="text/javascript" src="js/jquery.lightbox-0.5.min.js"></script>
Ahora las hojas de estilo CSS:
<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />
Nota: De nuevo, insisto en que debes fijarte de utilizar las rutas correctas a los directorios, según donde los hayas puesto en tu sitio web. Además, debes saber que el lugar correcto para enlazar con archivos js o css es el HEAD de la página.
3.- Crea el HTML necesario para que tu lightBox funcione. Esta parte es muy sencilla de realizar, al alcance de cualquier persona que tenga mínimos conocimientos de HTML. Pero también es clave que crees una estructura de código HTML compatible con el lightBox. Esto es muy simple:
Creas una capa principal y le pones un identificador:
<div id="micapaimagenes">
</div>
</div>
Luego, dentro de esa capa, colocas varias imágenes con etiquetas IMG y en cada una de ellas colocas un enlace a la foto grande que quieres que aparezca cuando se haga clic sobre la imagen.
<a href="imagen_grande.jpg">
<img src="imagen_pequena.jpg">
</a>
<img src="imagen_pequena.jpg">
</a>
Colocas tantas imágenes pequeñas, con enlaces a imágenes grandes, como desees. El código HTML es bien simple, como has podido ver. Al final te quedaría algo como esto:
<div id="imagenesproducto">
<a href="archivoimg/1-amp.png" class="lightbox">
<img src="archivoimg/1.png">
</a>
<a href="archivoimg/2-amp.png" class="lightbox">
<img src="archivoimg/2.png">
</a>
<a href="archivoimg/3-amp.jpg" class="lightbox">
<img src="archivoimg/3.jpg">
</a>
</div>
<a href="archivoimg/1-amp.png" class="lightbox">
<img src="archivoimg/1.png">
</a>
<a href="archivoimg/2-amp.png" class="lightbox">
<img src="archivoimg/2.png">
</a>
<a href="archivoimg/3-amp.jpg" class="lightbox">
<img src="archivoimg/3.jpg">
</a>
</div>
Nota: Fíjate que le he puesto el atributo id="imagenesproducto" a la capa div principal. Ese identificador puedes llamarle como lo desees, pero luego vamos a tener que utilizarlo desde Javascript, así que acuérdate de lo que hayas puesto.
4.- Invoca el plugin lightBox con jQuery. Para que ahora esas imágenes se comporten como elementos dinámicos y se abra una caja modal para mostrar las ampliaciones de las fotos, tienes que invocar al plugin. Esto se consigue con el siguiente código Javascript:
<script language="javascript">
$(document).ready(function(){
$('# imagenesproducto a').lightBox();
});
</script>
$(document).ready(function(){
$('# imagenesproducto a').lightBox();
});
</script>
Así de simple. Con esto el plugin jQuery se encargará de todo el trabajo y aplicará el comportamiento dinámico en tus imágenes.
Otras estructuras de HTML
Si sabes un poco de Javascript, a partir de otros selectores jQuery podrás crear códigos HTML distintos, con estructuras adaptadas a tus necesidades, pero donde también funcione tu lightBox.
Antes, colocamos todos los enlaces dentro de una capa específica, con un identificador para referirnos a ella desde jQuery. Otra estructura más versátil sería ponerles a todos los enlaces una clase CSS y así podemos tener cualquier estructura de código HTML en nuestra página web. Luego, podríamos utilizar esa clase CSS de los enlaces para transformarlos en cajas lightBox:
<a href="archivoimg/1-amp.png" class="lightbox">
<img src="archivoimg/1.png">
</a>
... luego cualquier pedazo de código HTML ...
<a href="archivoimg/2-amp.png" class="lightbox">
<img src="archivoimg/2.png">
</a>
... otro pedazo de código HTML con todas las etiquetas que desees entre medias de cada enlace ...
<a href="archivoimg/3-amp.jpg" class="lightbox">
<img src="archivoimg/3.jpg">
</a>
<img src="archivoimg/1.png">
</a>
... luego cualquier pedazo de código HTML ...
<a href="archivoimg/2-amp.png" class="lightbox">
<img src="archivoimg/2.png">
</a>
... otro pedazo de código HTML con todas las etiquetas que desees entre medias de cada enlace ...
<a href="archivoimg/3-amp.jpg" class="lightbox">
<img src="archivoimg/3.jpg">
</a>
Luego podrías llamar al plugin con este código jQuery:
$("a.lightbox").lightBox();
Nota: Como se puede ver, ahora estoy utilizando el selector "a.lightbox" que selecciona todos los enlaces que tienen la clase lightbox, para convertirlos a cajas lightBox al invocar al plugin sobre ellos.
Eso es todo! para acabar, voy a dejarte un enlace a un ejemplo en marcha, donde verás varias imágenes que se pueden pulsar para acceder a la imagen ampilada en una caja modal.
Rutas de las imágenes adelante y atrás, cerrar, etc.
Actualizo el artículo para comentar un tema importante. Se trata que el plugin usa varias imágenes para poner enlaces a la foto siguiente y anterior y para cerrar la capa de la ampliación, para mostrar el típico "loading", etc. Esas imágenes en tu aplicación web pueden estar en rutas diferentes a las que el plugin propone, o incluso puedes llamar al plugin desde diversas páginas en las que las rutas a ellas no te funcionan tal como está configurado el plugin por defecto.
En esos casos existe una cómoda manera de modificar las rutas. Para ello tenemos que abrir el archivo Javascript del plugin, en la versión no minimizada, que en la versión con la que estoy trabajando se llama "jquery.lightbox-0.5.js". Allí encontraréis unas líneas de código que generan una serie de variables para las rutas de las imágenes.
imageLoading: 'images/lightbox-ico-loading.gif',
imageBtnPrev: 'images/lightbox-btn-prev.gif',
...
imageBtnPrev: 'images/lightbox-btn-prev.gif',
...
Sería simplemente modificar esas variables para definir las rutas correctas a las imágenes en tu sitio web.
Fuente: enlace
No hay comentarios:
Publicar un comentario