Question

我正在使用jQuery的PhotoSwipe插件。

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

使用z-index我无法使照片库与我的菜单重叠。所以我调整了photoswipe的默认窗格，以省去菜单的空间。这个外表我也更喜欢。

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

如果我使用photoswip的destroy回调并在其中发出警报，则会延迟重定向（返回到用户来自的页面）。

如何在不重定向的情况下允许用户关闭照片库？

修改这就是我初始化photoswipe画廊的方式。

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文件。

如何在显示照片库时允许用户点击链接？

1 个答案: