Efecto Zoom para las imágenes de Blogger con jQuery

En este post les mostraré cómo hacer "zoom" a nuestras imágenes en blogger; es decir, agrandar las imágenes, pero desde adentro. En este truco se emplea jQuery y necesitarás agregar un código dentro del HTML de la imagen que quieras aplicar este efecto.

He agregado algunas imágenes en un blog de pruebas empleando este truco. Puedes verlas pulsando el siguiente botón:

VER DEMO


Si te gustó este truco y deseas emplearlo en las imágenes de tu blog, entonces sigue estos pasos:


1) Ingresamos a Blogger > Diseño > Edición de HTML

2) Presionamos (Ctrl + f) y buscamos la siguiente etiqueta en la plantilla:

</head>

3) Ahora justo encima (ó antes) de esa etiqueta, pegamos lo siguiente:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script src='http://bloggeame-blogger.googlecode.com/files/Cloud_Zoom_1.0.2.js' type='text/javascript'/>

Si ya tienes el script de la librería jQuery en tu plantilla, entonces no agregues lo que está de color verde.




4) Para agregar el efecto "zoom" en las imágenes debemos emplear el siguiente código:

class="cloud-zoom" rel="softFocus: true, position:'inside', smoothMove:2"

5) El código de una imagen en blogger por ejemplo, luciría de la siguiente forma:

<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-rYBRXa52wNE/T1RG3S3zZrI/AAAAAAAAG6c/AMGNToj98Pg/s1600/insect.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="200" src="http://2.bp.blogspot.com/-rYBRXa52wNE/T1RG3S3zZrI/AAAAAAAAG6c/AMGNToj98Pg/s320/insect.jpg" width="320" /></a></div>

6) Entonces lo que tenemos que hacer es agregar el código color azul del número 4 dentro de la etiqueta del enlace de la imagen, entre <a y href="....., quedando entonces de la siguiente manera:

<div class="separator" style="clear: both; text-align: center;">
<a class="cloud-zoom" rel="softFocus: true, position:'inside', smoothMove:2" href="http://2.bp.blogspot.com/-rYBRXa52wNE/T1RG3S3zZrI/AAAAAAAAG6c/AMGNToj98Pg/s1600/insect.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="200" src="http://2.bp.blogspot.com/-rYBRXa52wNE/T1RG3S3zZrI/AAAAAAAAG6c/AMGNToj98Pg/s320/insect.jpg" width="320" /></a></div>

7) Y eso sería todo. Sólo añade ese código color azul en cada imagen que quieras aplicarle el efecto. 
Recuerda que para acceder al código HTML de una imagen añadida en un post, debes ir a la pestaña que dice"HTML" y no en "Redactar":

Imprimir artículo