[APORTE] · Efecto Lupa

[TrinityCore]

Hola gente, espero esten bien.

He desarrollado este script para mi sitio web, me viene bien ya que muchas veces las imagenes al tener un tamaño fijo estas no se ven en detalle.

Aqui dejo el code:

Código Javascript:

// #magnifying es el id de la lupa.
var MagnifyingZoom = 2; // Nivel de Zoom.
var ImageWidth, ImageHeight;
 
function ZoomImage(object){
    ImageWidth = $(object).width();
    ImageHeight = $(object).height();
    $(object).on("mouseenter", function(){
        var Image = $(object).css("background-image");
        $("#magnifying").css({"background-image":Image});
    });
    $(object).on("mousemove", function(e){
        var PositionX = e.pageX;
        var PositionY = e.pageY;
        var ContainerX = e.pageX - this.offsetLeft;
        var ContainerY = e.pageY - this.offsetTop;
        MagnifyingFollow(ContainerX, ContainerY);
        CheckMagnifying(object, PositionX, PositionY, ContainerX, ContainerY);
        SetZoom(ContainerX, ContainerY);
    });
}
 
function SetZoom(ContainerX, ContainerY){
    var ImageX = $("#magnifying").width() / (2 * MagnifyingZoom);
    var ImageY = $("#magnifying").height() / ( 2 * MagnifyingZoom);
    $("#magnifying").css({
        "background-position":"top -"+((ContainerY - ImageY) * MagnifyingZoom)+"px left -"+((ContainerX - ImageX) * MagnifyingZoom)+"px",
        "background-size":(ImageWidth * MagnifyingZoom)+"px "+(ImageHeight * MagnifyingZoom)+"px",
    });
}
 
function MagnifyingFollow(PageX, PageY){
    $("#magnifying").show();
    $("#magnifying").css({
        "left":(PageX-($("#magnifying").width()/2))+"px",
        "top":(PageY-($("#magnifying").height()/2))+"px"
    });
}
 
function CheckMagnifying(object, CursorX, CursorY, ContainerX, ContainerY){
    if(ContainerX <= 0 || ContainerY <= 0 || ContainerX > $(object).width() || ContainerY > $(object).height()){
        $("#magnifying").hide();
    }
}
 

Solo llamamos a la funcion y listo.

Código Javascript:

ZoomImage('ContainerSelector');
 

CSS Lupa:

Código CSS:

#magnifying{
    background-position:center center;
    background-repeat:no-repeat;
    background-color:rgba(255,255,255,1);
    border:1px solid rgba(0,0,0,1);
    box-shadow:0px 0px 1px rgba(255,255,255,1);
    width:20vmin;
    height:15vmin;
    position:relative;
    cursor:none;
    display:none;
}
 

Espero que les sea de utilidad tanto como ami.