时间戳

首页 > 解决方案 > 是什么阻止了fancybox 在重新绘制页面后正确加载？

jquery - 是什么阻止了fancybox 在重新绘制页面后正确加载？

问题描述

请有人看看我的 jquery 脚本，他们为什么要打架？在我通过 swup 启用页面转换后，fancybox 画廊停止正常工作，单击图像使其全屏显示，而不是打开 fancybox 图像覆盖。但有时在按下后，fancybox 会加载。其他时候，后退按钮不起作用，我必须刷新页面。示例问题页面：https ://www.corebots.design/photologue/gallerylist/gallery/rohace-mountains/

试图像其他脚本一样用“swup:contentReplaced”包装fancybox函数，但它不起作用。

function init() {
    if (document.querySelector('#fancybox')) {
        (function( $ ) {
          $(function() {
                $("#fancybox").fancybox();
          });
        })(jQuery);
    }
}

// initialize swup for pages transitions
const swup = new Swup();


swup.on('contentReplaced', init);

// trying to reload fancybox as suggested by swup doc https://swup.js.org/getting-started/reloading-javascript
document.addEventListener('swup:contentReplaced', function () {

(function( $ ) {
          $(function() {
                $("#fancybox").fancybox();
          });
        })(jQuery);

});

标签： jqueryfancybox

解决方案

唯一可能干扰的是history功能，您可以通过设置禁用它：

$("#fancybox").fancybox({
  history: false
});

推荐阅读