Imagen que se agranda o expande con un clic

Ya hemos aprendido a incluir en el blog tanto imágenes que se agrandan al pasar el cursor por encima como imágenes que se expanden de forma deslizante.

Con este otro truco conseguiremos que las imágenes puedan visualizarse con un mayor tamaño haciendo un clic -sin salir de la página-, lo que es una verdadera ventaja para cualquier lector interesado en las ilustraciones que componen tus artículos.

Al construir el script, me decanté también por agregar una curiosa característica: el cursor de la lupa (que podrás personalizar añadiendo un cursor personal).

Pulsa sobre cada imagen para comprobar el resultado:

Diseño>Edición de HTML>expandimos artilugios

Busca la etiqueta </head> en tu plantilla y justo antes añade estas líneas:

<script src='https://sites.google.com/site/scriptsbalcon/b/blJJimgagrand.js' type='text/javascript'/>
<style>.bliiJ{cursor:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZeg4VdSfPy-ESwEeE6zg5DXeDwZM7282U8Tu1qnwTsotRUqF6_fR9fSORUEa9VIpxaq_WCXlwdbB9YimX_sZQDQRyTOzfKkVQJv0b_AmQKscok-pTzCVvEyJe4IfPSkqAg-9qsyTOVdY/s320/blJJLupa.gif"), pointer !important;}</style>

He resaltado en color naranja la dirección del script que hace funcionar el truco. Puedes descargarlo para alojarlo en tu propia plataforma si lo deseas.

Guarda la plantilla.

Dirígete a una entrada cualquiera para publicar una imagen de prueba. Este es el código necesario:

<img class="bliiJ" style="width: 114px; height: 171px;" src="URL IMAGEN" onclick="imgblJte('114px','171px','208px','312px',this);">

Reemplaza URL IMAGEN con la dirección de la imagen.

Comprobarás que hay un total de 6 cifras resaltadas en color verde y azul. Los valores en color verde indican el ancho y el alto de la imagen (respectivamente) en miniatura, mientras que los dos números en azul representan la anchura y la altura de la imagen ampliada.

Debes editar todo esto conforme al tamaño de la fotografía escogida y habrás terminado.