Lytebox va muy lento en IE

Si utilizas el lightbox lytebox‘ pero las transiciones te funcionan muy lentamente, tal vez lo mejor sea deshabilitarlas aunque sea solo para IE.

Para ello, abrimos el archivo “lytebox.js” y en línea 37 tenemos que poner:

this.doAnimations = (document.all && !window.opera) ? !checkVersion() : true;

y unas líneas más arriba entre “String.prototype…” y “function LyteBox() {“, añadimos esta función:

function checkVersion() {
    if (/MSIE (\d+\.\d+);/.test(navigator.userAgent)) {
        var ieversion = new Number(RegExp.$1)
        if (ieversion > 8 )
            return false;
        else if (ieversion <= 8 )
            return true;
    }
    return false;
}

Problema del flash, el lightbox, y el z-index

Ahora vamos a hablar del clásico problema de cuando tenemos un lightbox y los vídeos de youtube salen por encima, o en general de cuando al abrir/expander/mostrar cualquier capa de nuestro html por javascript mediante un lightbox jQuery, o un drop down menu de mootools, o lo que sea, se nos queda cualquier SWF de flash que tengamos por encima.

Y ya le podemos poner z-index ya, que para el flash como si nada.

Esto como ya se ha dicho muchas veces es cuestión del wmode=”transparent”.

El problema bien cuando el que luego se va a encargar de meter los vídeos de youtube en la pagina que estamos haciendo es el cliente mediante el Tiny Editor o cualquiera de estos, o incluso poniéndolo a pelo en un textarea.

Si no nos curramos nada para que automáticamente se detecte el caso y añada el parámetro el sistema, al menos, si nos podemos currar una aviso muy sencillo para ponerlo encima del editor, y así cuando vaya a incluir el vídeo, podrá ver como hacerlo.

Aquí os dejo una imagen de como queda integrado en Joomla…

y el código:

<div>
Nota: <a href="#" onclick="jQuery('#yt_explain').toggle(); return false;">cómo debemos insertar vídeos de youtube</a> <br/>
<p id="yt_explain" style="display:none;">
    Para incluir videos de youtube <strong>utilizar el código antiguo</strong> (no el iframe).<br/>
    Además de tener en cuenta el tamaño del ancho (360px máximo) para obetner el codigo, una vez lo tengamos lo tendriamos que modificar ligeramente.<br/>
    Para que al mostrar la ventana de la/s imagen/es el video no se quede por encima, hay que añadir un parametro.<br/>
    Veremos que el código es de la forma:<br/>
    &lt;object&gt;&lt;param name=&quot;XXX&quot; value=&quot;YYY&quot;/&gt;<br/>
    Pues bien. Al final de todos los que aparecen, debes añadir uno m&aacute;s: <span style="color:red;">&lt;param name=&quot;wmode&quot; value=&quot;transparent&quot;/&gt;</span><br/>
    Ademas, veremos que tambien hay una cadena <span style="color:red;">&lt;embed</span> con xxxx=&quot;yyyy&quot;.<br/>
    Pues al final, antes del &gt; tambien añadiremos: <span style="color:red;">wmode=&quot;transparent&quot;</span>
</p>
</div>

Seguro que nos ahorra un montón de llamadas por teléfono o mails.

xD