jquery - 将 fancybox 与 elevatezoom 结合起来。变焦不起作用

Question

我正在尝试设置多个带有缩略图和提升缩放功能的 fancybox 画廊。到目前为止，我得到了所有前者，但无法显示变焦。搜索后我发现了这篇文章https://stackoverflow.com/a/23883542/6774425我遵循了但似乎无法获得缩放效果。

这是我的代码。

html 图像是这样包装的

<a class="fancybox fancybox-image fancybox-thumbs" rel="gallery1" href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/drizzle.jpg" /><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/drizzle.jpg" alt="" /></a>

我使用了相同的 JavaScript，只是更改了缩放类型

$(".fancybox").fancybox({
       afterShow: function() {
           $('.fancybox-image').elevateZoom({
             zoomType: "inner",
cursor: "crosshair",
zoomWindowFadeIn: 500,
zoomWindowFadeOut: 750
           });
       }
      });

但我似乎无法让它缩放。这是 codepen

您可以点击左上角的第一张图片

我认为它仍然应该根据这些图像尺寸进行缩放。但我也尝试了一些更大的图像，但似乎没有什么区别，至少在我上次尝试时是这样

===所以在 Dekel 的帮助下我得到了这个 http://codepen.io/anon/pen/amoAOO

 <div class="grid-item car">
    <a class="fancybox fancybox-image fancybox-thumbs" rel="gallery1" href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/drizzle.jpg" /><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/drizzle.jpg" alt="" /></a>
  </div>

<div class="hidden">
    <a class="fancybox fancybox-image fancybox-thumbs" rel="gallery1"  href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/one-world-trade.jpg" /><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/one-world-trade.jpg" alt="" /></a>
  </div>

但是如果第二个图像小于第一个图像并且您将鼠标悬停在左上角，则会出现错误。上一张图片将出现/image/HSjyk.jpg

http://codepen.io/soursocks/pen/GjKZag/?editors=1010

Answer 1

1. 您应该将 elevateZoom 代码放在 $('.fancybox-thumbs') 部分的 afterShow 内。
2. 您需要使用 elevateZoom 来运行 img.fancybox-image(而不仅仅是 .fancybox-image)。
3. 不要忘记，在 fancybox 关闭后，您还需要删除 elevateZoom 元素。

这是代码:

$('.fancybox-thumbs').fancybox({
    prevEffect : 'none',
    nextEffect : 'none',

    closeBtn  : false,
    arrows    : false,
    nextClick : true,

    autoCenter: true,

    helpers : {
        thumbs : {
            width  : 75,
            height : 75
        }
    },
    afterShow: function() {
        $('.zoomContainer').remove();
        $('img.fancybox-image').elevateZoom({ 
            zoomType: "inner",
            cursor: "crosshair",
            zoomWindowFadeIn: 500,
            zoomWindowFadeOut: 750
        });
    },
    afterClose: function() {
        $('.zoomContainer').remove();
    }
});

这是一个新的代码笔: http://codepen.io/anon/pen/amoAOO

更新

要解决不同图像尺寸的问题，您应该添加:

$('.zoomContainer').remove();

在 afterShow: function() { 回调内部。