Question

我正在尝试使用ElevateZoom-Plus的图库功能。顶部有主图像，下面有几个缩略图。单击缩略图时，它应成为主图像。当主图像悬停在上方时，缩放窗口应显示在左侧。

在初始加载时，单击任何东西之前，如果将鼠标悬停在主图像上，则加载的缩放图像与单击缩略图之一并查看其缩放后的加载方式不同。为什么？

我已经从此处复制并粘贴了源代码：
http://igorlino.github.io/elevatezoom-plus/examples.htm#gallery-lightbox
图片也可以从其服务器中拉出。我没有使用fancybox，所以我在该行中添加了注释。

警告：您在文档中看到的代码与在幕后实际使用的代码不同。

<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> 
<script type="text/javascript" src="https://cdn.rawgit.com/igorlino/elevatezoom-plus/1.1.17/src/jquery.ez-plus.js"></script>
</head>
<body>
    <img class="zoom-img" id="zoom_03" src="images/small/image1.jpg" data-zoom-image="images/large/image1.jpg" style="position: absolute; width: 414px; height: 274px;">

    <div id="gallery_01">

        <a href="#" data-image="images/small/image1.jpg" data-zoom-image="images/large/image1.jpg" class="active">
            <img src="images/thumb/image1.jpg"/>
        </a>

        <a href="#" data-image="images/small/image2.jpg" data-zoom-image="images/large/image2.jpg">
            <img src="images/thumb/image2.jpg"/>
        </a>

        <a href="#" data-image="images/small/image3.jpg" data-zoom-image="images/large/image3.jpg">
            <img src="images/thumb/image3.jpg"/>
        </a>

        <a href="#" data-image="images/small/image4.jpg" data-zoom-image="images/large/image4.jpg">
            <img src="images/thumb/image4.jpg"/>
        </a>

    </div>

    <script type="text/javascript">
        $(document).ready(function () {
            $("#zoom_03").ezPlus({
                gallery: 'gallery_01',
                cursor: 'crosshair',
                galleryActiveClass: "active",
                imageCrossfade: true,
                zoomType: 'window',
                zoomWindowWidth: 300,
                zoomWindowHeight: 300,
                zoomLevel: 3,
                scrollZoom: true,
                responsive: true
            });

            $("#zoom_03").bind("click", function (e) {
                var ez = $('#zoom_03').data('ezPlus');
                ez.closeAll(); //NEW: This function force hides the lens, tint and window
                //$.fancyboxPlus(ez.getGalleryList());
                return false;
            });

        });

    </script>
</body>
</html>

ElevateZoom-Plus：为什么缩放窗口发生变化？

0 个答案: