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。

使用fancybox显示原始图像

1 个答案: