jul
16
2009
16
2009
Sexy LightBox

Hola de nuevo!!!
Hoy les voy a mostrar un lightbox que esta muy xido, llamado Sexy LightBox!!!
lo puedes utilizar con jquery o con mootols
Les muestro como!
Lightbox Con Mootols!!
1 2 3 | <script type="text/javascript" src="mootools-yui-compressed.js"></script> <script type="text/javascript" src="sexylightbox.v2.2.mootools.js"></script> <link rel="stylesheet" href="sexylightbox.css" type="text/css" media="all" /> |
Lightbox Con jQuery!!
1 2 3 4 5 | <script type="text/javascript" src=jquery.min.js"></script> <script type="text/javascript" src="jquery.easing.1.3.js"></script> <script type="text/javascript" src="sexylightbox.v2.2.jquery.js"></script> <link rel="stylesheet" href="sexylightbox.css" type="text/css" media="all" /> |
Por ultimo, llamamos a nustra Funcion!!!
Funcion del Lightbox Para mootols!!!
1 2 3 4 5 | <script type="text/javascript"> window.addEvent('domready', function(){ SexyLightbox = new SexyLightBox(); }); </script> |
Funcion del Lightbox Para jQuery
1 2 3 4 5 | <script type="text/javascript"> $(document).ready(function(){ SexyLightbox.initialize(); }); </script> |
Ahora vamos a aplicarlo en nuestro html
Para usarlo en un link de imagen
1 | <a href="imagen.jpg" title="some title" rel="sexylightbox">View image</a> |
Para usarlo en una galeria de imagenes!!!!
1 2 3 | <a href="senorms.jpg" rel="sexylightbox[galeria]">Link 1</a> <a href="imagen.jpg" rel="sexylightbox[galeria]">Link 2</a> <a href="cualquiera.jpg" rel="sexylightbox[galeria]">Link 3</a> |
Ahora aplicamos el fondo
Fondo CSS Para mootols!!
1 2 3 4 5 6 | SexyLightbox = new SexyLightBox({
OverlayStyles:{
'background-color':'#fff',
'opacity': 0.6
}
}); |
Fondo CSS Para Jquery!!!
1 2 3 4 5 6 | SexyLightbox.initialize({
OverlayStyles:{
'background-color':'#fff',
'opacity': 0.6
}
}); |
Podemos utilizar dos colores para nuestro Sexy LightBox (negro y blanco)
Para aplicarlo!!
Color de Fondo con mootols!!!
1 | SexyLightbox = new SexyLightBox({color:'white'}); |
Color de Fondo con jQuery!!!
1 | SexyLightbox.initialize({color:'white'}); |
Eso fue todo!!!
Les dejo el link de los demos con Mootols y jQuery
Y por ultimo los archivos de descarga!!!!
Etiquetas: clon, CSS, estilo, gallery, images, Javascript, jQuery, js, Lightbox, Mootools, sexy, sexy-lightbox, zoneartcss
Related Posts
1 Comment + Add Comment
Leave a comment
Patrocinador
Siguenos
Suscribete
Correo @zoneartcss.com
Comentarios
- juan manuel en Subdominios con php y .htaccess
- PCHART-Crear gráficas en PHP | Espacio de *M@?!*[lOs KeRoS mUcHo a ToDoS...] en Pchart – Crear gráficas en PHP
- EH en Evitar resize de un textarea con CSS
- KAREN en Envia mensajes de texto gratis a celulares telcel
- Elie Cottage en Ventajas y desventajas de tener un blog gratis

An article by







Muy bueno, muchas gracias, en realidad la fuente al parecer ahora es de pago, pero que bueno que aquí este de libre uso.