fancybox-3 下载 link 以获取显示的图像的高分辨率版本

Question

如何在 fancybox-3 中设置下载 link，使其不会 link 显示图像，而是显示图像的高分辨率版本？

我该如何设置？这里有什么帮助吗？（我知道一定有 'afterload' 和 'download attribute' 的东西。）谢谢！

Answer 1

只需使用 afterShow 回调，然后根据您的需要调整下载 link，例如：

$('[data-fancybox="images"]').fancybox({
  buttons : [ 
    'download',
    'close'
  ],
  afterShow : function(instance, current) {
    var src =  current.src.replace('1500x1000', '5000x2000');

    console.info('current.src: ' + current.src + '; download src: ' + src);

    $("[data-fancybox-download]").attr('href', src);
  }
});

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

fancybox-3 下载 link 以获取显示的图像的高分辨率版本

fancybox-3 downloading link for hi res version of the image that is displayed

fancybox-3