Dr. Eduardo Responde: SexyLightbox & SexyAlertBox

Preguntas y respuestas:

  • Ayuda! SexyAlertbox no hace el foco a los botones OK, de manera que cuando presiono “Enter” se vuelve a abrir otro alerta!

Respuesta: Descargate esta versión con la solución de Stefan.

  • ¿Como puedo ejecutar SexyLightbox desde javascript, sin usar un link?

Alenko nos dejó la solución:

If anybody is wondering like i did how to call it onclick its very simple you just declare SexyBox =new SexyLightBox() and then call SexyBox.show(’Title’,’http://blbla.com/picture.jpg’,’sexylightbox’); on your click function

O para los que lo quieran en español está la misma respuesta en el foro.

  • Tengo una página con elementos flash, y cuando se ejecuta SexyLightbox no oculta el flash. ¿Como puedo ocultarlo?

Solución: Debes establecer la propiedad del flash WMODE=Transparent
Por ejemplo:

<object classid="..." codebase="..." width="795" height="200" title="Head">
<param name="movie" value="flash/header2.swf">
<param name="quality" value="high">
<param name="wmode" value="transparent" />
<embed src="flash/header2.swf" quality="high" wmode="transparent" pluginspage="..." type="application/x-shockwave-flash" width="795" height="200"></embed>
</object>

Si usas SWFObject lo puedes hacer de esta manera:

so.addParam('wmode', 'transparent');
  • Mootools es un asco. ¿Existe alguna versión de estos scripts para jQuery?

Si. La nueva versión de SexyAlertBox posee una versión para jQuery. En cuanto a SexyLightbox estoy trabajando en ella.

  • Bueno OK, usaré Mootools pero ¿hay alguna forma de achicar el tamaño de Mootools?

Si lo que queremos es ahorrar ancho de banda de nuestro servidor, podemos hacer que Google nos “preste” el suyo! Además, lo enviará comprimido:

Mootools 20 KB (63 KB uncompressed)
jQuery 20 KB (54 KB uncompressed)
Dojo 29 KB (89 KB uncompressed)
YUI 9 KB (27 KB uncompressed)

Para cargar cualquier framework desde los servidores de Google debemos escribir esto:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.1/mootools-yui-compressed.js"></script>

Si queremos cargar jQuery:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>

Mas info de eso en Developer’s Guide Google

Saludos!

SebaKito dice:

Hola, muy buenas respuestas a algunas interrogantes que varios nos hacíamos, personalmente, no creo que Mootools sea un asco, es genial, y con GZIp son solo 20K (como el del servidor de Google)

Pero creo que podrías añadir un poco mas de información sobre los archivos “prestados” de Google, que es la “Google API de bibliotecas AJAX”, y que no es necesario cargar los archivos desde http://www.google.com/jsapi, también pueden ser cargados directamente sin este archivo.

Cargar Mootools:

[/html]
Cargar jQuery
[html]

Mas info en Google

SebaKito dice:

Perdon por el doble comentario, pero algo salio mal en el anterior.

Decia que para llamar mootools desde Google hay que llamar a:

http://ajax.googleapis.com/ajax/libs/mootools/1.2.1/mootools-yui-compressed.js

y para jQuery hay que llamar a:

http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js

Amir dice:

SIempre, pero siempre quice implementar una sección llamada “Preguntale al Dr Code”

=P

Dave dice:

[I get an SQL error when using your forums, sorry!]

Fantastic job on sexylightbox, Thank you. I have it working perfectly over Flash and from Javascript but there’s one problem with a bug in Safari (iFrames with HTML and cache with REFRESH)

I want to use sexylightbox with HTML, but Safari has a bug when loading iFrames when the user hits REFRESH. See the post here:
http://www.cjboco.com/post.cfm/prevent-apple-s-safari-browser-from-caching-an-iframes-source-or-url
http://phatfusion.blogspot.com/2008/03/multibox-update-safari-iframe-fix.html

The fix is to add: iFrame.id =ï¾ ”IF_” +ï¾ new Date().getTime();

when the iFrame is created. This is to prevent Safari from using old data.
I’m not smart enough to do this to your code. Is it possible you could do it for all of using sexylightbox with Safari and HTML/iFrames?

My test page showing the problem: http://www.spiralgroup.com/beta6/workTEST2.html :
1) click on “Adaptive Media” : everything is OK
2) REFRESH
3) click on “Adforce” : “Adaptive Media” content shows (wrong HTML) although the TITLE is OK.

Thank you. We really want to use this!
-Dave
(sorry I can’t write in Spanish)

    Eduardo dice:

    Thanks Dave!!!! I will fix the bug in the next version.
    Temporary fix:

    En la funcion showIframe buscar esta linea:
    frameborder: 0,

    Reemplazarla por esto:

    frameborder: 0,
    'id': "IF_"+new Date().getTime(),

    Eso es todo :D

    ¿Este comentario te ha servido? y colabora con el blog
    Responder
Dave Granvold dice:

Perfecto! Muchas gracias. It works perfectly. Thank you so much. -dave

alejandro dice:

Muy buen trabajo con el sexylightbox lástima que esté usando otros componentes con mootools 1.1 y al intentar usar el tuyo me dejen de funcionar muchas otras cosas ;s

Xthian dice:

Quisiera que aparezca SexyAlertBox al momento de cargar la pagina alguien tiene un ejmplo

fernando dice:

Al igual que Xthian, necesito que aparezca al cargar la pagina. ¿Dr Eduardo, alguna sugerencia?
Desde ya, mil gracias

fernando dice:

Logre hacerlo, pero con la version 1.1. Este codigo:

window.addEvent('domready', function() {
            Sexy = new SexyAlertBox();
            Sexy.alert("<b>Bienvenido!</b> Este es un mensaje de bienvenida");
        });

No me funciona con la version 1.2

Eduardo dice:

Hola fernando,
Para la versión 1.2 usá este código:

window.addEvent('domready', function() {
            Sexy.alert("<b>Bienvenido!</b> Este es un mensaje de bienvenida");
});

Saludos!

¿Este comentario te ha servido? y colabora con el blog
Responder
Pedro dice:

Eduardo:
Una pregunta, como hago para que el sexylight me muestre fondo negro cuando muestra la nueva ventana? (como sexyalert)?

Gracias

Pedro

Eduardo dice:

Para poner el fondo negro es así:

<script type="text/javascript">
  window.addEvent('domready', function(){
    new SexyLightBox({OverlayStyles:{'background-color':'#000'}});
  });
</script>
¿Este comentario te ha servido? y colabora con el blog
Responder
Pedro dice:

Eduardo:
Más allá de la exelencia del Sexy, quiero destacar tus respuestas, rápidas y efectivas, solucionando problemas a los que no sabemos tanto o casi nada y tratamos de seguir aprendiendo.
Gracias por tu dedicación!

Pedro Luna (58 años, cobolero y assemblero)

Mario dice:

hola quisiera saber como cambiar la ruta de las imagenes interactivamente. me explico

ya que si cargo la el componente sexyligthbox desde otra carpeta no me aparecen algunas imagenes del componente, quisiera enviarle en la peticion asi como le envias el tamaño enviarle la ruta de las imagenes o dependiendo de la pagina poder cambiarle la ruta.. o de que otra forma se podria

de antemano gracias

Juanma dice:

Hola Eduardo,

Cuando subo la web terminada que me funciona en el escritorio, el efecto deja de funcionar y solo me muestra la pagina en si pero sin efecto, alguna sugerencia, gracias

Norant dice:

_ Eduardo como hago para cambiarle el color al fondo cuando aparece el sexy.alert?
Saludos Cordiales.

Tiago dice:

Hi,
How can I use iframe code in Sexy Alert Box? When I use it only apears a blank space with the dimension of the frame.

Cristian dice:
so.addParam('wmode', 'transparent');

NO es correcto. Motivo simple: las transparencias muestran la película obviamente transparente, por lo que hacen que su fondo desaparezca si este era tan solo el escenario. O sea que si le establecimos un bgcolor #f00, simplemente desaparecerá y veremos el fondo del elemento contenedor. Y el segundo y mucho más importante, es que en Animaciones complejas y de alta calidad, aplicarles unas transparencias obliga al CPU a renderizar mucho más. Solución:

so.addParam('wmode', 'opaque');

En relación al problema de los elementos que se sobreponen al overlay de fondo, los SELECT son puestos con la propiedad CSS en visibility=’hidden’; resulta una solución a medias, pues si tenemos esos objetos puestos por default y/o por algún evento de esa manera, al cerrar cualquiera de estos 2 plugins los mostrará.

Espero haber sido claro.

Eduardo dice:

@Cristian:
¿Funciona?
Si: No lo toques!
No: No lo toques! Encuentra a alguien a quien culpar.

Mas allá de la broma (espero que te hayas reido :D ) tenés toda la razón en lo que decís.

Sin embargo, el script se puede modificar y adaptar a cada escenario en particular por lo que si alguien tiene algún problema con los selects o los flash, simplemente es abrir editar mi script y listo.

¿Este comentario te ha servido? y colabora con el blog
Responder
drakoniano dice:

Hola eduardo apenas me resulto la necesidad de abrir el sexylightbox al iniciar mi pagina, y ps despues de buscar lei que “alenko” tenia una solucion pero realmente no le entendi muy bn y la respuesta que esta en español en el foro ya no existe, espero me pueda colaborar, lo estoy trabajando con motools.

