jQuery lightBox Plugin, como su nombre dice, es una elegante versión de Lightbox desarrollada sobre jQuery. Con tan solo 16kb de peso, este plugin para jQuery hace su función perfectamente y emula a la perfección lo ya visto por plugins desarrollados sobre otros frameworks.
Como usarlo
Primero cargamos los javascript en nuestro <head />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.2.js"></script>Añadimos nuestros estilos CSS
<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.2.css" media="screen" />Mediante el uso de selectores podremos seleccionar que elementos son los que han de ser tratados por el plugin.
<script type="text/javascript">
$(function() {
$('a[@rel*=lightbox]').lightBox(); // Seleccionamos todos los elementos cuyo atributo rel contenga "lightbox"
$('#gallery a').lightBox(); // Seleccionamos todos los enlaces del elementos #gallery
$('a.lightbox').lightBox(); // Seleccionamos todos los enlaces con clase lightbox
$('a').lightBox(); // Seleccionamos todos los enlaces
// ... Muuuuuchas posibilidades más...
});
</script>Posibilidades
<script type="text/javascript">
$(function() {
$('a[@rel*=lightbox]').lightBox({
overlayBgColor: '#FFF',
overlayOpacity: 0.6,
imageLoading: 'http://example.com/images/loading.gif',
imageBtnClose: 'http://example.com/images/close.gif',
imageBtnPrev: 'http://example.com/images/prev.gif',
imageBtnNext: 'http://example.com/images/next.gif',
containerResizeSpeed: 350,
txtImage: 'Imagem',
txtOf: 'de'
});
});
</script>El plugin permite personalizar nuestro lightbox usando para ello, un objeto json con las siguientes propiedades.
{
overlayBgColor: "El color de fondo (#000 por defecto)",
overlayOpacity: "La opacidad del fondo(0.8 por defecto)",
imageLoading: "Imagen de cargando",
imageBtnClose: "Imagen de cerrar",
imageBtnPrev: "Imagen de anterior",
imageBtnNext: "Imagen de siguiente",
containerBorderSize: "Padding usado en el contenedor (10px por defecto)",
containerResizeSpeed: "Velocidad de redimensionado del contenedor (400 por defecto)",
txtImage: "Texto "Image" usado como caption de la imagen",
txtOf: "Texto "of" usado como caption de la imagen"
}
5 comentarios, 1 referencias
+
#