Question

现在我正在使用Fancybox 2来显示图片库，这是一个非常有用的图库工具。现在我让它工作在页面上的较小图像被点击以在图库视图中显示更大，更高分辨率的图像版本，但在此之后我想要加载更高分辨率的图像之后。是否有一种快速简便的方法可以做到这一点，或者我必须用自己的东西来加载＆＃34; retina＆＃34;高，但不是太高的版本后，这些图像的版本已经显示在查看器中了吗？

Answer 1

我要做的是设置href属性中的高分辨率图像和（HTML5）data-*属性中的最高分辨率图像，如：

<a href="image01_hd.jpg" data-hd="image01_retina.jpg" class="fancybox">
    <img src="image01_thumb.jpg" alt="" />
</a>

然后，使用beforeShow回调，我们可以使用带有 class fancybox的锚包装fancybox图像，并指向我们可以从中获取的最高分辨率图像data属性如：

jQuery(document).ready(function ($) {
    $(".fancybox").fancybox({
        beforeShow: function () {
            var hd = $(this.element).data("hd");
            if (hd) {
                $(".fancybox-image").wrap($("<a />", {
                    "href": hd,
                    "class": "fancybox"
                }))
            }
        }
    });
});

注意我们验证该元素是否具有data属性，以避免包装最高分辨率的图像。

参见 JSFIDDLE

最后一点：您可能更喜欢将链接设置为图片title中的最高分辨率图片，而不是整理整个内容，但至少您会明白从设置和获取来自fancybox

的引用

Fancybox 2稍后加载更高分辨率的图像

1 个答案: