javascript - 如何允许用户在显示照片滑动库时单击链接？

Question

我正在使用PhotoSwipe jQuery 插件。

当用户向下滚动时，我的网站使用固定菜单。

使用 z 索引，我无法使照片滑动库与我的菜单重叠。因此，我调整了 Photoswipe 的默认 Pane 的大小，以腾出菜单空间。这个外观我也比较喜欢。

现在，当我打开照片，但不是使用 PhotoSwipe 导航到其他页面时，PhotoSwipe 的某些回调似乎会将用户重定向回他原来的位置。

如果我使用 photoswip 的销毁回调并在其中添加警报，则会延迟重定向(返回到用户来自的页面)。

如何允许用户关闭照片滑动库而不被重定向？

编辑:这就是我初始化照片滑动库的方法。

function showSoftwareGallery(sections, index){
    var pswpElement = document.querySelectorAll('.pswp')[0];

    var items = new Array(sections.length);
    for(var i=0; i<sections.length; i++){
        items[i] = {
            src: sections[i].image,
            w: 1920,
            h: 1080,
        };
    }

// define options (if needed)
    var options = {
        // optionName: 'option value'
        // for example:
        index: index, // start at first slide
        escKey: true,
        arrowKeys: true,
        shareEl: false,
        closeEl:true,
        captionEl: true,
        fullscreenEl: true,
        zoomEl: true,
    };

// Initializes and opens PhotoSwipe
    var headerHeight = $('nav').first().height();
    var height = $(window).height() - headerHeight;
    $('.pswp').first().css('height', height + 'px');
    $('.pswp').first().css('top', headerHeight + 'px');
    var gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);


    gallery.listen('destroy', function() { alert('destroy')});


    gallery.init();
}

编辑2您可以在此处看到我的照片滑动显示的屏幕截图。它表明我的主菜单仍然可见，用户可以单击它。

Answer 1

src/js/history.js 文件包含以下代码:

        _listen('destroy', function() {
            if(!_hashReseted) {
                returnToOriginal();
            }
        });

您没有提供可重现的代码，因此这不是 100%，但应该会有所帮助。我将该代码更改为:

        _listen('destroy', function() {
            if(!_hashReseted && !myApp.shouldClosePhotoswipe) {
                returnToOriginal();
            }
        });

在您的应用中添加以下代码:

var myApp = {
    // mix in with your javascript code
    shouldClosePhotoswipe: false
}

当点击菜单去某个地方时，只需添加这一行:

myApp.shouldClosePhotoswipe = true;

然后您需要重建 dist/photoswipe.js 文件。
您也可以直接编辑 dist/photoswipe.js 文件。