Configuración:
.
Biología
.
Botánica
.
Tecnología
.
Sociedad
A mis trece años de edad, el día 2 de Diciembre de 2007 inicié ‘El Balcón de Jame’. Este humilde espacio, cuyo secreto siempre fue el de compartir sin recibir nada a cambio, me dio la oportunidad de conocer un mundo nuevo, un entorno en el que me sentía yo mismo.

Hoy, 17 de abril de 2011 finalizo esta etapa de mi vida con una gran sonrisa y junto al recuerdo que este blog y cada unos de vosotros me habéis concedido.

He sido bloggero.

Jaime Trujillo Escobedo.

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.

Ana Laura dice...

Esto está muy interesante, muchas gracias!!!

Jaime Trujillo Escobedo dice...

¡Muchas gracias Ana Laura! Puede ser de mucha utilidad para aquellos blogs de fotografía que publiquen imágenes de gran tamaño.

Jose dice...

Se puede hacer lo mismo pero sólo posando el ratón?
Gracias

Jaime Trujillo Escobedo dice...

Claro Jose. Accede a esta entrada para descubrir el procedimiento.

Escribe tu comentario en la entrada...

El Balcón de Jaime fue terminado el 17 de abril de 2011. Leer despedida.

Me gustaría conocer tu opinión. El comentario será moderado y en breve se publicará.

Si deseas incluir un enlace utiliza este código:

<a href="Dirección de tu página">Titulo del enlace</a>

Para publicar un código haz uso del Conversor de entidades.

Intenta escribir sobre algo relacionado con el artículo. Si no lo haces, podría tardar en responderte.

¿Problemas al comentar? Utiliza el formulario antiguo