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

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

"BLOGS KIRADOBER"

 Hace poco vimos cómo aumentar las imágenes usando Zoom It, ahí les mencionaba que estos efectos de zoom se pueden conseguir con distintas librerías de scripts, uno de ellos es jQuery, y hoy veremos uno en particular que es una creación de Ben Nadel y que hace eso, seleccionar un área de la imagen para aumentarla.

Puedes ver el demo en este blog de pruebas. Al hacer click sobre el recuadro se hará un zoom, para quitar el zoom sólo basta dar click fuera de la imagen.

Implementarlo sólo requiere cuatro pasos: primero descarga este archivo, descomprímelo y sube el archivo zoom-clip.js a un servidor.

Luego entra en Diseño | Edición de HTML y pega antes de </head> lo siguiente:

Para implementarlo en vuestro Bloc solo tenéis que seguir estos pasos:

 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.

 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 language='javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script language='javascript' src='URL del archivo .js' type='text/javascript'/>

Cambia lo que está en color azul por la URL del archivo que previamente subiste al hosting.

Ahora antes de ]]></b:skin> pega esto:

Para implementarlo en vuestro Bloc solo tenéis que seguir estos pasos:

 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, 

 Busca el siguiente código

]]></b:skin>

 Busca este código ]]></b:skin> una vez que hayas encontrado el código deberás insertar las siguientes líneas de código justo arriba del código que encontraste

#view {
border: 1px solid #333333; /* Borde de la imagen */
overflow: hidden;
position: relative;
width: 400px; /* Tamaño de la imagen */
}

#image {
display: block;
left: 0;
top: 0;
}

#zoom {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2OgxR3SIZr4nfn50yZ4jGDd_AG2XYCNPGTltZj499RK9DgMut1hNMArf8kii63cgRX3FHXIiLZqUEW1FjXVZkN6m4lisRDoyIJzT2u3Y8dK4RpoZ5FX8FjSd5rfCbXisUp0pO1q46icjw/s1600/fade.PNG);
border: 1px solid #000000;
cursor: pointer;
display: none;
height: 200px;
position: absolute;
width: 200px;
z-index: 100;
}

Por último usa este código cuando quieras ponerle el zoom a tus imágenes:

<div id="view">
<img id="image" src="URL de la imagen" width="400" />
</div>

Cambia la URL de la imagen donde se indica y listo.
Verás que tanto en los estilos como en el último código hay un ancho de 400px, este es el ancho que tendrá la imagen, si deseas cambiar el tamaño tendrás que cambiar ambos valores que están marcados en negrita.

Data de la Publicación; 16-10-2019

 Fuente; ciudadblogger

 Publicado por;