在全屏模式下使用缩放平移进行幻灯片放映

Question

我试图在全屏模式下鼠标移动时使用缩放平移来构建幻灯片。我正在使用Fotorama插件。在正常模式下行为正常，但我在全屏模式下有很多错误。有人知道如何让鼠标平移低于图像分辨率吗？

Here is my codepen和我的代码：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="product">

    <div class="product-slideshow" id="product-slideshow">
        <img src="https://picsum.photos/600/400?image=1083">
        <img src="https://picsum.photos/600/400?image=1067">
        <img src="https://picsum.photos/600/400?image=1011">
        <img src="https://picsum.photos/600/400?image=994">
        <img src="https://picsum.photos/600/400?image=974">
    </div>

    <div class="product-content">
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quaerat, nostrum. Natus, dolorem temporibus? Quae quas itaque aut suscipit ratione ab minima, porro quia tempore aliquid blanditiis corporis. Facilis, sapiente aperiam?</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi quidem nostrum, dolor perspiciatis est explicabo eum? Odit, corporis? Officiis magnam assumenda est distinctio rerum ea tempore! In quasi neque non?</p>
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quaerat, nostrum. Natus, dolorem temporibus? Quae quas itaque aut suscipit ratione ab minima, porro quia tempore aliquid blanditiis corporis. Facilis, sapiente aperiam?</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi quidem nostrum, dolor perspiciatis est explicabo eum? Odit, corporis? Officiis magnam assumenda est distinctio rerum ea tempore! In quasi neque non?</p>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quaerat, nostrum. Natus, dolorem temporibus? Quae quas itaque aut suscipit ratione ab minima, porro quia tempore aliquid blanditiis corporis. Facilis, sapiente aperiam?</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi quidem nostrum, dolor perspiciatis est explicabo eum? Odit, corporis? Officiis magnam assumenda est distinctio rerum ea tempore! In quasi neque non?</p>
        <div class="product-navigation">
            <nav>
                <ul class="product-thumbs" id="product-thumbs">
                    <li><a href="#" data-item="0" class="active"><img src="https://picsum.photos/600/400?image=1083"></a></li>
                    <li><a href="#" data-item="1"><img src="https://picsum.photos/600/400?image=1067"></a></li>
                    <li><a href="#" data-item="2"><img src="https://picsum.photos/600/400?image=1011"></a></li>
                    <li><a href="#" data-item="3"><img src="https://picsum.photos/600/400?image=994"></a></li>
                    <li><a href="#" data-item="4"><img src="https://picsum.photos/600/400?image=974"></a></li>
                </ul>
                <a href="#" class="btn btn--fullscreen">
                    <i class="fal fa-external-link-square"></i>
                </a>
            </nav>
        </div>
    </div>

</div>

* { box-sizing: border-box; }

.product {

    &-slideshow,
    &-content {
        width: 50%;
        float: left;
    }

    &-slideshow {
        overflow: hidden;
    }

    &-content {
        padding: 40px;
        p { margin-bottom: 20px; }
    }

    &-thumbs {
        display: inline-block;
        overflow: hidden;
        box-shadow: 0 0 20px 0 rgba(0,0,0,0.3);
        li {
            float: left;
            width: 100px;

            a {
                display: block;
                border: 4px solid white;

                &.active {
                    border-color: red;
                }
            }
        }
        img {
            display: block;
            width: 100%;
        }
    }

    &.full {
        .product-navigation {
            position: fixed;
            bottom: 20px;
            left: 20px;
            z-index: 999;
        }

        .btn--fullscreen { display: none; }
    }

}

// Fotorama overrides
.fotorama {

    &__wrap {
        transform: translateX(26%);
    }

    &__stage {
        overflow: visible;
        &::before { display: none; }
    }

    &--fullscreen {
        z-index: 99 !important;

        &, .fotorama__wrap, .fotorama__stage {
            background-color: #fff;
        }

        .fotorama__stage__frame img {
            width: 100%;
            height: auto;
            left: 0;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
        }

        .fotorama__wrap {
            transform: none;
        }
    }
}

// Initialize the slideshow
var $slideshow = $('#product-slideshow').fotorama({
    width: "80%",
    swipe: true,
    nav: false,
    allowfullscreen: true,
    loop: true,
    arrows: false,
    click: false
});

// Get access to the API
var fotorama = $slideshow.data('fotorama');

// Fullscreen button
$('.btn--fullscreen').on('click', function(event){
    event.preventDefault();
    fotorama.requestFullScreen();
});

// Thumbs navigation
var $thumbs = $('li > a', '#product-thumbs');

$thumbs.on('click', function(){
    var $el = $(this);
    var currentItem = $el.data('item');
    fotorama.show(currentItem);
});

// On slide change
$slideshow.on('fotorama:show',
    function (e, fotorama, extra) {
        var index = fotorama.activeFrame.i;
        $thumbs.removeClass();
        $thumbs.eq(index - 1).addClass('active');
        imageSet();
    }
);

// On fullscreen enter
$slideshow.on('fotorama:fullscreenenter',
    function(){
        $('.product').addClass('full');
    }
);

// On fullscreen exit
$slideshow.on('fotorama:fullscreenexit',
    function(){
        $('.product').removeClass('full');
    }
);

// Zoom function
var mouse = { x:0, y:0 };
var zoomPos = { x:0, y:0 };

function getMouse(e){
    mouse.x = e.pageX;
    mouse.y = e.pageY;
}

document.addEventListener("mousemove", getMouse); 

var imageToMove;

// Move visual regarding mouse position
function followMouse(){
    var distY = mouse.y - imageToMove.position().top;
    zoomPos.y += distY/8 - 70;
    imageToMove.css({
        'top': zoomPos.y + "px",
        'width': '100%',
        'height': 'auto',
        'left': '0',
        'right': '0'
    });
}

setInterval(followMouse, 20);

$('body').on('mouseover', '.fotorama--fullscreen img', function(){
    imageToMove = $(this);
});

// Set default fullscreen images format
function imageSet(){
    $('.fotorama--fullscreen img').css({
        'top': "50%",
        'width': '100%',
        'height': 'auto',
        'left': '0',
        'right': '0',
        'transform': 'translateY(-50%)'
    });
}

// On window resize
$( window ).resize(function() {
    imageSet();
});