LIGHTBOX IMÁGENES EN VENTANAS MODALES PARA BLOGGER

by Blogs Famag - marzo 03, 2020

"BLOGS FAMAG"

Las ventanas modales son ese efecto cuando una imagen se abre encima de todo el contenido y oscurece toda la pantalla.
Si bien en la actualidad hay muchos sistemas que permiten hacer todo esto vamos a ver al pionero en su tipo, Lightbox.
Esta técnica creada por Lokesh Dhakar dejó atrás a las ventanas popups ya que el efecto es mucho más llamativo debido a la forma que se presenta la imagen. De él han surgido muchos clones como Lightwindow, Thickbox, etc.

Por lo pronto vamos a empezar a usar Lightbox que se encuentra en su versión 2.04 que aunque no soporta ventanas modales para todo tipo de archivos sí funciona muy bien para las galerías de imágenes.

Puedes ver un ejemplo en esta galería de imágenes de ejemplo.

La instalación es muy sencilla sólo necesitamos Prototype, Scriptaculous, Lightwindows.js y el archivo .ccs de los estilos.

Para poner Lightbox en Blogger entra en Diseño > Edición de HTML y antes de </head> pega lo siguiente:

NOTA: Si ya tienes Prototype y Scriptaculous sólo añade lo demás.

Para implementarlo en vuestro Bloc solo tenéis que seguir estos pasos:

Un clic en “Plantilla”

Un clic en “Editar HTML”

Ahora se te abrirá el editor HTML de tu plantilla, se mostrara igual como la imagen que esta a continuación

En este punto deberás presionar la tecla “Control” de tu teclado seguido de la tecla “F” para que aparezca el buscador integrado en la parte superior derecha de tu editor,
debes esperar unos segundos hasta que se muestre, aquí es donde tendrás que insertar el código para buscarlo e insertar los códigos correspondientes en el editor,
a continuación mire la imagen la cual te mostrara tal y cual deberá aparecerte el buscador en tu editor HTML de tu plantilla y así puedas colocar el código en el buscador al momento que yo diga busca este código.

Coloca este código en el buscador y dale un "Enter"

</head>

Inserta las siguientes líneas de código justo arriba (ó antes) del código que encontraste

<script src='http://www.google.com/jsapi'></script>
<script>
google.load("prototype","1.7.0.0");
google.load("scriptaculous", "1.9.0");
</script>


<script src='http://sites.google.com/site/ciudadbloggerfiles/Home/lightbox.js' type='text/javascript'/>
<link href='http://sites.google.com/site/ciudadbloggerfiles/Home/lightbox.css' media='screen' rel='stylesheet' type='text/css'/>

Ahora cuando quieras que una imagen aparezca en una ventana modal usa este código:

Sólo cambia la URL de la imagen las dos veces donde se indica en color rojo, y en la parte azul puedes cambiar el ancho que tendrá la imagen en miniatura. Si te fijas se ha añadido al código rel="lightbox" esa parte es sumamente importante pues es la que le indicará al script que la imagen debe mostrarse en ventana modal.
Si tuvieras una galería de imágenes sólo se añade entre corchetes el nombre de la galería,

Consideraciones:
Lightbox funciona en todos los navegadores aunque las versiones antiguas de Intenet Explorer pueden presentar problemas.
Para que la ventana modal funcione correctamente debes esperar a que la página cargue por completo para asegurar que los archivos ya han sido leídos y pueden ejecutarse.
Tanto el script como la hoja de estilos los he alojado en mi servidor, pero se recomienda que los descargues y los alojes en tu propio hosting para evitar que se sobre cargue el ancho de banda y se alente tu blog.

Una vez que los hayas subido a tu hosting sólo cambia la URL de cada uno de ellos en el primer código que he marcado en color verde.

script