Note: This post is deprecated. New version is here: Sexy Lightbox 2.
Sexy Lightbox es un clon, más sexy y más liviano, del clásico Lightbox. Fue construido pensando en los diseñadores webs, de fácil instalación y uso. Esta entrega trae dos versiones: una en blanco y otra en negro.
Sexy Lightbox requiere el framework Mootools 1.2
Compatibilidad: Funciona tanto en navegadores modernos, como en Internet Explorer.
Demostración
Puedes ver la demostración del script en el siguiente enlace: Ver demo.
Instalación
Sube todos los archivos de Sexy Lightbox a tu servidor. Las imágenes, el CSS y el Javascript. Si ubicas la carpeta imágenes en un directorio diferente, debes cambiar la ruta configurando la opción ‘imagesdir’ de la clase. Mas abajo se explica como hacerlo.
Descarga mootools con domready, e incluye los archivos Javascript en el header de tu página.
<script src="mootools.js" type="text/javascript"></script> <script src="sexylightbox.js" type="text/javascript"></script>
Finalmente, agrega sexylightbox.css en el header:
<link rel="stylesheet" href="sexylightbox.css" type="text/css" media="all" />
¿Cómo se usa?
Primero debemos crear la clase, en el evento domready:
window.addEvent('domready', function() {
new SexyLightBox();
});
Usar Sexy Lightbox es fácil, solo debes añadir la clase ‘sexylightbox’ a tus enlaces:
<a href="imagen.jpg" title="algún titulo" class="sexylightbox">Ver imagen</a>
Opcional: usa la propiedad ‘title’ si quieres mostrar una descripción para la imagen.
Esta clase puede cambiarse, con la propiedad ‘find’. Lee la sección Configuración General, para aprender como hacerlo.
Si quieres crear una galerÃa a partir de un grupo de enlaces, debes incluir el nombre de la galerÃa en la propiedad ‘rel’:
<a href="senorms.jpg" class="sexylightbox" rel="galeria">Enlace 1</a> <a href="imagen.jpg" class="sexylightbox" rel="galeria">Enlace 2</a> <a href="cualquiera.jpg" class="sexylightbox" rel="galeria">Enlace 3</a>
La clase SexyLightBox es muy flexible. Lee la documentación para ver todas las opciones disponibles.
Documentación
Las siguientes opciones están disponibles para la creación de la clase:
-
OverlayStyles
Estilo CSS para el background.
new SexyLightBox({OverlayStyles:{'background-color':'#fff', 'opacity': 0.6}}); -
showDuration, closeDuration
Duración (en ms) de la transición del background.
new SexyLightBox({showDuration:200, closeDuration:400});
Estilos del Lightbox
Sexy Lightbox trae dos versiones, una en blanco y otra en negro. Por defecto, se usa el negro, pero modificando un par de opciones puedes cambiarlo al blanco.
-
color
Admite: ‘black’ o ‘white’. Por defecto se usa ‘black’. Esta opción se utiliza para ubicar las imágenes que se usarán, en el directorio ‘sexyimages’.
new SexyLightBox({color:'white'}); -
hexcolor
Valor en hexadecimal para el color elegido. Por defecto se usa ‘#000000′.
new SexyLightBox({color:'white', hexcolor:'#FFFFFF'}); -
captionColor
Valor en hexadecimal para el color de las descripciones. Por defecto se usa ‘#FFFFFF’.
new SexyLightBox({color:'white', hexcolor:'#FFFFFF', captionColor:'#000000'});
Configuración general
Propiedad: find
Clase a buscar en los enlaces para aplicar el lightbox. Por defecto se usa ‘sexylightbox’. Esta opción te permite crear varias instancias del lightbox y poder usar cada una en distintos enlaces.
En el siguiente ejemplo, el Enlace1 mostrará el lightbox negro, y el Enlace2 mostrará el blanco:
<script type="text/javascript">
window.addEvent('domready', function(){
new SexyLightBox({find:'sexylightbox'}); /* Por defecto, el color es negro */
new SexyLightBox({find:'sexyblanquito', color:'white', hexcolor:'#FFFFFF', captionColor:'#000'});
});
</script>
<p><a href="imagen1.jpg" class="sexylightbox">Enlace1</a></p>
<p><a href="imagen2.jpg" class="sexyblanquito">Enlace2</a></p>
Propiedad: imagesdir
Nombre del directorio que contiene las imágenes de estilo. Dentro de este directorio, se encuentran los directorios del color (black y white). Si quieres renombrar o ubicar esta carpeta en otro directorio, debes cambiar esta propiedad.
Licencia
El script es publicado bajo la licencia MIT.
Descargar
Actualización: Disponible Sexy Lightbox 2.
Sólo para propósitos históricos:
Descarga SexyLightBox.v1.zip (sin ejemplos + versión comprimida)
Descarga SexyLightBox-Example.zip (SexyLightbox.js + mootools + ejemplos)
-
Carlos Daniel Estrad:
Muy bueno el sistema, solo me gustaria que me respondieras una duda, quiero... -
Alex RUS:
It works great -
sites para anunciar:
Otimo. adorei esse site vocês escrevem muito bem os artigos…vou salvar... -
ray:
hi -
Elliot:
estamos en las mismas yo termine la carrera ya no entre a ejercer esta profesión y eso que... -
brokenwalls:
La identación es mas importancia de la que se le suele dar, por mi parte utilizo... -
Yukiko Gahn:
La mente de uno lleva a una manera de hacerse sin conocimiento de nadie , además de que... -
Billy:
Hola, me encanta la Sexy Lightbox 2, pero tengo un problema en una de mis páginas, en donde...
www.coders.me © 2007-2010 / Theme diseñado por Eduardo Daniel Sada
Queda prohibida la reproducción total o parcial, en Español o cualquier otro idioma, sin el expreso consentimiento del autor. / PolÃticas de uso
Powered by Wordpress - Social Network Icon Pack by Komodo Media
y que muestre html =)
hello how can i make the effekt of sexylightbox or sexy allert wit an iframe box ??
Eduardo estupendo el ejemplo pero aun no puedo hacer lo que quiero anteriormente me diste un código para realizar el evento onload en el Sexy alert
window.addEvent('domready', function() { Sexy = new SexyAlertBox(); Sexy.alert("Bienvenido! Este es un mensaje de bienvenida"); });Pero necesito implementarlo en el Sexy Lightbox v1 para lanzar automáticamente una imagen, espero me ayudes
saludos
Creo que es asi:
window.addEvent('domready', function(){ Sexy = new SexyLightBox(); Sexy.show("Titulo de la Imagen", "imagen.jpg", "Grupo"); });El titulo y el grupo son opcionales, pone comillas vacias si no deseas usarlos.
Genial Eduardo me haz salvado el pellejo
un abrazo
Estoy intentando montar esto pero lo mio es el diseño y no tengo ni idea de código. Subo la carpeta con el index de prueba y funciona, hago un index nuevo con los 2 codigos primeros del tutorial, pero el segundo no se como se pone: window.addEvent(‘domready’, function() {
new SexyLightBox();
}); asi tal cual ? o con alguna etiqueta? en el body o head ? :S realmente me gusta mucho pero me veo incapaz de conseguir ponerlo en marcha… si alguien tiene 5 minutos le estaria muy agradecido o puedo compensar con ayuda en diseño o algo, un saludo!
xp.artworks@hot..
Is that really all there is to it because that’d be falbbegraistng.
BmXSNO xgiueyafpcnj
dkICz4 eghfpmwkpcjv
hello, how can i make this effekt with outside image
with images there are not in sexyimage folder include
@hups:
You can change the Images folder path with the property imagesdir
Saludos!
ok thanks is this only for image ? was great for iframe
i integrate into ImagePut Web Album Generator
thank alot, cool.
with imageput you can also upload images to flickr, imageshark, etc.
Dear SexyLightBox Owners,
Congratulations, great job with the sexylightbox.
Its very sexy, but only one suggestion:
- This sexylightbox should contain iframe support and the images should be on a css file.
I changed and optimized the sexylightbox code to contain these 2 new features, i.e:
- iframe support
- images in css
I have all the pleasure to send you my new code, but I need to know what is your email, please.
Answer me to a19836@gmail.com.
Once again, great work.
Sincerely,
Joao Pinto
Hello,
Could you please give the jquery or mootools 1.1 version?
thanks
Bellissima! Bravo! Aspettiamo la versione che possa contenere contenuti html inline.
Ciao! Tu complimente.
Italy
Genoa
Hallo,
Great JOB!
Can anyone tell me how can i Integrade the Sexylight in my Joomla 1.5.10
for Images in Articles?
in english, German ore Croatian Language
Ore a Link to a Description.
Thanks Robi
y en el caso que todo funcione pero yo quiero llamar la class desde un link en un flash? como se hace? saludos
Hi,
How this lightbox come out from iframe.
In Iframe I have a link, when I click on that link this light box should work fine. But my light box is opening only in iframe.
Please help me
Regards
Ashok. M
olá,
muito bom o seu plugin, mas como faço para abrir mapas do google maps?
abraço!
Me pregunto ¿cómo puedo obtener en mi página cuando se abre la
Caja de luz con un iframe que tienen una FORM?
Hola Eduardo te felizito por tu exelente proyecto, estoy montando tu script en conjunto con flash pero lo que no e podido lograr es agregar grupos de imagenes ni de frames, etc, e intentado con diferentes funciones pero no e tenido exito, la idea es hacer un boton en flash que llama a la funcion LightboxDelegate ejemplo:
en flash as1:
on (release) { getURL("javascript:LightboxDelegate('ages/A2.jpg','test')"); }el script:
[html]<script> function LightboxDelegate(url,caption,rel) { SexyLightbox = new SexyLightBox(); SexyLightbox.show(caption, url, 'sexylightbox'); } </script>[/html]con esto logro llamar a una sola imagen pero asta ahi, y lo que quiero es un grupo de imagenes, o grupo de frames, o de varios elementos, imagino que algo se puede lograr con div ocultos, quiero hacer algo haci como esto pero con sexylightbox:
ojala y puedas ayudarme; a y otra cosa me gustaria saber si puedo tener sexylightbox y sexyalert en la misma pagina y llamarlos desde botones programados en flash tambien en la misma pagina, bueno eso es todo y agredere infinitamente su ayuda gracias
Como hago para meter un boton hacia la siguente y anterior imagen?
How to call a page on load by sexy lightbox, Any help please?
Hola, oye una pregunta. Como puedo hacer para que al momento de cerrar la ventana, le de un refresh a la página que desplegó la ventana.
Gracias
Me parece a mi, que los autores dejaron abandonadillo ya esto.
JPAC, creo que te refieres a las flechas que te direccionan a la siguiente o anterior foto.
Es es muy fácil. Normalmente tu tienes el sexylightbox asi:
rel=”sesylightbox”
Pues para que se pongas esas flechitas, debes meter cierta galeria dentro de un mismo grupo:
rel=”sexylightbox[group1]”
Saludos!
No se ha abandonado el proyecto del sexylightbox..
la versión open source se le deja de dar ya soporte.
Para obtener soporte se tiene que comprar ahora la versión comercial.
bi9c2y aevajthmcbjo, [url=http://hdrtezwhbffn.com/]hdrtezwhbffn[/url], [link=http://dzaxhdhteyts.com/]dzaxhdhteyts[/link], http://ltprmglofcef.com/
Esta muy bueno. estoy utilizando el body onload carga la imagen perfectamente. pero quiero saber coomo impplementar un link a esa imagen….
Alguien ha notado que ni lightbox ni tooltips funcionan en Explorer 9? Tienen alguna solución para este problema?
Someone has noticed that lightbox and tooltips code doesn’t works on explorer 9? Have you a solution for this?
Kathy, the content you have graciously shared with us every once in a while is both inspiring and entertaining. And a blog is the perfect medium for this. A lot of the content is about your style and creative personality. Thus, I would rule out the community-based ideas. I would probably only read your stuff anyway.,
Good for Hannity, hammering Mc Cain. Mc Cain off as so slimey. He completely bought into the Obama narrative and talks about the great calamity to come if there is no agreement, and continues to blast the Tea Party.,
Honestly said, I don’t think you can do anything to fend off the attacks. I don’t think you got attacked because of something you did, but because lots of people admire you and your work. That’s apparently enough for some people to hate you. Only by unpassionating your readers, can you hope to actually stop the haters. I hope you will reject that option.,
Good for Hannity, hammering Mc Cain. Mc Cain off as so slimey. He completely bought into the Obama narrative and talks about the great calamity to come if there is no agreement, and continues to blast the Tea Party.,