0

我正在使用 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')似乎不起作用。

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

4

1 回答 1

0

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

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

于 2017-05-17T17:48:06.900 回答