Contenido

Lightbox Plugin ya funciona en IE

3 jul

+ 15

Soy una gamba, me duele la espalda y las camisetas me hacen un dolor indescriptible… ese es uno de los problema de vivir en una isla y tener novia… te obligan a ir a la playa.

Por ese motivo hoy he tenido más tiempo, y me he puesto al día con las series que estoy viendo, además me ha dado tiempo a corregir un pequeño problema que me comentaba Edgar sobre Lighbox Plugin.

Lightbox Plugin es el plugin que uso para mostrar las imagenes en el blog, uso una versión antigua modificada, ¿por que? principalmente por que no necesito más, ni slideshow, ni efectos de despliege, ni nada solo necesito que haga su función, mostrar imagenes.

Adapté un poco la expresión regular que encontra las imagenes en el texto y las formatea al formato lightbox para hacerlo más cómodo para mi, ya que solo lo uso para imagenes y nada de enlaces que te muestran enlaces (no es usable).

Edgar me comentaba en un mail que le iba genial la modificación, pero que había un problema en el oscurecimiento de la pantalla desde IE (como no). Esto es cosa de lightbox asi que no tenía mucha idea de por que estaba pasando. Me he puesto a indagar y he encontrado el problema.

El problema

IE y los PNG, exactamente los transparente, no son muy amigos. Osea que no los trata como tal. Por ese motivo el plugin utilizaba una línea en el CSS que procesaba la imagen PNG y la hacía parcialmente transparente.

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader
(src="overlay.png", sizingMethod="scale"); 

De esta forma IE permite mostrar imagenes PNG transparentes, una chapuza pero en IE 7 ya esta solucionado (o debería).

El problema radíca en que el plugin no indica el directorio donde encontrar la imagen overlay.png,  y por ese motivo no aparece la imagen ni el efecto de oscurecimiento del fondo.

¿Por que firefox si se ve?

Muy fácil, como todos sabemos IE y firefox “requieren” un tratamiento distinto, tanto en CSS como en Javascript, por ese motivo se intentan usar código estandares, aunque hay casos en los que es imposible conseguir que una misma línea sirva para los 2 (o para todos los demás).

Por ese motivo en CSS se sobrecargan las definiciones y en Javascript controlamos el navegador que nos visita. En este caso sobrecarga la definición del objeto overlay de la siguiente forma.


#overlay{ background-image: url(overlay.png); }
* html #overlay{    
    background-color: #333;    
    back\ground-color: transparent;    
    background-image: url(blank.gif);    
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader
(src="overlay.png", sizingMethod="scale");    
    }    
  

Como podeis ver se están definiendo 2 veces el mismo objero con atributos diferentes. En la primera de las declaraciones indicamos que el objeto overlay dispondrá de una imagen llamada overlay.png y todos los navegadores lo tendrán en cuenta, pero IE al llegar a la siguiente, interpretará que ha de cargar el fichero overlay.png como un png transparente, sin que los demás navegadores interpreten estas líneas.

Solución

Podemos escribir la ruta directa de nuestro fichero overlay.png en la línea dedicada a IE, o podemos controlar por Javascript que si se trata de IE aplique el filtro mediante Javascript cargando dinámicamente la ruta de la imagen.

¿Por que tanto rollo?

El motivo de tener que hacer tanto rollo es que las páginas estáticas como CSS o Javascript no permiten como PHP definir variables que se expandirán antes de llegar al navegador, sinó que viajan como texto plano hasta el navegador y se procesan en él.

He subido la modificación por si a alguien le sirve para algo, podeis descargarla de aqui.

  • grasias por la aclaracion, enserio nesesitaba entender el por que de esa situacion (…que al final de cuentas…tampoco entendi, jejeje.) pero la verdad a mi me intereso mucho este post y aprender un poco mas sobre la manipulacion de css. y como lo dije en mi mail. eres bueno Anieto :)

  • Hola, de nuevo yo :)
    Después de instalar esta versión del plugin, este dejó de funcionar y ahora las fotos se abren en una nueva ventana.
    Con la versión 0.1 de tu plugin todo funcionaba bien, excepto que no se veía la X para cerrar la foto en ningún browser, y la única forma de cerrarla era haciendo click por fuera (y solo por encima) de ella.
    Como curiosidad, en la versión 0.1 de tu plugin no hacía falta poner el “rel=lighbox”: el plugin funcionaba pusiera o no esto :)

    salu2

  • Buenas Germán, ahora tampoco hace falta porner rel="lightbox" el plugin se encarga de eso.
    Es muy raro que no te funcione ya que es exactamente el mismo código que el anterior, solo que la ruta de la imagen de cerrar y la que oscurece el fondo están ahora localizadas. El código es exactamente igual.

    ¿Lo tienes en tu web ahora? Me gustaría ver por que falla.

  • Hola Angel,
    si, lo tengo puesto ahora mismo. Lo voy a dejar hasta el lunes, para que tengas tiempo de mirarlo.
    Vas a ver que si te ponés encima de una foto te va a salir un screenshot de alexa. Eso es porque tengo activo un plugin que se llama alexify. Pero ya probé a desactivarlo e = esta versión 0.5 no funciona.
    Yo no entiendo porque a mi no me funciona ninguno de estos plugins… ya me imaginaba que solo habia cambios en el path de las imágenes, porque leí el artículo.

    salu2

  • Hola Angel,
    ya tengo solucionado el problema con este plugin v0.5.
    No había tal problema, sino solo que era necesario poner el rel=”lightbox”. Yo no lo estaba poniendo con esta versión, porque con la v0.1 no era necesario.

    salu2 !

  • Buenas German, el problema estaba en que además de ese plugin usas otros que modifican la salida de las imagenes. Por lo tanto nunca llegan con la estructura que necesita.

    Al no llegar como necesita litebox, no lo reconoce y no lo procesa.

    Pero si lo has solucionado añadiendo rel="lightbox" ya le estás ahorrando trabajo al plugin.

    Un saludo.

  • humm, si, pero sigue siendo extraño, ya que una de las pruebas que hice fue deshabilitar todos los plugins…
    De hecho, el único que tengo que modifica la salida de las imágenes es “alexify”.

    salu2

  • Claro German, ese plugin ya modifica las imagenes para su gusto, de tal forma que cuando va a lanzar LiteBox no están formateadas como deberían. Una solución es añadirles el rel="lightbox" aparte. De esta forma estás formando la estructura básica que necesita LiteBox.

    Un saludo.

  • Muchas gracias, el plugin funciona perfectamente. Un gran curro. Por cierto, ¿conoces algún plugin para elegir el tamaño de los thumbnails que crea automáticamente el WP al subir las fotos? Complementaría a este perfectamente. Es que el que usa me parece demasiado pequeño. Gracias de nuevo

  • Es necesario que las imagenes se encuentren en: /wp-content/uploads/ ?
    Existe alguna manera de ponerlo subiendo las fotos a otro servidor ?
    Gracias ;)

  • #13 no es necesario, el se encarga de mostrar cualquier imagen, esté donde este.

    Un saludo

Comentar

#

Me reservo el derecho de eliminar y/o modificar los comentarios que contengan lenguaje inapropiado, spam u otras conductas no apropiadas en una comunidad civilizada. Si tu comentario no aparece, puede ser que akismet lo haya capturado, cada día lo reviso y lo coloco en su lugar. Siento las molestias.