WORDPRESS

Efecto lupa gratis para tu pagina web, wordpress 152, tutorial

En este tutorial de SYSPA SOCIAL Aprenderemos como hacer un efecto lupa gratis para tu pagina web wordpress.

Sumamos 1 efecto mas a nuestra colección que pueden entrar en esta mismo sitio dentro de la sección wordpress y además en mi canal de youtube, en este caso el efecto lupa, el cual puede resultar muy útil para imágenes donde se requiere de visualizar detalles del contenido.

Vamos a realizarlo de manera muy simple y sin utilizar plugins, obviamente TODO GATIS!.

Principales puntos del tutorial efecto lupa gratis para tu pagina web wordpress.

Creamos una nueva pagina web.
Insertamos una imagen la cual será modificada.
Damos nombre de grupo a nuestra imagen
Pegamos el código para generar la lupa.
Probamos todo lo realizado en los pasos anteriores.

Videos relacionados con efecto lupa gratis para tu pagina web.

🖐️ 15 trucos o funcionalidades ocultas de elementor gratis, wordpress 121 tutorial o curso español.

Aprenderemos 15 trucos o funcionalidades ocultas de elementor para que sigas mejorando tu pagina web wordpress.

🖐️ Efectos y animaciones elementor MAS DE 2 hs, wordpress 138 tutorial español.

En este video de elementor les dejo mas de 2 hs de animaciones y efectos que seran geniales para tu pagina web wordpress. wordpress.

🖐️ Como hacer tu pagina web con elementor, WordPress 48, tutorial o curso español.
Agregaremos un chat de whatsapp a tu pagina web wordpress de manera simple y gratis.

🖐️ Mejor hosting wordpress, análisis completo, SLL y DOMINIO GRATIS, WordPress 35, tutorial español.

Analizamos paso a paso, todos los detalles del hostin sered, que nos brindara un 10% de descuento, ssl y dominio gratis.

Código CSS Utilizado

<style>
.magnify{
border-radius: 50%;
border: 2px solid black;
position: absolute;
z-index: 20;
background-repeat: no-repeat;
background-color: white;
box-shadow: inset 0 0 20px rgba(0,0,0,.5);
display: none;
cursor: none;
}
</style>

Código javascript Utilizado.

<script>
var $m = jQuery;
$m(document).ready(function() {
var magnifierSize = 250;
var magnification = 4;
function magnifier() {
this.magnifyImg = function(ptr, magnification, magnifierSize) {
var $pointer;
if (typeof ptr == "string") {
$pointer = $m(ptr);
} else if (typeof ptr == "object") {
$pointer = ptr;
}
if(!($pointer.is('img'))){
alert('Object must be image.');
return false;
}
magnification = +(magnification);
$pointer.hover(function() {
$m(this).css('cursor', 'none');
$m('.magnify').show();
var width = $m(this).width();
var height = $m(this).height();
var src = $m(this).attr('src');
var imagePos = $m(this).offset();
var image = $m(this);
if (magnifierSize == undefined) {
magnifierSize = '150px';
}
$m('.magnify').css({
'background-size': width * magnification + 'px ' + height * magnification + "px",
'background-image': 'url("' + src + '")',
'width': magnifierSize,
'height': magnifierSize
});
var magnifyOffset = +($m('.magnify').width() / 2);
var rightSide = +(imagePos.left + $m(this).width());
var bottomSide = +(imagePos.top + $m(this).height());
$m(document).mousemove(function(e) {
if (e.pageX < +(imagePos.left - magnifyOffset / 6) || e.pageX > +(rightSide + magnifyOffset / 6) || e.pageY < +(imagePos.top - magnifyOffset / 6) || e.pageY > +(bottomSide + magnifyOffset / 6)) {
$m('.magnify').hide();
$m(document).unbind('mousemove');
}
var backgroundPos = "" - ((e.pageX - imagePos.left) * magnification - magnifyOffset) + "px " + -((e.pageY - imagePos.top) * magnification - magnifyOffset) + "px";
$m('.magnify').css({
'left': e.pageX - magnifyOffset,
'top': e.pageY - magnifyOffset,
'background-position': backgroundPos
});
});
}, function() {
});
};
this.init = function() {
$m('body').prepend('<div class="magnify"></div>');
}
return this.init();
}
var magnify = new magnifier();
magnify.magnifyImg('img', magnification, magnifierSize);
});
</script>

Tenemos Cientos de tutoriales Wordrpess

Inicia aquí gratis !

Accede al listado completo de tutoriales wordpress.