Actualizada la versión de SexyLightbox 2.
Bugs
Se han corregido varios bugs de la versión anterior entre ellos:
- Cuando clickeabas en una imagen, y luego en un link apuntando a contenido html, el contenido/iframe permanecÃan con el fondo de la imagen anterior.
- El loading mostraba un fondo negro luego de ver un video.
- Internet Explorer mostraba el overlay mas grande de lo que realmente debÃa ser.
- AJAX 404 error no mostraba notificación de error.
Mejoras
También se han agregado algunas mejoras:

- Bordes mas suaves y nÃtidos.
- Agregada la función refresh() para volver a escanear el documento en busca de enlaces con rel=”sexylightbox”. Muy útil luego de haber hecho cambios en el DOM.
- Agregada la función shake() que crea un pequeño efecto de sacudida en el lightbox.
- Agregado el estilo ‘modal’ que cancela el cierre del lightbox clickeando en el overlay.
Pero sin duda la actualización mas significativa es la de poder trabajar con las nuevas versiones de los frameworks mas populares:
MooTools 1.2.2
jQuery 1.3.2
Debido a la incapacidad de jQuery para trabajar con clases, no puede haber dos instancias de SexyLightbox trabajando en la misma página (como puedes hacerlo con MooTools). Además el efecto de movimiento en jQuery está tremendamente exagerado.
Por si alguien desea el PSD para crear nuevos skins, puede descargarlo desde la página de Google Code
Se agradece Eduardo
Ya lo estoy testeando en mi sitio, ante todo yo uso la version jQuery y puedo hacerte algunos comentarios para aportar:
-En Internet Explorer 8 no se ve correctamente, dejo imagen de ejemplo http://i41.tinypic.com/11id2x5.png donde se puede ver que a la derecha se desajusta puede ser tema del scroll no estoy seguro.
-Gracias por incluir el psd pero aun me es complicado modificar los colores en SexyClose, SexyBtLeft y SexyBtRight ya que tienen iconos que al rellenarlos se distorciona el color, si se añadieran esas imagenes seria mas sencillo creo yo.
-En mi sitio utilizo el lightbox en muchos lugares y tambien desde un menu flash, al implementarlo alli extrañamente me lanzo este error “jQuery.easing[jQuery.easing.def] is not a function”
Eso de momento, y como consulta me gustaria saber que funcion cumple el archivo jquery.easing.1.3.js
Saludos!
Hola Mauricio, gracias por tomarte el tiempo de comentar.
Vamos por partes dijo Jack el destripador:
1) Eso es realmente raro, ya que el tamaño del lightbox se setea via javascript. ¿Estás usando la versión 8 final de Internet Explorer? ¿o la beta? ¿PodrÃas subir algún ejemplo en algún lado (o enviarmelo al mail)?
2) Disculpame no tengo los iconos originales tuve que rehacer todo porque lo original se me perdió pero prometo hacer nuevos iconos.
3) El error que te lanza es porque no agregaste el archivo jquery.easing.1.3.js que sirve para dar el efecto de ‘rebote’ en jQuery.
jQuery es muy muy básico, no trae las herramientas que trae mootools por defecto, tampoco trae los efectos, tampoco el manejo de clases, tampoco manejo de strings, números y arrays, tampoco el ‘chaining’, ni el bindeo de funciones.
Buena una pregunta, que me recomiendas ??? segun veo con mootools puedo hacer el refresh tambien no ??? O sea que si tengo 2 objetos (instancias) de sexylightbox . Segun veo con el jquery no lo podré hacer no?? si quiero tener login y gallery cómo instancias. Con mootools si no ? Esteticamente són iguales? o segun leo por ahi es un poco más sexy la de mootools? jejeje
Bueno gracias de antemano
Gracias por responder tan rapidamente Eduardo
1) Uso la version final de IE 8, aqui subi la pagina de ejemplo http://beta.facilfood.com cargaran muchos errores ya que subi solo lo minimo para que salga el lightbox pero es suficiente para que puedas ver en vivo lo que explique en el screenshot.
2) Se agradece.
3) Lo implemente de nuevo aseguranme que todos los archivos esten bien incluidos y me sigue sin funcionar en Firefox no me lanza ningun error pero en Internet Explorer el siguiente:
“Mensaje: Object doesn’t support this property or method
LÃnea: 46
Carácter: 3
Código: 0
URI: http://beta.facilfood.com/inclusiones/sexy-lightbox/jquery.easing.1.3.js”
El ejemplo de este problema lo subi aqui: http://beta.facilfood.com/index2.php
Saludos y gracias!
@ridN: Tanto en MooTools como en jQuery puedes hacer refresh(). La diferencia está en que SLB en MooTools fue construida como una clase y por lo tanto, puedes crear tantas instancias de esa clase como quieras.
En jQuery las clases ‘no existen’ asi que sólo puedes tener una instancia de SLB. Eso no significa que puedas usar el mismo SLB para mostrar imagenes y para mostrar el login (de hecho es lo que hago yo en mis sistemas).
Si esa es tu preocupación no deberÃas preocuparte, sea cual sea el framework deberÃa funcionarte bien.
Estéticamente son iguales, aunque el efecto ‘rebote’ funciona mejor en MooTools.
Sin embargo yo te recomiendo usar MooTools, ese sà es un framework de verdad y no sólo un par de funciones bonitas y cortitas para escribir menos código.
@Mauricio: Me lo pongo a investigar ya mismo.
Buena inovacion pero como siempre para gustos la moda….asi algunos nos gusta mas jquery como a otros mas mootools…todo es como se sienta a gusto el usuario.
Ahora bien por vagancia hice par skin (gray-red), alguna parte a donde enviarlos??
Hola Eduardo, una consulta… quisiera implementar un boton o enlace que al presionarlo me permita cerrar el sexylightbox y saber tambien si desde un boton typo submit o button puedo llamar al sexylightbox con el contenido de mi formulario dentro.
Gracias ante todo
en todo caso es mula
@Eduart:
Podes usar las funciones close() y show():
_ Estimado Eduardo, gracias por todo lo que esta en tu blog.
_ ¿Como hago para poner el banckground de color negro u otro color, use la funcion OverlayStyles pero me salio un bug, como q no refrescaba la ventanita.
Gracias de antemano por tu respuesta.
Hola, mi pregunta és como hacer el login box totalmente con jquery? lo digo porque con mootools, si me lo permite, però no consigo hacerlo con la jQuery, para que contacte con la BD y todo lo demas con los mensajes de error, o lo que sea…
si no me he esplicado muxo, me refiero al javascript, que se encarga de hacer una cosa , u otra segun el resultado del fichero login.php que al hacer echo “si” echo “no” echo “usuario inexistente” o otros mensajes oculte, haga cosas etc.. Espero haberme explicado … ejejej , en el anterior sexy login box, tenias un fichero html, que tenia una funcion loginboxinit(), que hacia la función de conectar el login.php, para que este segun el resultado del login muestre, error, desaparezca el login o lo que sea. Tienes una función similar hecha en jQuery en vez de con mootools? esque quiero quitar por completo mootools de mi aplicación ya que son 60kb adicionales solo para poder hacer esto.. Gracias de antemano.
@Bisu:
SexyLightbox = new SexyLightBox({OverlayStyles: {'background-color': '#000000'}});@ridN: Lo que hace la función SexyLoginInit() es simplemente cargar via ajax el resultado de login.php
jQuery no es mi fuerte, osea si me preguntas si sé programar en jQuery te digo que no, asi que no te puedo dar un código en este momento tendrÃa que ponerme a buscar cómo se hace. En cambio con mootools, ni siquiera necesito probar el código que escribo con los ojos cerrados porque estoy seguro de que funciona
Tengo la nueva versión de SexyLoginBox que muy pronto voy a estar publicando pero estoy haciendo unos experimentos jijijiji
jejej, ya lo solucioné si quieres la solución para próximos posts solo tienes que pedirme-lo tengo un jQuery login box + jQuery lost password box jejeje, con nuevos iconitos, y presentación un poco distinta ^^ jeje.
Lo que si me gustarÃa que no se como funciona , es como poner un post en el foro con un nuevo tema sobre algo no relacionado con lo que hay actualmente. Mi problemilla actual, no se si es normal o que, es que tengo que hacer que al darle sobre un boton dibuje una parrilla con 6 fotos y 6 formularios ( cosa que hago sacando de la base de datos y me funciona). El problema es que no se porque no consigo hacer que al enviar alguno de los formularios, controlar que hace, es como si no me hiciera caso… Es decir, tengo el formulario, y quiero que al hacer onsubmit(function…( entonces hacer mis cosillas pero pasa de mi… jejaejeajno se si alguien tiene propuesta… me ayudarÃa mucho.
PD: Esperando el sexyform para jquery ^^ impaciente. jejejej
Hola Eduardo, como podria usar sexylightbox en un iframey que al darle clic al vinculo, la ventana popup se muestre fuera del iframe y no dentro.
Gracias.
Eduardo, te comento para enviar un parametro a una pagina o formulario que lo lanza al presionar un enlace lo realizo de esta manera:
en la pagina la recibo asi:
$dato=$_REQUEST["idvalor"];
Hasta aqui todo bien, tengo mi sexylightbox levantado con mi pagina y con mis datos que genero o ingreso a partir del parametro enviado. Ahora lo que no logro es usar es tu funcion:
SexyLightbox.close()
Debido a que no hay una guia como usarla, no se si incluir algun js o de que forma usarla. de esta manera no hace nada.
function fcnCerrar(){
SexyLightbox.close();
}
Espero me puedas ayudar para controlar o llamar a la funcion close() segun un evento que realice.
Y tambien hay una opcion para refrescar la pagina que lanza al sexylightbox, lo que quiero lograr que actualice lo que pueda haber insertado.
Miles de gracias y espero nos apoyes a muchos que tenemos esta misma necesidad.
Gracias
@eduart:
Busca la parte que dice “new SexyLightBox” en tu código y fijate que tendrÃa que decir esto:
Entonces ahora, ya puedes usar la función close();
Con respecto a lo que dices sobre actualizar, en realidad la funcion refresh() lo que hace es agregar el evento del lightbox a los nuevos enlaces creados.
Hola Eduardo, buen trabajo.
Tengo una pregunta sobre el uso de sexylightbox, lo que quiero es mostrarlo sin necesidad de hacer clic en ningun boton o link… es decir en el evento onLoad o o DomReady poder abrirlo.
Quiero mostrar un TB_Iframe como lo podria hacer? gracias
Saludos.. interezante tu SexyLightBox.. he estado trabajando en algo parecido pero se me ha fundido el cerbro quisas me puedas ayudar.! estoy tratando de unir el
dialog_box con el lightbox . Si me puedes ayudar te lo agradeceria. No se si entiendes el concepto de lo que quiero hacer. de antemano Gracias.
“Interesante…!” “Cerebro”
Gracias por el codigo, mi problema es que lo uso para cargar video como en la pagina del demo usando la version de jquery y en firefox no hay ningun problema se ve el video, pero en IE8 no se ve el video solo el cuadro, probe la pagina del demo con ie8 y tampoco puede ver el video de ejemplo julieta venegas ni los otros solo sale el cuadro negro , se esta ocultando el flash en ie8? alguna manera de solucionarlo?
Hola rafael, en la siguiente versión de Sexylightbox arreglaré este problema, mientras tanto puedes usar el fix para IE8
Gracias Eduardo el IE8 fix funciono para videos de youtube aunque no me funciona para videos de virb.com , aqui esta el link donde he tratado de utilizar el code http://ilusionistanoda.com/ , gracia spor tan excelente trabajo como siempre.
Hola Eduardo; Primero Quiero felicitarte y agradecerte por todo el trabajo que haces.
Hay alguna manera de sacar el fondo negro o la ventana fuera del iframe?
Hola quisiera saber como invocar o abrir el sexylightbox desde una funcion javascript gracias.
hola mi problema es que al momento de cargar un archivo pdf dentro de un SexyLightbox el navegador firefox 3.6.10 se bloquea y me toca de cerrar el navegador para inicial nuevamente
SexyLightbox.display(‘reportes/Estudiantes_Asignatura_Faltas.php?id_sede=’+jQuery(‘#id_sede’).val()+
‘&id_jornada=’+jQuery(‘#id_jornada’).val()+’&jornada=’+jQuery(‘#id_jornada :selected’).text()+
‘&id_periodolectivo=’+jQuery(‘#id_periodolectivo’).val()+
‘&periodolectivo=’+jQuery(‘#id_periodolectivo :selected’).text()+
‘&id_grupo=’+jQuery(‘#id_grupo’).val()+’&id_grado=’+jQuery(‘#id_grado’).val()+
‘&id_asignatura=’+jQuery(‘#id_asignatura’).val()+’&casoreporte=17′+
‘&nombrereporte=REPORTE DE FALTAS POR ASIGNATURA’+
‘&formato=’+jQuery(‘#formato’).val()+
‘&orientacion=’+jQuery(‘#orientacion’).val()+
‘&TB_iframe=true&height=500&width=1000′);
consulta no me carga los bordes ni el boton cerrar… arriba colocaron el mismo problema pero no coloco la solucion…
Hola,
Quisiera saber como llamar a Sexylightbox desde javascript (estoy usando jquery)
Estoy haciendo
$('#message').html("Ya estás registrado - <a href=\"entrar.html?TB_iframe=true&height=350&width=870\" rel=\"sexylightbox\">Entrar</a>");Sin embargo, al hacer click en el enlace, se carga la página entrar.html en el parent, y no sale el lightbox
MuchÃsimas gracias por tu respuesta!