Ver artículos exclusivos

Nueva Versión: SexyLightbox 2.3.3

Eduardo 30 October 2009 50 comentarios En: Updates

No, no es un dejavú! es que gracias a la colaboración de ustedes al reportar los errores y bugs les traigo la nueva versión con todos los errores corregidos.

  • Eliminada la función stopImmediatePropagation en la versión de jQuery. De esta manera el script ahora funciona con versiones viejas de jQuery.
  • Arreglado el error cuando no había titulo pero si era galería, el alto no correspondía al alto de la imagen.
  • Arreglado el error en Safari/Chrome cuando el tamaño de la ventana era menor que la del documento el overlay no tapaba todo en jQuery.
  • En IE6 la pagina se quedaba en “cargando” aún cuando todos los elementos ya habían sido cargados. Corregido!
  • Corregida la compatibilidad con la propiedad “dir” y “sexyimages” que estaban en distinto orden y no se seteaban correctamente.
Mauricio says:
31 October 2009 at 4:48

Ya lo estoy probando y esta excelente Eduardo.

Me gusta mucho el nuevo diseño delicado, suave y con efectos como en la imagen de cerrar.

El problema que tengo es que mi estilo personalizado Green o Verde no se ve bien con esta versión ni tampoco muestra la imagen de cierre.

Me podrías facilitar los .psd nuevos y pensar en futuras actualizaciones incluir un estilo verde que yo mismo te podría pasar una vez hecho?

Gracias

Reply
Mauricio says:
31 October 2009 at 5:08

Sorry, no vi que los PSD venían en el Zip porque me fui directo a la carpeta Mootools xD

Lo que si falta es la fuente del texto.

Reply
Andrés Sepúlveda says:
31 October 2009 at 8:24

Hola amigo Eduardo, solo queria dejarte una duda: Necesariamente tienes q hacer el botón “Cerrar” con texto al lado? Lo digo porq es en Ingles y con el solo hecho de quitarlo seria para todos los idiomas, considero que sería mucho mas limpio y Sexy si se le quitara. (Simpre le quito el texto cuando lo uso)

Reply
sdarknot says:
2 November 2009 at 13:19

hola man
espero que en esta actualizacion hayas tomado en cuenta los el problema que tenia con lo de la carpeta gracias man voy a problarlo xD….

Reply
MauricioAedo says:
2 November 2009 at 22:11

Eduardo los PSD están bien, el problema es que son los en ingles y si se quiere cambiar el texto dice que falta la fuente que utilizaste por lo que podrías incluirla o mejor aún agregar los PSD en versión español.

Gracias

Reply
Andrés says:
10 November 2009 at 16:45

hola eduardo me alegro que ya no estes como página restringida.

te mando mis saludos y felicitaciones.

veo que tenes cosas nuevas

Reply
MauricioAedo says:
10 November 2009 at 19:22

Hola Eduardo, veo que lanzaste otra actualización hoy pero según veo no tomaste mi sugerencia en consideración o tal ves no la leíste por lo que escribo nuevamente.

Necesito modificar el estilo pero el inconveniente es que los PSD que incluye el zip son los con texto en ingles y si deseo cambiarlos me dice que la fuente que utilizaste no la tengo.

Veo 2 opciones para esto o incluir los PSD en español o incluir la fuente que utilizaste para escribir los textos.

Saludos, espero tu respuesta

Reply
    Eduardo says:
    10 November 2009 at 23:27

    Pensé que te había contestado, de cualquier manera para poner el lightbox en español debes hacer lo siguiente:

    <script type="text/javascript">
  window.addEvent('domready', function(){
    SexyLightbox = new SexyLightBox({color:'negro', dir: 'sexyimages'});
  });
</script>

    Como ves en donde dice “color” pones “negro”.

    En cuanto a la fuente de letra la puedes descargar desde aquí:

    04b_03:
    http://www.dafont.com/04b-03.font

    ¿Este comentario te ha servido? y colabora con el blog
    Reply
MauricioAedo says:
11 November 2009 at 2:59

Gracias Eduardo con la fuente ya pude crear mi propio estilo verde e implementar el lightbox.

Solo tengo 1 problema, yo utilizo el lightbox también como login de mi web el cual funcionaba perfectamente hasta cambiarme a esta nueva versión con jQuery ya que es el framework que yo utilizo.

La implementación del lightbox como login tu mismo me la diste hace mucho tiempo en el foro, ya que tenias un proyecto Sexy Login que la verdad no se que paso con el ahora.

