如何在 fancybox 3 的 JSON 对象中指定 srcset？

Question

对于fancybox 3，我可以手动创建一组具有模式的对象

{
    src  : '' // Source of the content
    type : '' // Content type: image|inline|ajax|iframe|html (optional)
    opts : {} // Object containing item options (optional)
}

在这种情况下如何指定 srcset 以根据视口宽度显示不同的图像？

Answer 1

您可以使用image.srcset选项来设置srcset属性，例如：

$.fancybox.open({
    src : 'https://placeholdit.imgix.net/~text?txtsize=33&txt=medium_1200%C3%97800&w=1200&h=720',
    type: 'image',
    image : {
      srcset : 'https://placeholdit.imgix.net/~text?txtsize=33&txt=large_1600%C3%97800&w=1600&h=960 1600w, https://placeholdit.imgix.net/~text?txtsize=33&txt=medium_1200%C3%97800&w=1200&h=720 1200w, https://placeholdit.imgix.net/~text?txtsize=33&txt=small_640%C3%97427&w=640&h=384 640w'
    }
  });

演示 - https://codepen.io/anon/pen/aRWpQp?editors=1010

注意：浏览器之间关于这应该如何工作存在不一致，例如，使用 Chrome 和 Firefox 尝试该演示，并尝试调整大小 window。 Firefox 可以像您预期的那样工作，但 Chrome 可能不会。因此，v4 计划以稍微不同的方式实现响应。

Answer 2

到目前为止，我找到了一个临时解决方案。在 JSON 我添加了 srcset:

var gallery = {
  "src" : "https://source.unsplash.com/random/400x300",
  "srcset" : "https://source.unsplash.com/random/400x300, https://source.unsplash.com/random/800x600 2x"
}

然后使用afterLoad:

$.fancybox.open(gallery, {
    afterLoad: function (instance, slide) {
        if (slide.srcset)
            slide.$slide.find(".fancybox-image").attr("srcset", slide.srcset);
        }
    });

似乎一切正常。

演示 - https://codepen.io/anon/pen/oaWBMe?editors=1010

如有错误请指正

如何在 fancybox 3 的 JSON 对象中指定 srcset？

How to specify srcset in a JSON object for fancybox 3?

fancybox-3