javascript - 带缩略图的 jQuery fancybox

Question

我正在使用 Magento 1.9.2.4 附带的 fancybox (2.15) 和 elevatezoom (3.0.8) 来缩放主图像并使用图库中的其他图像创建一个 fancybox 图库。单击主图像时会打开 Fancybox。

我需要的是在 fancybox 打开时使用缩略图助手来导航缩略图，但问题是我无法以最简单和建议的方式初始化它，例如

$(选择器).fancybox({config});

我使用的方式对 fancybox 的外观没有影响。

这是我正在使用的代码

js

$(document).ready(function() {
            if($('.thumb-link').size() == 0){
                var ez = $('.gallery-image.visible').first().data('zoom-image');
            }else{
                var ez =  $(".thumb-link");
            }

            $.fancybox({
                'width':400,
                'height': 500,

                helpers : {
                    title   : {
                        type: 'outside'
                    },
                     thumbs : {
                       width    : 50,
                       height   : 50
                    }
                }
            });

            $(".gallery-image.visible").bind("click", function(e) {  
                $.fancybox(ez);
                return false;
            });

        });

其中 .gallery-image.visible 是主图像，.thumb-link 是我的 Html 中的缩略图。

以下类似的其他问题 using fancybox set height and width

但实际上我在 fancybox 上没有看到明显的效果。

在有效调用之前是否有不同的方法来重新初始化 fancybox 配置？

编辑:实际上我是这样改变我的代码的:

var fancyConfig =  {'width' : 200, 'height': 300,...};

            $(".gallery-image.visible").bind("click", function(e) {  
                $.fancybox(ez, fancyConfig);
                return false;
            });

我可以看到一些效果，但没有拇指的痕迹......我包含并可以看到 fancybox 缩略图助手的正确库。

Answer 1

我认为这段代码没有做任何事情，我在这里没有看到任何选择器或对象集合:

$.fancybox({
  'width':400,
  'height': 500,

  helpers : {
    title   : {
      type: 'outside'
    },
    thumbs : {
      width    : 50,
      height   : 50
    }
  }
});

我认为你应该将 $.fancybox(ez); 替换为 $.fancybox.open(ez, {config});