更新

Question

我正在尝试使用缩略图设置多个fancybox画廊并提升缩放。到目前为止，我得到了所有前者，但无法让缩放显示出来。在搜索之后，我发现了这篇帖子https://stackoverflow.com/a/23883542/6774425我跟随但似乎无法获得缩放效果。

这是我的代码。

html图像像这样包装

  #DateFormat(w.start_date, "m")#

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

<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>

但我似乎无法让它变焦。这是一个codepen

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

我认为它应该仍然可以使用这些图像尺寸进行缩放。但我也尝试了一些较大的图像，它似乎没有什么区别，至少我最后一次试过它

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

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

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

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

Answer 1

您应该将elevateZoom代码放在afterShow部分的$('.fancybox-thumbs')内。
您需要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();
    }
});

这是一个新的codepen： http://codepen.io/anon/pen/amoAOO

更新

要解决您应添加的不同图片尺寸的问题：

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

在afterShow: function() {回调中。

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

1 个答案:

更新