Sexy Lightbox Evolution
Lightbox es un plugin simple, elegante y discreto, que no necesita código extra y se utiliza para superponer imágenes en la página actual a través de la potencia y flexibilidad de selección de jQuery.
En este artículo se pretende presentar una evolución del script donde se mejora el diseño de la presentación y la facilidad de instalación donde solo se requiere incluir la librería jQuery y el plugin lightbox más la llamada a la función pertinente.
Para implementarlo deberemos instalar el script de lightbox incluyendo en nuestra página los estilos y scripts:
<link rel="stylesheet" type="text/css" href="javascript/lightbox/themes/default/jquery.lightbox.css" />
<!--[if IE 6]><link rel="stylesheet" type="text/css" href="javascript/lightbox/themes/default/jquery.lightbox.ie6.css" /><![endif]-->
<script type="text/javascript" src="javascript/jquery.min.js"></script>
<script type="text/javascript" src="javascript/lightbox/jquery.lightbox.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('.lightbox').lightbox();
});
</script>
Después en el <body> de nuestrá página para disponer de una galería de imágenes por ejemplo podemos añadir lo siguiente:
<a href="assets/5.jpg" rel="group1"><img src="assets/m5.jpg" alt=""/></a> <a href="assets/9.jpg" rel="group1"><img src="assets/m9.jpg" alt=""/></a> <a href="assets/6.jpg" rel="group1" title="Lorem ipsum dolor sit amet..."><img src="assets/m6.jpg" alt=""/></a>
En este ejemplo si nos fijamos estamos utilizando 2 imágenes distintas; una para mostrar y la otra para ampliar pero si conviene se podría utilizar una misma imagen reducida en la imagen para mostrar utilizando los parámetros «width» y «height» de la imagen y luego ampliamos en su tamaño original.
Este script se puede emplear para muchas más cosas, no solo para imágenes o galerías.
También se puede emplear para introducir código HTML, videos, mapas y lo que se quiera.
Ver más documentación y ejemplos
Se debe mencionar que con según que versión de la librería jQuery no funciona.
Autor
¿Buscas trabajo de programador?
Una respuesta a “Sexy Lightbox Evolution”
Deja una respuesta
33 artículos que te podrían interesar
Gracias, me fueron de gran ayuda