时间戳

首页 > 解决方案 > 带有外部链接的 Fancybox 内嵌图像

jquery - 带有外部链接的 Fancybox 内嵌图像

问题描述

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

隐藏的内容有图片和外部链接。

我正在为外部链接而苦苦挣扎。

这是我的示例代码：

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 不起作用。

可能是什么问题？

标签： jquerycookiesfancybox

解决方案

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

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

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

如果您想立即启动 fancybox，请按照文档操作并像这样使用它：

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

它应该可以正常工作。

推荐阅读