Question

图片是通过$.ajax

绘制的

然后在$.ajax

中创建Photoswipe实例

当用户点击浏览器的后退按钮但无法分离时，尝试分离Photoswipe实例。

有没有人知道任何可能的解决方案来克服这个问题？

Answer 1

我不确定这对你有没有帮助，但是......

我将PhotoSwipe附加到包含类gallery-page的页面，然后将实际的PhotoSwipe实例附加到包含gallery图像的类<a href="../path/image.jpg" rel="external">...</a>的任何容器。

我还给每个页面一个id。所以index.html有id="gallery1"。

然后，在我实际调用将PhotoSwipe附加到script.js类的.gallery文件中，我使用if语句（每页一个），如下所示：

// ..... bunch of JS, including PhotoSwipe core

// Create "exists" function for PhotoSwipe code
jQuery.fn.exists = function(){return this.length>0;}

// Create PhotoSwipe instance for a page that has id="gallery1"
if ($('#gallery1').exists()) {
        // Do something
        var myPhotoSwipe = $("#gallery1 .gallery a").photoSwipe({ 
            allowUserZoom: false,
            backButtonHideEnabled: true,
            enableMouseWheel: false, 
            enableKeyboard: false,
            cacheMode: Code.PhotoSwipe.Cache.Mode.aggressive,
            captionAndToolbarAutoHideDelay: 0,
            captionAndToolbarShowEmptyCaptions: false,
            jQueryMobile: true
        });
} // .... continue on for other page IDs

我为每个页面执行此操作，根据每个特定页面的需要自定义PhotoSwipe设置。由于我创建了exists函数，如果在ID与上一个ID不同的页面上，将删除PhotoSwipe实例，如果存在不同的id="galleryN"，则设置/图像为将被附上。

我希望这有帮助......让我知道。

Answer 2

终于找到了解决方案。请参考下面的

$.ajax({
        url: URL_TO_GET_JSON,
        success: function(json, status) {
            var p = [];
            $.each(json, function(a,b){
                //DRAW IMAGES HERE.
            });
            $('.gallery').html(photo.join(''));


        // CREATE INSTANCES HERE        
            var myPhotoSwipe = $(".gallery a").photoSwipe({ 
                enableMouseWheel: false,
            })

          /********** UNSET INSTANCES HERE *****************/

            $(document).bind('pagebeforechange', function(e) {
                if ($('.ps-carousel').length) {
                    $('body').removeClass('ps-active');
                    var photoSwipe = window.Code.PhotoSwipe;
                    var photoSwipeInstance = photoSwipe.getInstance($(myPhotoSwipe).attr('id'));
                    if (typeof photoSwipeInstance != "undefined" && photoSwipeInstance != null) {
                        photoSwipe.unsetActivateInstance(photoSwipeInstance);
                        photoSwipe.detatch(photoSwipeInstance);
                    }
                }
            });
        }
    });

分离在ajax调用问题期间创建的Photoswipe实例

2 个答案: