IMÁGENES AMPLIADAS CON JQUERY

IMÁGENES AMPLIADAS CON JQUERY .

Los efectos con JQuery me encantan, y para muestra un botón (una imagen en este caso,).

 En Blogger hace poco que nos han habilitado la opción del "lightbox" en las imagenes, esto es algo parecido pero aun me gusta mas.

 Cuando pasamos el ratón por la imagen, el cursor se convierte en una lupa y al hacer click sobre ella se amplia rápidamente con un efecto suave muy molón.

 Al volver a dar click sobre ella, vuelve a su tamaño original.

Para poner este efecto tan chulo en vuestro blog o web, añadís el siguiente código en vuestra plantilla antes de </head>:

 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,

 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://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript">
</script>
<script src="http://hostredeando.ucoz.es/SCRIPTS-BLOG/jquery.magnifier.js" type="text/javascript">
/***********************************************
* Imagen amplada con jQuery
REDEANDO - tu blog webmaster
http://redeando.blogspot.com/
***********************************************/
</script>

Una vez hecho esto, ya solo nos queda añadir el siguiente código cada vez que queráis poner una imagen con este efecto. Cambiáis lo que esta en rojo por la url de la imagen y el tamaño y listo.

<img class="magnify" src="URL DE LA IMAGEN" style="height: 200px; width: 200px;" />

Data de la Publicación; 02-09-2019

 Fuente; redeando

 Publicado por;