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

Question

我正在使用 FancyBox 3 jQuery 插件，总的来说它很棒。与我的网站完美配合，但通常情况下，在网页上包裹图像的锚点 links 有一个 href 指向一个 URL，它不是图像而是a link 到另一个站点或网页，因此 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 属性来设置自定义来源。

但是脚本的要点是你将小版本的图像（缩略图）放在指向真实图像的锚点中。

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

Using img's src as the source of the content in jQuery FancyBox 3

jquery

jquery-plugins

fancybox-3