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进行演示，然后尝试调整窗口大小。 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？

2 个答案: