带有外部 link 的 Fancybox 内联图像

Question

我正在使用 Fancybox 3、Cookie 并且在页面加载后显示隐藏内容。

隐藏内容有图片和外部link。

我正在与外部设备作斗争 link。

这是我的示例代码：

HTML:

<div class="popup">
  <a href="https://google.com" target="_blank" >
    <img src="/uploads/my-image.jpg" />
  </a>
</div>

CSS:

.popup {
  display:none;
}

jQuery:

<script src="/js/cookie/js.cookie.js"></script>
<script>
  $(document).ready(function() {
    var check_cookie = Cookies.get('popup');
    var date = new Date();
    var minutes = 0.1;
    date.setTime(date.getTime() + (minutes * 60 * 1000));

    if(check_cookie == null) {
      Cookies.set('popup', 'value', { expires: date });

      $('.popup').fancybox({
        transitionEffect : "zoom-in-out",
      }).trigger('click');
    }
  });
</script>

页面加载后，Fancybox 正在初始化隐藏内容并显示图像。光标出现但图像不可点击，因此 URL 无效。

可能是什么问题？

Answer 1

首先，你为什么要写这样的代码？ -

$('.popup').fancybox({
      transitionEffect : "zoom-in-out",
}).trigger('click');

完全错了！这里发生了什么 - 你将点击事件（启动 fancybox）附加到你的元素，然后你立即触发它。

如果你想立即启动 fancybox，那么按照文档并像这样使用它：

$.fancybox.open({
  src  : '.popup',
  type : 'inline',
  transitionEffect : 'zoom-in-out'
});

它应该可以正常工作。

带有外部 link 的 Fancybox 内联图像

Fancybox inline image with external link

jquery

cookies

fancybox