15 de diciembre de 2016

Tutorial: Personalizar el Lightbox

Primero que nada.. ¿Qué es Lightbox?
   Lightbox es un sistema de ventanas modales para ver las imágenes de nuestro blog.
Normalmente cuando le damos click a las imágenes en un blog estas se verán en su tamaño original, de esta forma.. 

Pero he encontrado un sencillo y muy útil código que hará que ahora el Lightbox sea a nuestro completo gusto....
Antes de comenzar tienes que activar el Lightbox de Blogger.
¿Cómo hacerlo?
  • Dirígete a:  ConfiguraciónEntradas, comentarios y elementos compartidos → Mostrar imágenes con Lightbox.
Cuando estés ahí, activa el Lightbox eligiendo "Si"

Una vez que este activado podemos modificar el aspecto de la ventana por completo, el color de fondo, la transparencia, el botón de cerrar, los textos, y la barra donde se muestran las miniaturas de las imágenes.

Ejemplo:

Para personalizarla lo único que deben hacer es ir a
  • Plantilla >> Edición HTML >> y buscar (Ctrl + F): ]]></b:skin> 
Una vez encontrado la etiqueta, pega ARRIBA de ella lo siguiente:
/* Lightbox de Blogger
----------------------------------------------- */
/* Color de fondo de la pantalla */
.CSS_LIGHTBOX_BG_MASK {
background-color: #D8D8D8 !important;
opacity: 0.9 !important;
filter: alpha(opacity=90) !important;
}
/* Estilos de las imágenes */
.CSS_LIGHTBOX_SCALED_IMAGE_IMG {
outline: 0px solid #FFF !important;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
-webkit-box-shadow: 0px 0px 0px #000000;
-moz-box-shadow: 0px 0px05px #000000;
box-shadow: 0px 0px 0px #000000;
}
/* Icono para cerrar la ventana modal */
.CSS_LIGHTBOX_BTN_CLOSE {
background: url(http://historico.oepm.es/archivohistoricow3c/img/cerrar.png) no-repeat !important;
width: 21px !important;
height: 21px !important;
}
/* Color de fondo de la barra de miniaturas */
.CSS_LIGHTBOX_FILMSTRIP {background-color: #DF013A !important;}
/* Color del texto de la información de la imagen */
.CSS_LIGHTBOX_ATTRIBUTION_INFO, .CSS_LIGHTBOX_ATTRIBUTION_LINK {color: #000 !important;}
/* Color del índice (número de imágenes) */
.CSS_LIGHTBOX_INDEX_INFO {color: #000 !important;}

Entendiendo el codígo 

  • Lo que esta en negrita en lo que puedes modificar... 
  • http://historico.oepm.es/archivohistoricow3c/img/cerrar.png: es el icono de la X que cierra la ventana. Lo puedes cambiar por otro icono de tu preferencia. Pero recuerda tambien modificar el tamaño (21) y colocar el tamaña del icono que agregas.
  • El /* Color de fondo de la pantalla */ puedes cambiarlo una imagen. Si deseas hacer eso entonces cambia esta línea: background-color: #D8D8D8 !important; por background-image:url(URL de la imagen) !important;
  • Si no quisieras que aparezca la información de la imagen (generalmente la URL de ella) agrega debajo de /* Color del texto de la información de la imagen */ esto: display: none;
Listo...
Una vez modificado guarda la plantilla y ya tendrá tu nueva y modificada versión del Lightbox.

Muchos besos y abrazos, hasta la próxima

No hay comentarios:

Publicar un comentario