Detach Photoswipe instance created during ajax call issue

Question

Images are drawn via $.ajax

Photoswipe instance is then created inside $.ajax

Tried detaching the Photoswipe instances when user click on browser's back button but was not able to detach it.

Does anyone know any possible solutions to overcome this?

Answer 1

I'm not sure if this will help you or not, but...

I attach PhotoSwipe to a page with class gallery-page, and then attach the actual PhotoSwipe instance to any container with the class gallery that contains the image with the <a href="../path/image.jpg" rel="external">...</a>.

I also give each page an id. So index.html has id="gallery1".

Then, in my script.js file where I actually call to attach PhotoSwipe to the .gallery class, I use if statements (one for each page) as shown here:

// ..... 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

I do this for each page, customizing the PhotoSwipe settings depending on what I want for each particular page. Since I created the exists function, if on a page with an ID different from that of the last, the PhotoSwipe instance will be removed, and if a different id="galleryN" is present, the settings/images for that will be attached instead.

I hope this helps... let me know.

Answer 2

Finally found the solution. Please refer below

$.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);
                    }
                }
            });
        }
    });