Blogger implemento en las ultimas horas un Lightbox para las imágenes alojadas en el blog, el problema que muchos le vemos a la medida es que fue in consulta, nadie nos aviso, nadie no da una opción para retirarla.
Voy a darles dos opciones, la primera es aceptar el cambio y personalizar la pantalla modal hasta que nos guste y la segunda es tratar de bloquear el Lightbox para seguir con nuestras opciones de visualización de imágenes.
Lo más importante de todo es que ustedes sabiendo el nombre de las áreas pueden hacer sus propios cambios.
Una de las áreas que podemos modificar es el fondo de la pantalla modal, el fondo negro con opacidad 0.9 sobre el cual se muestran las imágenes. Esa área es un div llamado CSS_LIGHTBOX_BG_MASK.
Otra área importante la imagen en si misma, la cual es un img nombrado CSS_LIGHTBOX_SCALED_IMAGE_IMG, ese es el nombre de las etiquetas img que crea el Lightbox.
El área donde están las miniaturas me parece poco modificable, por ahora carezco de creatividad, y tiene el nombre CSS_LAYOUT_COMPONENT CSS_LIGHTBOX_FILMSTRIP.
Como ven los nombres de las clases fueron diseñados para evitar confusiones u homónimos en el código de cualquiera.
Las reglas que use para mi personalización fueron las siguientes:
Como resultado tengo lo siguiente.
El editor de englishjavadrinker.blogspot.com, uno de esos programadores empedernidos desarrollo su solución para bloquear el Lightbox y lo puso a disposición del mundo en su propio blog de blogger, tiene algunos errores y se aplica cuando la página esta completamente cargada, con un poco más de tiempo serán subsanados esas faltas y lograremos nuestra independencia a los lineamientos de blogger,
Él propone pegar antes del </head> el siguente código
En mi caso el resultado al bloquear el Lightbox es
Por mi parte voy a durar unos días más con el Lightbox impuesto por blogger, y lo iré personalizando a mi gusto poco a poco.
Leer más...
Voy a darles dos opciones, la primera es aceptar el cambio y personalizar la pantalla modal hasta que nos guste y la segunda es tratar de bloquear el Lightbox para seguir con nuestras opciones de visualización de imágenes.
Personalización
Lo más importante de todo es que ustedes sabiendo el nombre de las áreas pueden hacer sus propios cambios.
Una de las áreas que podemos modificar es el fondo de la pantalla modal, el fondo negro con opacidad 0.9 sobre el cual se muestran las imágenes. Esa área es un div llamado CSS_LIGHTBOX_BG_MASK.
Otra área importante la imagen en si misma, la cual es un img nombrado CSS_LIGHTBOX_SCALED_IMAGE_IMG, ese es el nombre de las etiquetas img que crea el Lightbox.
El área donde están las miniaturas me parece poco modificable, por ahora carezco de creatividad, y tiene el nombre CSS_LAYOUT_COMPONENT CSS_LIGHTBOX_FILMSTRIP.
Como ven los nombres de las clases fueron diseñados para evitar confusiones u homónimos en el código de cualquiera.
Las reglas que use para mi personalización fueron las siguientes:
<style type="text/css">
.CSS_LIGHTBOX_BG_MASK {
background-color: #FFF;
background: -webkit-radial-gradient(rgba(127, 127, 127, 0.5), rgba(127, 127, 127, 0.5) 35%, rgba(0, 0, 0, 0.7));
background-image: -webkit-gradient(linear, left top, left bottom, from(0.5)), color-stop(35%, rgba(127, 127, 127, 0.5)), to(rgba(0, 0, 0, 0.7)));
background: -webkit-linear-gradient(rgba(127, 127, 127, 0.5), rgba(127, 127, 127, 0.5) 35%, rgba(0, 0, 0, 0.7));
background: -moz-linear-gradient(rgba(127, 127, 127, 0.5), rgba(127, 127, 127, 0.5) 35%, rgba(0, 0, 0, 0.7));
background: -o-linear-gradient(rgba(127, 127, 127, 0.5), rgba(127, 127, 127, 0.5) 35%, rgba(0, 0, 0, 0.7));
background: -ms-linear-gradient(rgba(127, 127, 127, 0.5), rgba(127, 127, 127, 0.5) 35%, rgba(0, 0, 0, 0.7));
background: linear-gradient(rgba(127, 127, 127, 0.5), rgba(127, 127, 127, 0.5) 35%, rgba(0, 0, 0, 0.7));
}
img.CSS_LIGHTBOX_SCALED_IMAGE_IMG {
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
-o-border-radius: 12px;
-ms-border-radius: 12px;
-khtml-border-radius: 12px;
border-radius: 12px;
-webkit-box-shadow: 0px 0px 25px rgba(0, 0, 0, .5);
-moz-box-shadow: 0px 0px 25px rgba(0, 0, 0, .5);
box-shadow: 0px 0px 25px rgba(0, 0, 0, .5);
outline: none;
padding:10px;
}
</style>
Como resultado tengo lo siguiente.
Bloquear el Lightbox
El editor de englishjavadrinker.blogspot.com, uno de esos programadores empedernidos desarrollo su solución para bloquear el Lightbox y lo puso a disposición del mundo en su propio blog de blogger, tiene algunos errores y se aplica cuando la página esta completamente cargada, con un poco más de tiempo serán subsanados esas faltas y lograremos nuestra independencia a los lineamientos de blogger,
Él propone pegar antes del </head> el siguente código
<script type="text/javascript" >
//<![CDATA[
function killLightbox() {
var images = document.getElementsByTagName('img');
for (var i = 0 ; i < images.length ; ++i) {
images[i].onmouseover=function() {
var html = this.parentNode.innerHTML;
this.parentNode.innerHTML = html;
this.onmouseover = null;
};
}
}
if (window.addEventListener) {
window.addEventListener('load',killLightbox,undefined);
} else {
window.attachEvent('onload',killLightbox);
}
//]]>
</script>
En mi caso el resultado al bloquear el Lightbox es
Por mi parte voy a durar unos días más con el Lightbox impuesto por blogger, y lo iré personalizando a mi gusto poco a poco.