El login se lanza bien, pero al momento de recibir las respuestas “ok”, “no” o “inactivo” que son las que determinan si los datos están correctos, incorrectos o el usuario se encuentra inactivo correspondientemente el lightbox se cae mostrándome imprimiendo el “echo” correspondiente. Por ejemplo si me logeo correctamente la sesión se crea y todo perfecto pero al momento de redireccionarme solo me muestra una pagina en blanco con el mensaje “ok” y lo mismo en los otros casos, es decir los mensajes no se me muestran en el lightbox como debería ser.

Estos son los códigos:
login.php

editado

Lamento el post tan largo, pero no encuentro el foro como para abrir un tema así.

Reply
David says:
19 November 2009 at 14:58

Buenas tardes, mi pregunta es la siguiente:

¿el SLB se puede abrir desde un boton flash por medio de javascript, y de ser posible alguien tiene la solucion?

gracias

Reply
MauricioAedo says:
23 November 2009 at 0:13

Finalmente tuve que implementar la versión Mootools ya que con jQuery se me estropeaba el login.

Tengo otra pregunta y espero que Eduardo pueda ayudarme, en una sección de mi web tengo un video de Vimeo embedido y al lanzar el lightbox el video lo tapa.

En esta URL pueden ver el ejemplo: http://facilfood.cl/demo.php

Si presionan arriba eb Iniciar sesión se lanzará el login y verán lo que digo.

Gracias

Reply
Alberto says:
28 November 2009 at 6:20

Antes que nada, enhorabuena por estos trabajos tan bien hechos. Considero que son de los mejores plugins que hay para la web.

Bueno, a lo que venía, llevo algunas unas horas intentando buscar un por qué razonable a un pequeño problema cuando llamamos a “#TB_inline”.

Al pasar los parámetros width, height y inlineID el SLB ignora siempre el primer parámetro. No entiendo por qué, ya que en la documentación queda bastante claro como hay que hacerlo, y ademas funciona perfectamente; pero siempre tiene que haber algún manazas que lo haga fallar, jeje.

La solución que he encontrado es escribir en primer lugar un parametro inventado, por ejemplo ignore=bug:

<a href="#TB_inline?ignore=bug&amp;width=500&amp;height=125&amp;inlineId=dlg-install-file" rel="sexylightbox">Cargar nuevos paquetes</a>

Aunque es mu raro, si a alguien le ha pasado lo mismo siempre pruede probar este pequeño “hack”

NOTA: La versión del core de mootools que utilizo es la misma que la de los ejemplos. Ah y el error que arroja es: $(j.inlineID) is null

Reply
    Eduardo says:
    28 November 2009 at 22:46

    ignore=bug jajaja ta weno si te funciona.

    Es que hay mucha gente que no sabe cómo armar una URL y es algo que yo no explico por ser un tema demasiado básico, es una de las cosas que se aprende en HTML:

    Pagina?parametro=valor

    Ya vi a varios armarla asi:

    Pagina?parametro?parametro=valor

    aca muestro un ejemplo más concreto:
    MAL:

    index.php?TB_inline?width=500&height=125&inlineId=dlg-install-file

    BIEN:

    index.php?TB_inline&width=500&height=125&inlineId=dlg-install-file
    ¿Este comentario te ha servido? y colabora con el blog
    Reply
      Alberto says:
      29 November 2009 at 8:31

      Jeje estas cosas suelen pasar cuando se esta demasiado tiempo delante del ordenador, se nos olvidan las cosas más básicas. Me alegro que te hayas tomado bien lo del parámetro inventado.

      Gracias por tu pronta respuesta, eres muy grande, continúa así.

      Por cierto! tómate un café a mi salud.

      Reply
Michael says:
10 December 2009 at 6:25

hello there.

i think i will put this sexy thing to my linklist :-)

Reply
Francisco says:
10 December 2009 at 19:14

Hola.
He tratado de registrarme mediante la opción members area, pero no he podido. El error siempre es el mismo, que el código de verificación no coincide, siendo que lo escribo bien.
No sabía dónde escribir esto, así que lo hice aquí, ojalá no haya problemas.

Saludos.

Reply
Andrés Sepúlveda says:
1 March 2010 at 20:19

Hola amigos… perdón por la demora… pero aquí estoy… la verdad no me habia fijado de una pregunta que realizó @David y @Diego, acerca de si se podia ejecutar SexyLightbox desde un botón Flash, la respuesta es: Sí!

Les dejo el Código que implementé para todos mis proyectos:

var LightBox = new SexyLightBox({color:'blanco', OverlayStyles:{'background-color':'#000'}, imagesdir:'images/sexyimages'});

