将 fancybox 与 elevatezoom 相结合。变焦不起作用

Question

我正在尝试使用缩略图和提升缩放设置多个 fancybox 画廊。到目前为止，我得到了所有前者，但无法显示缩放。搜索后我发现了这个 post 我跟着但似乎无法获得缩放效果。

这是我的代码。

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>

但是如果第二张图片小于第一张并且您将鼠标悬停在左上角，则会出现错误。上一张图片会出现 http://imgur.com/a/o6OGP

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

Answer 1

您应该将 elevateZoom 代码放在 $('.fancybox-thumbs') 部分的 afterShow 中。
您需要 elevateZoom 到运行而不是 img.fancybox-image（而不仅仅是 .fancybox-image）。
别忘了在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() { 回调中。

将 fancybox 与 elevatezoom 相结合。变焦不起作用

combining fancybox with elevatezoom. the zoom is not working

html

css

jquery

fancybox

fancybox-2

更新