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.
12 comentarios, 3 referencias
+
#