LightBox.show('','pagina.htm?width=300&height=290','false');
Reply
    Andrés Sepúlveda says:
    1 March 2010 at 20:26

    Amigos hay que tener en cuenta que la declaración de la Variable -[ var LightBox ]- debe ir en el html y el comando [ LightBox.show() ] debe ir en la pelicula Flash por medio del fscommand

    Reply
      Manuel says:
      20 March 2010 at 12:50

      Hola Andrés, mira que lei hacerca de tu comentario de como abrir el SLB desde flash, y me interesaria saber si tienes algun ejemplo de como aplicas realmente este metodo…

      Te agradeceria tu ayuda, que tengas buen dia

      Reply
Manuel says:
9 March 2010 at 23:04

Hola eduardo, tengo la siguiente duda, es posible ejecutar el sexylightbox de forma automatica al entrar a una página determinada, similar al ejecutarse el sexyalert, de tal manera que al ejecutarse automaticamente este contenga una página HTML. Eso es posible???

Te agradeceria me respondieras a esta duda… Y por cierto excelente proyecto.

Reply
    Ignacio says:
    15 March 2010 at 16:10

    Por si te sirve de ayuda yo lanzo el sexyalertbox con este código:

    function test() {
Sexy.info("Aquí el texto");
}
window.onload=test;

    preferiria para mis propósitos usar sexylightbox pero no consigo lanzar el popup, si puedes hacerlo te agradecería el código.

    Saludos.

    Reply
Rogerio says:
15 March 2010 at 15:44

Hola Eduardo, soy brasileño y yo sólo vine a agradecerle y le animamos a continuar con sus scripts maravilloso. Estoy usando sexylightbox y sexyalertas en mis páginas y puedo decir que es uno de los mejores que se haya desarrollado sin ningún conflicto con otros scripts. Muy práctico y útil

He pagado un poco de café para usted … rsrs, y espero que pagar mucho más. Aliente a los amigos que están descargando los scripts de codersme, contribuyendo a su amigo, por lo que hace es muy bueno para todos.

Perdone mi español.

Gracias y abrazos, Rogerio, de Brasil

Reply
CutterSlade23 says:
18 March 2010 at 15:43

Hola!

Precioso el nuevo visualizador!

En cuanto acabe la web de la peluquería (que ya se esta alargando, si… demasiados contratiempos familiares) intentaré hacerte llegar mi donativo, ya sé que es algo que se dice siempre pero es que las webs con tu trabajo ‘open source’ quedan mucho mejor y ese trabajo hay que reconocerlo. Cuando monte mi web personal dirigida a diseño web, por supuesto diré que herramientas ‘open source’ utilizo… porque sé lo que es que alguien te robe un trabajo y encima lo haga pasar por suyo (me j*de la vida)… hablo en cuestión de escribir artículos en mi caso.

Bueno quería comentar que curiosamente no lo mencionas pero se pueden añadir imágenes, tipo banner en la zona donde normalmente va un título, para nombrar la fotografía. Después de varias pruebas de tamaño, dí con la altura máxima debía ser de ‘heiht:25px’y el ancho al gusto de la persona, dependiendo de cuanto hubiera puesto para la ventana ‘sexylightbox’.

En mi caso diré, que tenia que poner un logo (de la peluquería) y un rotulo con la fuente ‘mistral’. Entonces, el resultado fue este.

¿Y como se pone esto? Pues dentro de la etiqueta de vinculo. Ejemplo:

<a href="http://www.google.com?TB_iframe=true&height=450&width=800&quot; rel="sexylightbox" title=”<img src=’images_secc/banner_formulario_sexy.png’>”> Google )

Lo que destaque en negrita/más fuerte, seria el código a meter. Siendo ‘images_secc’ la carpeta donde guarde la imagen.

Lo cierto es que lo vi en otra web, y decidí descargarme el código y mirar cual era el aporte que tenia, para poder visualizarlo de esa manera.

Me fastidia cantidad no saber nada de código, pero espero que este año tenga la suerte de poder realizar un curso de páginas webs, el año pasado tuve la suerte de que me concedieran un curso básico y gratis de ‘Diseño Gráfico’ (los 3 meses de verano ahí estudiando).

Yo lo veo de utilidad y estoy seguro que le dará gusto tener algo así, a quienes como yo no saben mucho de código y se les ha pasado esta opción por alto.

Yo tengo gusto por hacer las cosas lo más personalizadas posibles, pero no tengo tiempo para todo lo que quiero, pero lo sacaré, lo sacaré.

