Replace images in PhotoSwipe gallery

Question

I have a PhotoSwipe gallery on my page which is created programatically like this:

var instance = window.Code.PhotoSwipe.attach(image, options)

Now I want to update the images in the gallery, or put a new gallery in the same spot.

Creating a new gallery for the same DOM Element omits the following error:

Code.PhotoSwipe.activateInstance:
Unable to active instance as another instance is already active for this target

Detaching the instance from the Element using Code.PhotoSwipe.detatch(instance) didn't help either.

Any ideas how to fill the gallery with new images, or remove it, so I can create a new one in the same place?

Answer 1

The only way I found to avoid that error was calling unsetActivateInstance before detatch:

window.Code.PhotoSwipe.unsetActivateInstance(instance);

window.Code.PhotoSwipe.detatch(instance); 

Answer 2

you can also hide the current active instance, instead of detatching it by calling

window.Code.PhotoSwipe.activeInstances[0].instance.hide(0)

Answer 3

I tried all the suggestions above but none of them worked well.

So my solution was to simply never create the gallery for the same ID twice:

    instance = window.Code.PhotoSwipe.getInstance(myuniqueid);
    if (window.Code.Util.isNothing(instance)) {
        // Only initialize if there is no gallery with this ID already.
        myPhotoSwipe = window.Code.PhotoSwipe.attach(window.document.querySelectorAll(galleryimagesselector), {captionAndToolbarAutoHideDelay: 0, jQueryMobile: true, preventSlideshow: true, enableMouseWheel: false, enableKeyboard: false}, myuniqueid);
    }