Adding images dynamically to photoswipe

Question

Is there a way to add images dynamically to a photoswipe gallery after it is created.

The situation is this.

I'm fetching image urls from the sever and showing them in a gallery. As the items are downloaded the anchor and img elements are added to the page. I would like to be able to at that same time append each to the photoswipe gallery.

currently in the element callback (after the image has been loaded and elements appended) I have

 $elements.photoSwipe({ enableMouseWheel: false , enableKeyboard: false });

This works except it creates each element in it's own gallery. Is there a way to get a handle to an existing gallery and just append to it?

Justin Ohms · Accepted Answer · 2012-09-10T17:17:17.120

2

if(this.photoSwipe == undefined){
   this.photoSwipe = $elements.photoSwipe(photoSwipeOptions);
}else{
    this.photoSwipe.append($elements);  //use jQuery append
}

edited Sep 10 '12 at 17:17

answered Jun 22 '12 at 20:35

Justin Ohms

3,334
31
45

Photoswipe has no append() method. – Adam Bailin Aug 17 '12 at 00:38
append is a jQuery method not a Photoswipe method. Note that this.photoSwipe is a jQuery object. http://api.jquery.com/append/ – Justin Ohms Aug 31 '12 at 20:06
Still I have to agree with Adam, if I try your code I get a TypeError: this.photoSwipe.append is not a function, could you please elaborate how you got this to work? – Tobias Nov 02 '12 at 00:04
PhotoSwipe documentation says nothing about append method. You may add items dynamically by altering pswp.gallery items. See this answer for more details https://stackoverflow.com/a/46525547/2190075. – fandasson Oct 02 '17 at 12:39

score 0 · Answer 2 · answered Dec 08 '17 at 06:38

0

I have committed a pull request for PhotoSwipe

Pull Request

If you do have such need to dynamic prepend/append/remove items without change the state of the current item, you can use this version.

answered Dec 08 '17 at 06:38

icese7en

142
1
10

Adding images dynamically to photoswipe

2 Answers2