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?

Hello, I want to do exactly this. I want it to refresh the gallery when the user swipes to the next image because an image gets added to the DOM on swipe. I am struggling to do it! Did you manage to do it in the end? Any suggestions? Thanks. — Adam Waite, May 12 '12 at 16:54
I am facing the very same problem. Want to update the gallery and switch out some images after it has been initialized. Did any of you ever figure this out? I can't detach and re-create the instance because that would be visible to the user. — Louis B., Oct 26 '12 at 22:11

score 8 · Accepted Answer · answered Mar 03 '12 at 11:17

8

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

window.Code.PhotoSwipe.unsetActivateInstance(instance);

window.Code.PhotoSwipe.detatch(instance);

answered Mar 03 '12 at 11:17

Juan Mellado

14,973
5
47
54

score 2 · Answer 2 · answered Apr 05 '12 at 21:40

2

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

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

answered Apr 05 '12 at 21:40

Manuel van Rijn

10,170
1
29
52

score 0 · Answer 3 · answered Feb 24 '15 at 17:27

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

Replace images in PhotoSwipe gallery

3 Answers3

Linked