EFECTO DE ZOOM EN LAS IMÁGENES EN BLOGGER CON JQUERY





EFECTO DE ZOOM EN LAS IMÁGENES EN BLOGGER CON JQUERY
"BLOGS KIRADOBER"


Un gran efecto en las imagenes sin duda es el zoom, sobre todo en aquellas imagenes grandes, este efecto permite agrandar una imagen al contorno de la ventana y poder verla con mas detalle, puedes ver un ejemplo en este blog de pruebas, el efecto lo puedes utilizar en una Entrada o en un Gadget, lo que facilita su uso.

Para ello ve a Diseño-> Edición de HTML y antes de </head> pega lo siguiente:



 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,
a continuación mire la imagen la cual te mostrara tal y cual deberá aparecerte el buscador en tu editor HTML de tu plantilla y así puedas colocar el código en el buscador al momento que yo diga busca este código.


 Busca este código

<head>

Ingrese el siguiente script justo abajo del código que encontraste


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[
/* jQuery Image Magnify script v1.1
* This notice must stay intact for usage
* Author: Dynamic Drive at http://www.dynamicdrive.com/
* Visit http://www.dynamicdrive.com/ for full source code

* Nov 16th, 09 (v1.1): Adds ability to dynamically apply/reapply magnify effect to an image, plus magnify to a specific width in pixels.
* Feb 8th, 11 (v1.11): Fixed bug that caused script to not work in newever versions of jQuery (ie: v1.4.4)
*/

jQuery.noConflict()

Ahora solo se agrega el siguiente codigo en donde quieras ver el efecto (En una Entrada ó un Gadget):

Para implementarlo en un Gadget sighe estos pasos:

Para añadirlo a vuestro blog o web, basta con copiar el codigo de abajo e insertarlo alli dode querais que aparezca.

1-Un clic en “Diseño”

2-Clic en “Añadir un gadget”

3-Busca el widget que dice “HTML-Javascript” y ábrelo

4-Coloca el siguiente codigo en el interior



<img src="http://urldelaimagen.jpg" class="magnify" style="width:225px; height:150px" />


Puedes repetir cuantas veces quieras el codigo anterior, dependiendo de las imagenes que quieras poner.

Configuracion:
Cambia la direccion (url) marcada en rojo por la direccion de la imagen que quieras poner.
width:225px : Es el ancho de la imagen por default.
height:150px :Es el Alto de la imagen por default.


Data de la Publicación; 09-09-2020

Fuente| dynamicdrive. 

 Publicado por;                                                 






No hay comentarios:

Publicar un comentario

featured Slider

Adbox