Saludos Edu y compañía, en cuanto lance la web de la peluquería (que espero sea a finales de este mes, espero…) te aviso, y ya veo como hacer el pago PayPal, que nunca lo hice pero no veo mejor motivo para aprender, yo siempre soy agradecido con quien lo merece.

Reply
CutterSlade23 says:
18 March 2010 at 15:50

Perdón, ya me vale… me olvide de poner el código bajo la etiqueta del mismo nombre. A ver si sale bien ahora, para incluir una imagen en lugar de un rotulo normal:

Google

Agradecería, si Edu es capaz de editarla, estoy seguro que sabe de lo que hablo :)

Saludos! ;)

Reply
youbaba says:
25 March 2010 at 12:40

Thank you Eduardo for this code.

How can I do for open sexy lightbox directly when I open my website ?

Reply
Ginna says:
23 April 2010 at 10:08

Hola me parece muy bueno tu aporte pero tengo un problema con el sexylightbox y una galeria de imagenes que tengo en mi web estos son los scripts que tengo 

<script>jQuery.noConflict();</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script&gt;
<script type="text/javascript" src="../js/cufon-yui.js"></script>
<script type="text/javascript" src="../js/Decker_400.font.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript" src="sexylightbox.v2.3.jquery.min.js"></script>
<script src="../js/mootools-12.js" type="text/javascript"></script> <!-- MOOTOOLS 1.2 BETA -->
<script src="../js/mootools-12-more.js" type="text/javascript"></script> <!-- MOOTOOLS 1.2 BETA -->
<script src="../js/imagegallery.js" type="text/javascript"></script> <!--   IMAGE GALLERY   -->

el no.Conflict() que coloque arriba me ayuda pero no por completo porq solamente me sale la ventana y no el texto que quiero que salga, ayudame por favor

Reply
Roberto rp says:
25 April 2010 at 8:24

Hola buenas, tengo problemas con el script sexylightbox.

Creo que tengo todo bien redireccionado, pero al mostrar la imagen, no me muestra lso botones bgsexy ni el buttons, me aparece el titulo de la imagen y un pequeño marco en los lados izq y derc de la foto pero no me muestra los botones. Si esta el boton de cerrar, ya que el cursor del raton cambia al pasar por la esquinita. Volvi a descargar el script pero sigue sin funcionarme.
Os rogaria que me dieseis una pequeña ayuda sobre en que cosa puedo fallar. Un saludo

Reply
Ray says:
5 May 2010 at 3:27

Q tal Eduardo, oye tengo una duda/problema, estoy realizando una pagina en la cual estoy tratando de implementar tu maravilloso script, tengo una galeria de imagenes de modelos, y debajo de esos thumbs de las modelos tengo mas links () con fotos adicionales de esos thumbs o sea cada modelo tiene n imagenes, entonces tengo grupos de imagenes (sexylightbox[modelo1], sexylightbox[modelo2] sexylightbox[modelo3] etc…), bueno ahi te va mi problema…

he visto que en la pagina que tu tienes de ejemplo http://www.coders.me/ejemplos/sexy-lightbox-2/ esa, al momento de cambiarle el tamaño a la ventana del explorador (hacerla mas pequeña), luego al darle clic en alguna de las imagenes, el SL te muestra la imagen pero “adaptada” al tamaño de la ventana del explorador, o sease en proporcion a lo que tenemos de vision en pantalla.

eso se configura??, donde se hace??, que version lo trae??, lo que pasa que en mi galeria no hace eso, no importa que yo haga grande o chica la ventana del navegador, la imagen siempre se muestra del tamaño original el SL no me la rezisea al proporcional de vision que tengo en el navegador, como lo hace en la pagina de ejemplo…

lo peor es q en IE8 si la imagen es grande, al momento que sale el SL si se pasa del margen visible inferior (si sale de arriba el SL) empieza a “ciclarse”, creo yo que se ejecuta constantemente la funcion onresizewindow de la ventana del explorador, porq la imagen comienza a irse poco a poco hacia abajo y asi se queda, la unica manera de detenerlo es dandole clic a la “X” a fuera de la ventana del SL.

ese es el bug que yo reporto Eduardo, espero leas mi comentario y espero haberme dado a entender.

estare pendiente de tu comentarios y cualquier cosa si no me explique bien, dime y con gusto tratare de nuevo :P , muchas gracias por darnos este gran script y sigue adelante eres GRANDE!!!

Reply
Ray says:
5 May 2010 at 3:37

hola Eduardo, yo de nuevo!!

pues segui revisando la pagina que te comente, y al parecer ya funciona lo del rezise como??, no lo see, solo de repente empezo a funcionar :P , supongo algo debio haberse quedado en cache…

peeeeerooooo… el problema con las imagenes grandes en IE8 sigue, hace lo mismo que te menciono, al momento de abrirse si la imagen es grande y el border inferior del SL al salir de arriba sobrepasa un poco el margen inferior de la ventana del explorer empieza a irse para abajo el SL como si fuera a acomodarse nuevamente el centro de la pantalla pero nunca lo hace, simplemente se sigue llendo hacia abajo y no termina, si no das clic en la X o si no das clic fuera del SL…

de antemano te agradesco y espero que me puedas ayudar.

saludos,

Reply
CRISTIANO RONALDO says:
5 May 2010 at 13:37

Hola Eduardo, FELICITACIONES por tan excelente código.

Eduardo (o quien me pueda ayudar), ya abri una ventana con SLB y todo Perfecto, en dicha ventanita coloco un texto y una direccion web, COMO PUEDO HACER PARA ABRIR ESE LINK EN UNA NUEVA SLB?????, pues hasta ahora solo consegui abrirlo en la primera SLB pero no puedo ampliar el tamaño del SLB original.

POR FAVOR AUXILIO !!!

Reply
Ray says:
5 May 2010 at 17:47

hola! de nuevo Eduardo, otra vez porq aqui con mi problemaa molestandote…

pues ya vi cual es el problema con el IE8, lo que pasa es que yo estoy utilizando el StickyFooter y tengo en mi hoja de estilos para que funcione dicho footer 

html, body, form{height:100%;}

entonces cuando el SL entra a la pagina y SE PASA (hace crecer el body/html), el css entra en accion reziseando lo antes dicho y me parece que el SL ejecuta la funcion para centrarse nuevamente, pero al hacer esto hace crecer nuevamente en body/html y el css vuelve a entrar en accion y luego se ejecuta nuevamente la funcion del SL… y bueno asi sucesivamente entonces se “cicla” y por eso es el “efecto” de que el SL se va hacia abajo… bueno esa es mi teoria.

no se si sea un bug como tal, pero pues me gustaria que me ayudaras a hacerlo funcionar porque no puedo prescindir del footer hasta abajo, puede ser que use otra cosa que no sea el stickyFooter pero el resultado debe ser el mismo…

espero leeas esto y puedeas ayudarmee, nuevamente te agradesco por todo tu conocimiento ;D

saludos,

Reply
Ray says:
5 May 2010 at 19:01

Tengo una duda sobre este mismo tema Eduardo, ya “descubri” el porque hace esto, la funcion this.overlay.resize() es la que hace que suceda ese error, dicha funcion esta dentro del Evento resize de la ventana, fijandome en la version 2.1 del SL veo que esa linea NO esta, entonces la comente y pues JALO!!!, ahora mi pregunta es:
Al comentar esa linea, que podria pasar??, o sea que errores surgirian??, cubre algun otro bug esa linea que te digo??, hasta ahora he estado probando solo con imagenes y parece que todo anda bien, pero me queda esa duda, quiza esa linea sea mas necesaria de lo que yo creo… bueno espero puedas aclararme esta gran duda y si realmente va a causarme mas conflictos que lo que me soluciona pues ver entonces otra manera de solucionar esto.

bueno te dejo como quedo el codigo…

window.addEvents({
        'resize': function() {
            if (this.options.displayed == 1)
            {
              this.replaceBox();
              this.overlay.resize();
            }
        }.bind(this)

saludos,

Reply
Ray says:
5 May 2010 at 19:02

upss… quedo asi:

window.addEvents({
        'resize': function() {
            if (this.options.displayed == 1)
            {
              this.replaceBox();
              //this.overlay.resize();
            }
        }.bind(this)
Reply
Dreiko says:
7 May 2010 at 7:50

Eduardo primero que todo mil felicitaciones por tan excelentes proyectos…

mi duda es la siguiente… llevo dias buskando una solucion para cargar sea el SLB o cualquier otro script al momento de cargar una pagina, logre encontrar uno pero no me dejaba cargar HTML que es precisamente lo que necesito.

Les agradeceria a quien pueda colaborarme en este tema

Un abrazo desde Colombia

Reply
Dreiko says:
7 May 2010 at 9:01

vuelvo al ataque, he estado probando, combinando, mezclando codigo y logre el SLB me cargue como quiero:
Ver Prueba

Solo me hace falta hacerla cargar al abrir la página…

muchas gracias de antemano a quién pueda colaborarme.

Reply
sdarknot says:
7 May 2010 at 14:51

aun no funciona bien el slb 2.4 en i8 -.-!!!!

Reply
Newer Comments »