在 jQuery FancyBox 3 中使用 img 的 src 作为内容的来源

Question

我正在使用 FancyBox 3 jQuery 插件，总的来说它很棒。与我的网站完美配合，但通常情况下，在网页上包装图像的锚链接有一个 href，它指向的 URL 不是图像，而是指向另一个站点或网页的链接，所以 FancyBox 3 打开它而不是锚点内的图像。

我的 HTML 看起来像这样

<a target="_blank" href="http://www.example.com" data-test="//3.bp.blogspot.com/-j6n4gYgWNvo/Vak3aiAi-zI/AAAAAAAAFtI/nIYEfDY74kEd97Gdkc6elifEOSz1yhBTQCPcB/s250/photo-1423683249427-8ca22bd873e0%2B%2528Medium%2529.jpg">
    <img src="//3.bp.blogspot.com/-j6n4gYgWNvo/Vak3aiAi-zI/AAAAAAAAFtI/nIYEfDY74kEd97Gdkc6elifEOSz1yhBTQCPcB/s250/photo-1423683249427-8ca22bd873e0%2B%2528Medium%2529.jpg">
  </a>

我添加了一个数据属性data-test，看看我是否可以让 FancyBox 获取其中的 URL 作为源 URL（如果该锚点存在 data-test）

我的JS代码是

$(document).ready(function(){
  $('body img').parent("a").fancybox({
  opts: {
            prevEffect  : 'none',
            nextEffect  : 'none'
    }
  });
});

我没有做任何特别的事情。我尝试的是使用这样的beforeLoad 回调设置源

$(document).ready(function(){
  $('body img').parent("a").fancybox({
  href: $(this).find("img").attr('data-test'),
  opts: {
            prevEffect  : 'none',
            nextEffect  : 'none'
    }
  });
});

但是$(this).find("img").attr('data-test') 似乎不起作用。

任何想法我在这里做错了什么，或者是否有其他更标准的方法？

Answer 1

您可以使用data-src 属性来设置自定义来源。

但脚本的重点是您将图像的小版本（缩略图）放在指向真实图像的锚点内。