gracias

drakoniano dice:

exelente, muchas gracias eduardo, y ah, los botones de windows 7 te kedaron impresionantes

saludos desde colombia

Oscar dice:

Hola a todos, tengo un problemita y es el siguiente:
implemente resientemente un menu muy bonito y dinámico que encontre en la web, este menú, utiliza las API de google jQuery.

Resulta que la implementación de este menú, me altero el funcionamiento de otras funciones js que ya tenia previas, por ejemplo en una de las secciones utilizo un menú de acordeon(se expande y se contrae al seleccionar una opción), les cuento que me dejó de funcionar al momento de invocar este código: http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js.

si yo comentareo dicha invocación, el menú de acordeon vuelve a funcionar perfectamente, también me dejó de funcionar una galería de imagenes que tenia.

La verdad no se que hacer, alguno de ustedes me prodria ayudar por favor, o si depronto saben que puede ser el problema.

De antemano muchas gracias.

    Oscar dice:

    Hola, despues de mucho buscar, he encontrado la solucion al problema, lo que pasa es que jQuery al igual que muchas librerias, usan atajos en sus códigos, osea usan un signo $ antes de sus variables esto es fácilmente detectable a travez del firebug del firefox, pero la sulucion es la siguiente:

    despues de invocar la libreria jquery se debe crear una funcion “jQuery.noConflict()”

    quedando de esta forma:

    jQuery.noConflict();

    También les dejo la url de donde encotre la solucion a mi problema:

    http://www.nabble.com/Mootools-and-Jquery-conflict-td19806464s27240.html

    Enjoy ;)

      Ginna dice:

      Hola Oscar vi tu duda y me pasa exactamente lo mismo y aun no lo puedo arreglar, he tratado de todo y esta linea

      es la que no deja que funcione nada tengo un Galeria en motools y el sexylightbox y no me funcionan, ayudame por fa ya utilice el no.Conflict y nada ayuda por faaaaaa

MadEigner dice:

Hola Eduardo, magnifica aportación me a sido de gran ayuda pero ahora me planteo una pequeña pregunta:

¿Como puedo pasar más parametros a traves de la URL?

Aqui va un ejemplo:

SexyLightbox.show('', 'oasis3000.php?TB_iframe=true&amp;height=490&amp;width=1200&amp;res=1280, 'sexylightbox');

La verdad es que e intentado modificar el js de sexylightbox2 que es el que estoy utilizando… para añadir un nuevo parametro pero no lo termino de conseguir.

//code to show html pages

        var queryString = url.match(/\?(.+)/)[1];
        var params = this.parseQuery( queryString );
        params['width']   = params['width'].toInt();
        params['height']  = params['height'].toInt();
        params['modal']   = params['modal'];
		params['res']   = params['res'];

        this.options.modal = params['modal'];

        this.ajustarHeight = params['height'].toInt()+(Browser.Engine.presto?2:0);
        this.ajustarWidth  = params['width'].toInt()+14;

        this.replaceBox({
          'width'  : this.ajustarWidth,
          'height' : this.ajustarHeight,
          'resize' : 1
        });

        if (url.indexOf('TB_inline') != -1) //INLINE ID
        {
          this.ResizeBox.addEvent('onComplete', function() {
            this.showContent($(params['inlineId']).get('html'), {'res': params['res'], 'width': params['width']+14, 'height': params['height']+(Browser.Engine.presto?2:0)}, params['background']);
          }.bind(this));
        }
        else if(url.indexOf('TB_iframe') != -1) //IFRAME
        {
          var urlNoQuery = url.split('TB_');
          this.ResizeBox.addEvent('onComplete', function() {
            this.showIframe(urlNoQuery[0], {'res': params['res'],'width': params['width']+14, 'height': params['height']}, params['background']);
          }.bind(this));

Gracias de antemano espero puedas ayudarme.

    Pablo dice:

    Estimado MadEigner:

    Yo tenía el mismo problema y al igual que tú, quise modificar el .js, hasta que se ma pasó una idea super lógica por la cabeza: si después de TB_iframe vienen las variables necesarias para que funcione la ventana modal, quizás anteponer lo que deseo enviar por la URL antes de TB_iframe sea la solución… Y si!!! era esa la solución, entonces lo que se debe hacer, tomando tu mismo ejemplo sería lo siguiente:

    oasis3000.php?res=1280&TB_iframe=true&height=490&width=1200

    Espero que aún continúen leyendo este post y que les sirva mi aporte, sobre todo a MadEigner, porque veo que hace bastante que preguntaron por última vez.

    Bytes!

herve dice:

Hola,

no encuentro la manera de abrir un fichero .swf dantro de una sexylightbox.

gracias por su respuesta

herve