javascript - 使用 fancybox 显示原始图像

Question

我想使用 fancybox 在弹出窗口中显示原始图像，但它似乎不起作用。相反，它正在调整图像和容器的宽度和高度。

这就是我正在做的事情:

$("a.fancybox").fancybox({
  padding : 0,
  height : $(this).attr('data-height'),
  width : $(this).attr('data-height'),
  autoDimensions: false
});  

我的链接:

<a href="/system/creatives/images/000/000/008/original/new_creative_form.png?1402035793" data-width="1366" data-height="768" class="fancybox">
<img src="/system/creatives/images/000/000/008/thumb/new_creative_form.png?1402035793" class="img-responsive" alt="New creative form">
</a>

知道我应该做什么吗？

Answer 1

要查看图像的原始大小，您只需将 fitToView 设置为 false，如下所示:

$(".fancybox").fancybox({
    fitToView: false
});

参见JSFIDDLE

另一方面，如果您想操作通过 data 属性传递的特定维度，请使用 beforeShow 回调，如下所示:

$(".fancybox").fancybox({
    fitToView: false,
    beforeShow: function () {
        this.width = this.element.data("width");
        this.height = this.element.data("height");
    }
});

参见JSFIDDLE

注意我们仍然需要fitToView: false。

重要:

这是针对 fancyBox v2.1.5 的，请确保下载 latest master待更新。