Muchas veces los diseñadores de páginas web necesitamos crear galerías de imágenes para mostrar los productos de nuestros clientes o cualquier tipo de imágenes, que muestran una serie de thumbnails que tienen un enlace a la versión ampliada de la misma. En ciertas ocasiones, es necesario que la apertura de la imagen se haga en una ventana más pequeña, para lo que es frecuente que se utilicen las ventanas emergentes o pop-ups , para que no se cambie la página y el usuario no tenga que utilizar los botones de navegación.
En otros casos, se utilizan galerías de imágenes totalmente desarrolladas empleando simplemente HTML y CSS. Pero en ciertas ocasiones, ninguna de estas opciones satisfacen plenamente las necesidades del diseño. Es para ello que se han desarrollado algunas técnicas basadas en JavaScript, que permiten la visualización de las imágenes sin salir de la página y sin emplear ventanas emergentes.
Se trata de una técnica muy sencilla y que por estar basada en librerías JavasCript (Jquery, MooTools, Prototype, etc.), por lo que no es intrusivo y el código que se genera en la página es limpio. Algunas plantillas de Wordpress, Joomla y Drupal incluyen este tipo de recursos, además de encontrarse componentes y plugins que también cumplen la misma función.
Esta técnica fue inventada por Lokesh Dhakar, y el original fue sustituido por “Lightbox2” y está basado en Prototype. Luego aparecieron varios clones, algunos de los cuales superan en calidad al original. Algunos de estos clones son gratuitos, los hay de pago, mientras que otros ofrecen una versión de pago y una versión gratuita con menos funcionalidades.
Lightbox 2
Para utilizar este lightbox, en primer lugar debemos descargarlo, lo que pueden hacer desde este enlace: Descarga
Una vez descargado, se debe descomprimir el archivo en la raíz de la página (para poder ubicarlo en otra carpeta, es necesario hacer modificaciones en algunos archivos del script). Luego se deben colocar los siguientes links en el mismo orden en que se encuentran aquí:
<script type="text/javascript" src="js/prototype.js"></script> <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script> <script type="text/javascript" src="js/lightbox.js"></script>
También se debe incluir en el encabezado de la página un link al archivo CSS que viene incluido, para lo que colocaremos la siguiente línea de código:
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
Finalmente se debe colocar rel=”lightbox” en el enlace del texto o la imagen donde se activará. A continuación, veremos un ejemplo de la utilización de “Lightbox2”:
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >Light Window 2.0</h2>
Otra versión del script anterior que permite la utilización de videos de <a href="https://www.lawebera.es/promocionar/marketing-online-youtube.php">YouTube</a>, películas Quick Time y cualquier otro tipo de archivos multimedia, <a href="https://www.lawebera.es/manual-flash">animaciones Flash</a>, páginas externas, se puede utilizar como <a href="https://www.lawebera.es/como-hacer/ejemplos-css/simular-frames-marcos-con-html-y-css.php">marcos</a>, para presentar formularios (en cualquier posición), con contenido HTML, permite scroll y varias otras funcionalidades muy interesantes.
Para utilizarlo, se debe colocar en el encabezado de la página los siguientes links:
<script type="text/javascript" src="javascript/prototype.js"></script>
<script type="text/javascript" src="javascript/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="javascript/lightwindow.js"></script>
<link rel="stylesheet" href="css/lightwindow.css" type="text/css" media="screen" />
Para que funcione con imágenes, basta con colocar en el enlace “class=”lightwindow“. Para utilizar otros medios, se deben emplear algunas de las siguientes líneas de código:
Películas:
<a href="http://peliculas/nombre_pelicula.mov" class="lightwindow" params="lightwindow_width=640,lightwindow_height=290" >Nombre del enlace</a>
Flash:
<a href="animacion.swf " class="lightwindow" params="lightwindow_width=800,lightwindow_height=345" title="Animación de ejemplo" >Nombre del enlace</a>
Archivo PDF:
<a href="ejemplo.pdf" class="lightwindow">Nombre del enlace</a>
Página externa:
<a href="https://www.lawebera.es/" class="lightwindow" title="Diseño de páginas web" caption="Portal del diseñador web">Nombre del enlace</a>
Como puede apreciarse, se trata de un script que permite generar lightbox casi con cualquier contenido. Al igual que en el caso de Lightbox2, se deben descargar los archivos y descomprimirlos en la raíz de la página. Se puede descargar desde aquí: Descarga
Se debe tener en cuenta que cuando se descomprimen los archivos, los mismos están dentro de una carpeta contenedora, de la que deben ser copiados y colocados “sueltos” en la raíz de la página. Si se coloca la carpeta con todo el contenido en la raíz del sitio, no funcionará a menos que se modifiquen los enlaces descritos más arriba.
Modificaciones en la configuración
En todos los casos, con algunos conocimientos elementales es posible modificar algunos parámetros, como la opacidad, los tiempos de los efectos, etc. Modificando el archivo CSS que contienen ambos scripts, es posible personalizar la forma en que se ven los lightbox.
Otros lightbox
Existen muchos otros lightbox, con mayor o menor cantidad de funciones y diferentes pesos. A continuación haremos una breve descripción de los mismos y las respectivas descargas.
Lightbox+. Gratuito, basado en Prototype. Solo para imágenes, sobre las que se puede hacer zoom.
GreyBox. Gratuito, solo para imágenes. Muy pequeño.
TripTracker. De pago. La versión estándar cuesta $25, mientras que la versión Premium tiene un valor de $500. Sólo es para imágenes.
modificado el 5 octubre, 2013 2:01
Ver comentarios (3)
No es posible agregarle (en sí mismo, o con ayuda de algún plug-in) las previews de las imágenes pertenecientes a la galería?
En otras palabras, que cuando se vea en grande la imagen principal, también se vean todas las demás (pertenecientes a la misma galería) abajo y pequeño una al lado de la otra
Hola,
Funciona con una animación de edge animate? Si es así sería a la solución que estoy buscando hace 2 semanas.
Gracias!
Mil gracias por la explicación... super clara. Justo lo que estaba buscando :)