Блог

html — коды для увеличения

вот javascript

 $(document).ready(function()
        {
            var sub_width = 0;
            var sub_height = 0;
            $(".large").css("background","url('"   $(".small").attr("src")   "') no-repeat");

            $(".zoom-area").mousemove(function(e){
                if(!sub_width amp;amp; !sub_height)
                {
                    var image_object = new Image();
                    image_object.src = $(".small").attr("src");
                    sub_width = image_object.width;
                    sub_height = image_object.height;
                }
                else
                {
                    var magnify_position = $(this).offset();

                    var mx = e.pageX - magnify_position.left;
                    var my = e.pageY - magnify_position.top;
                    
                    if(mx < $(this).width() amp;amp; my < $(this).height() amp;amp; mx > 0 amp;amp; my > 0)
                    {
                        $(".large").fadeIn(100);
                    }
                    else
                    {
                        $(".large").fadeOut(100);
                    }
                    if($(".large").is(":visible"))
                    {
                        var rx = Math.round(mx/$(".small").width()*sub_width - $(".large").width()/2)*-1;
                        var ry = Math.round(my/$(".small").height()*sub_height - $(".large").height()/2)*-1;

                        var bgp = rx   "px "   ry   "px";
                        
                        var px = mx - $(".large").width()/2;
                        var py = my - $(".large").height()/2;

                        $(".large").css({left: px, top: py, backgroundPosition: bgp});
                    }
                }
            })
        })
 

на 2-м изображении функция «увеличить» не работает , используется тот же класс, но на 2-м изображении этой функции нет.

что я хотел сделать, так это включить функцию увеличения на нескольких изображениях

кодовое обозначение : https://codepen.io/wavyblues/pen/PoKoVJM