Zoomooz вместе с панорамированием тела - увеличенный элемент расположен не по центру

Question

Я пытаюсь создать страницу с несколькими изображениями, разбросанными по всей странице. Панорамирование на странице будет контролироваться положением мыши. И когда вы нажимаете на изображение, оно увеличивается и остается там, пока я не нажму в другом месте, чтобы уменьшить масштаб.

Я использую Zoomooz вместе с плагином панорамирования изображений, который я нашел на http://manos.malihu.gr/jquery-image-panning/

Я попытался создать прослушиватель щелчков на кликабельных якорях и добавить автоматическое левое и правое поля, надеясь, что это приведет к выравниванию увеличенного div в центре экрана, но это не работает.

Я предполагаю, что фрагмент кода, который центрирует масштабированный элемент в Zoomooz, регистрирует значения, основанные на ширине / высоте экрана, тогда как скрипт панорамирования испортил его, потому что тело выходит за пределы размеров экрана.

Моя разметка -

<div class="content">
    <div class="img-wrapper"> <!-- div panning -->
        <div class="img" style="background:url(img.jpg) no-repeat;">
            <a href="#1" class="zoomTarget" data-targetsize="1" data-duration="600">1</a>
            <a href="#1" class="zoomTarget" data-targetsize="1" data-duration="600">2</a>
            <a href="#1" class="zoomTarget" data-targetsize="1" data-duration="600">3</a>
            <a href="#1" class="zoomTarget" data-targetsize="1" data-duration="600">4</a>   
    </div>
    </div>
</div>

И сценарий панорамирования -

(function($){

        var state=1;

        $.fn.imagePanning=function(){
            var init="center",
                speed=800, //animation/tween speed
                //custom js tween
                _tweenTo=function(el,prop,to,duration,easing,overwrite){
                    if(!el._mTween){el._mTween={top:{},left:{}};}
                    var startTime=_getTime(),_delay,progress=0,from=el.offsetTop,elStyle=el.style,_request,tobj=el._mTween[prop];
                    if(prop==="left"){from=el.offsetLeft;}
                    var diff=to-from;
                    if(overwrite!=="none"){_cancelTween();}
                    _startTween();
                    function _step(){
                        progress=_getTime()-startTime;
                        _tween();
                        if(progress>=tobj.time){
                            tobj.time=(progress>tobj.time) ? progress+_delay-(progress-tobj.time) : progress+_delay-1;
                            if(tobj.time<progress+1){tobj.time=progress+1;}
                        }
                        if(tobj.time<duration){tobj.id=_request(_step);}
                    }
                    function _tween(){
                        if(duration>0){
                            tobj.currVal=_ease(tobj.time,from,diff,duration,easing);
                            elStyle[prop]=Math.round(tobj.currVal)+"px";
                        }else{
                            elStyle[prop]=to+"px";
                        }
                    }
                    function _startTween(){
                        _delay=1000/60;
                        tobj.time=progress+_delay;
                        _request=(!window.requestAnimationFrame) ? function(f){_tween(); return setTimeout(f,0.01);} : window.requestAnimationFrame;
                        tobj.id=_request(_step);
                    }
                    function _cancelTween(){
                        if(tobj.id==null){return;}
                        if(!window.requestAnimationFrame){clearTimeout(tobj.id);
                        }else{window.cancelAnimationFrame(tobj.id);}
                        tobj.id=null;
                    }
                    function _ease(t,b,c,d,type){
                        var ts=(t/=d)*t,tc=ts*t;
                        return b+c*(0.499999999999997*tc*ts + -2.5*ts*ts + 5.5*tc + -6.5*ts + 4*t);
                    }
                    function _getTime(){
                        if(window.performance && window.performance.now){
                            return window.performance.now();
                        }else{
                            if(window.performance && window.performance.webkitNow){
                                return window.performance.webkitNow();
                            }else{
                                if(Date.now){return Date.now();}else{return new Date().getTime();}
                            }
                        }
                    }
                };
            return this.each(function(){
                var $this=$(this),timer,dest;
                if($this.data("imagePanning")) return;
                $this.data("imagePanning",1)
                    //create markup
                    .wrap("<div class='img-pan-container' />")
                    .after("<div class='resize' style='position:absolute; width:auto; height:auto; top:0; right:0; bottom:0; left:0; margin:0; padding:0; overflow:hidden; visibility:hidden; z-index:-1'><iframe style='width:100%; height:0; border:0; visibility:visible; margin:0' /><iframe style='width:0; height:100%; border:0; visibility:visible; margin:0' /></div>"); //div panning
                    //image loaded fn
                    if($this.find("img").length){ //div panning
                        $this.find("img").one("load",function(){ 
                            setTimeout(function(){ $this.find("img").addClass("loaded").trigger("mousemove",1); },1); 
                        }).each(function(){ //run load fn even if cached
                            if(this.complete) $(this).load();
                        })
                    }else{
                        setTimeout(function(){ $this.trigger("mousemove",1); },1); 
                    }
                    //panning fn

                    $(".content .img-wrapper .img a").click(function() {

                        $(".content .img-wrapper .img a").css({"margin-right":"auto !important", "margin-left":"auto !important"});
                        state = 0;
                    });

                    $(".content .img-wrapper").click(function() {
                        state = 1;

                    });



                $this.parents(".img-pan-container").on("mousemove touchmove MSPointerMove pointermove",function(e,p){ //div panning
                    if(!state){return;}
                    var cont=$(this);
                    e.preventDefault();
                    var contH=cont.height(),contW=cont.width(),
                        isTouch=e.type.indexOf("touch")!==-1,isPointer=e.type.indexOf("pointer")!==-1,
                        evt=isPointer ? e.originalEvent : isTouch ? e.originalEvent.touches[0] || e.originalEvent.changedTouches[0] : e,
                        coords=[
                            !p ? evt.pageY-cont.offset().top : init==="center" ? contH/2 : 0,
                            !p ? evt.pageX-cont.offset().left : init==="center" ? contW/2 : 0
                        ];
                    dest=[Math.round(($this.outerHeight(true)-contH)*(coords[0]/contH)),Math.round(($this.outerWidth(true)-contW)*(coords[1]/contW))];
                })
                //resize fn
                .find(".resize iframe").each(function(){
                    $(this.contentWindow || this).on("resize",function(){
                        $this.trigger("mousemove",1);
                    });
                });
                //panning animation 60FPS
                if(timer) clearInterval(timer);
                timer=setInterval(function(){
                     if(!state){return;}
                    _tweenTo($this[0],"top",-dest[0],speed);
                    _tweenTo($this[0],"left",-dest[1],speed);
                },16.6);
            });
        }





        $(document).ready(function(){

            $(".content .img-wrapper").imagePanning(); //div panning

        });



    })(jQuery);