Integración sIFR y Lightbox JS

Publicado en Actualizado por Skeku

Cuando integré el plugin para WP del efecto Ligthbox recordé que Rude comentó que su uso daba problemas si se empleaba de manera conjunta a la técnica de reemplazo sIFR.

El problema básicamente es que por defecto todos los objetos Flash se van a superponer por encima de cualquier capa y eso hace que, en mi caso, los reemplazos de la barra lateral y de los títulos de posts quedasen por encima de la imagen ampliada con lightbox y todo lo demás. Seguramente habrá algún problemilla más por ahí pero como tampoco controlo mucho y no quiero liaros 😛

La solución para poder hacer uso de estos dos añadidos es la siguiente (voy a dar por hecho que ya os habéis manejado un poco con estos temas):

Abrís el archivo sifr.js (o como se llame en vuestro caso) que estéis empleando para los reemplazos y cortáis toda la función que empieza por el condicional if(typeof sIFR == «function») (generalmente está al final del archivo). Ahora os vais a la cabecera de vuestra web y crearéis una nueva función con estos datos que acabáis de cortar. En mi caso queda así:


function sIFR_carga() {
if(typeof sIFR == "function"){
sIFR.replaceElement(named({sSelector:"h3.sidebar", sFlashSrc:"http://www.criteriondg.info/wordpress/avant.swf", sColor:"#385abe", nPaddingTop:0, nPaddingBottom:0, sWmode: "transparent"}));
sIFR.replaceElement(named({sSelector:"h3.entrytitle", sFlashSrc:"http://www.criteriondg.info/wordpress/avant.swf", sColor:"#385abe", nPaddingTop:0, nPaddingBottom:0, sWmode: "transparent"}));
};

¿Os habéis fijado en la línea sWmode: «transparent»? Pues hacedlo ahora porque es requisito indispensable para que funcione (en este manual de Diseñorama lo explican un poco).

Ya falta poco, ahora sólo queda hacer las llamadas a las funciones de sIFR y de Lightbox y para ello empleamos el evento onload. Buscamos la apertura de la etiqueta body y le añadimos:
onload=»sIFR_carga(); initLightbox();».

Con esto, ya es suficiente para que todo funcione correctamente (ejemplo).

Dos apuntes, la llamada al script sifr.js debe realizarse después que la llamada al script de lightbox. Segundo, al principio os he dicho que debéis cortar el contenido del archivo sifr.js porque de otro modo en Safari seguirían superponiéndose los elementos reemplazados. De esta forma he comprobado que funciona correctamente en Safari 2, Firefox 1.5 e IE 6 asique agradecería que alguien comprobase que funciona bien con Opera por ejemplo 😉

NOTA: Para cualquier otro tipo de contenido en Flash creo que la mejor forma de solucionarlo sería darle un valor de z-index alto a la capa donde esté contenido y añadir el parámetro wmode donde se haga la llamada al «objeto flash» de la siguiente manera: param name="wmode" value="transparent" /. Así debería funcionar correctamente.

Traducción en inglés/English traduction

On integrating Lightbox effect plugin for WP, I remembered Rude told me that some problems have emerged when using it jointly with sIFR replacement technique.

Basicly, the problem is that all Flash objects take by defect a position on top of every layer, causing that, in my case, sidebar and posts headings replacements appear over Lightbox enlarged image and the like. Maybe there would be some aditional problems, but, as I’m no expert on the subject, I wouldn’t like getting you in a muddle.

This is a solution for using those two add-ons:

Open sifr.js file (or the name of your own file) that you are using for replacements and cut rhe code beginning with conditionnel if(typeof sIFR == «function») (usually at the end of the file). Now, go to your web heading and create a new javascript function with cut data. In my case, that is the result of the function:


[function sIFR_carga() {
if(typeof sIFR == "function"){
sIFR.replaceElement(named({sSelector:"h3.sidebar",
sFlashSrc:"http://www.criteriondg.info/wordpress/avant.swf",
sColor:"#385abe", nPaddingTop:0, nPaddingBottom:0, sWmode:
"transparent"}));
sIFR.replaceElement(named({sSelector:"h3.entrytitle",
sFlashSrc:"http://www.criteriondg.info/wordpress/avant.swf",
sColor:"#385abe", nPaddingTop:0, nPaddingBottom:0, sWmode:
"transparent"}));
};]

Now, look at the line sWmode: «transparent». That line is an essential requirement for it works.

Then, we make the calls to functions of sIFR and Lightbox, using event onload. Look for opening label body and add it: onload=»sIFR_carga();initLightbox();».

That’s enough for all works OK.

Two remarks: The call to script sifr.js must be made after the call to script Lightbox. Second, at the beginning I’ve told that you must cut the sifr.js file contents because otherwise, in Safari, replaced elements would still appear on top. I’ve checked that it works OK in Safari 2, Firefox 1.5 and IE 6. I would thank that someone would check if it works OK in Opera, for instance 😉

NOTE: For any other type of contents in Flash, I think that best way to solve the problem would be give a high z-index value to the layer where it is contained and add the wmode parameter where a call is made to the «flash object» like that:

[param name=»wmode» value=»transparent» /]

So it must work properly.

  5. Hola,
    Sabes como hacer funcionar efecto Ligthbox desde el onload???, lo que quiero es que segun se carga la página, aparezca una imagen con este efecto.
    Gracias por todo
    Un saludo

  6. ni idea guzger, llevo un rato trasteando con códigos a ver si me salía algo pero no hay forma. Lástima. Consigues algo tú?

  9. excelente tu articulo pero tengo un problema, el WMODE me funcionó para los flash embebidos pero tengo otros que son llamados desde un Javascript por aquello del doble clic en explorer. Si le pongop el parámetro al javascript en firefox sigue superponiendose. ¿que de debo hacer ?

  10. pollinoco, siento la tarzanda. Se me había traspapelado tu comentario. El caso que me comentas no se me ha dado nunca.

    Para evitar lo del ActiveX qué empleas? Prueba con SWF Object y haz la llamada al javascript después del de lightbox.

  11. Estimados. Alguien sabe como llamar a LightBox desde Flash para que muestre mas de una imágen?. Hasta ahora he encontrado tutoriales que muestran como visualizar pero tan solo una sola imágen. (Si es utilizando SWFObject, mucho mejor). Desde ya, muchas gracias.

  12. Fernando, en este enlace que te dejo comentan el tema:

    http://www.dynamicdrive.com/forums/showthread.php?t=21317

    Lo de visualizar varias imágenes no te entiendo bien. Supongo que quieres decir hacer una especie de slideshow no? Creo que la ultima version del lightbox añadía esta posibilidad aunque no sé si se podría integrar de igual manera en flash. supongo que sí…supongo.

  14. Hola, estaba buscando algo así.
    Muy buen sitio, y también de mucha utilidad.
    Estoy tratando de hacer compatibles WordPress+Lightbox+WpGlamour (theme que utiliza sifr)

    En cuanto lo consiga, te aviso

    Saludos!
    Te invito a escuchar también un disco muy bueno: areaoceano.com.ar

    Gracias por tus aportes en la web!

Los comentarios están cerrados.

A continuación:

Pinback "Fortress"

Pinback "Fortress"