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 mui 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
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,
Busca el siguiente código
</head>
Ahora justo encima (ó antes) de esa etiqueta, pegamos lo siguiente:
<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>
</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 codigo cada vez que querais poner una imagen con este efecto.
Cambiais 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;" />
Fecha: 02/04/2019
Fuente: redeando
Publicado por:
