Prolems with photoswipe: [Uncaught Code.PhotoSwipe.createInstance: Instance with id "gallery already exists."]

[ciccio]

i have a probem with my app:
i have an app with several pages and a navbar menu to navigate among pages. For one of these pages ("gallery") i followed the "Adding Photoswipe Image Gallery To Your App" tutorial. when i tested my app on the browser the first time i navigate to the page gallery everything goes right but if i move to another page and then back to the page gallery i just get the loading spinner running.
from the console i get the error message Uncaught Code.PhotoSwipe.createInstance: Instance with id "gallery already exists."

the JS i used on the page gallery load event is:
codevar photoSwipeInstance = Appery("gallery").find("ul.gallery a").photoSwipe({}, "gallery");/code
while the html i used is
codeul class="gallery">

Code: Select all

 <li><a href="http:&#47;&#47;www&#46;photoswipe&#46;com&#47;latest&#47;examples&#47;images&#47;full&#47;001&#46;jpg"><img alt="Image 001" src="http:&#47;&#47;www&#46;photoswipe&#46;com&#47;latest&#47;examples&#47;images&#47;thumb&#47;001&#46;jpg" &#47;><&#47;a><&#47;li> 
 <li><a href="http:&#47;&#47;www&#46;photoswipe&#46;com&#47;latest&#47;examples&#47;images&#47;full&#47;002&#46;jpg"><img alt="Image 002" src="http:&#47;&#47;www&#46;photoswipe&#46;com&#47;latest&#47;examples&#47;images&#47;thumb&#47;002&#46;jpg" &#47;><&#47;a><&#47;li> 

 <li><a href="http:&#47;&#47;www&#46;photoswipe&#46;com&#47;latest&#47;examples&#47;images&#47;full&#47;003&#46;jpg"><img alt="Image 003" src="http:&#47;&#47;www&#46;photoswipe&#46;com&#47;latest&#47;examples&#47;images&#47;thumb&#47;003&#46;jpg" &#47;><&#47;a><&#47;li> 

 <li><a href="http:&#47;&#47;www&#46;photoswipe&#46;com&#47;latest&#47;examples&#47;images&#47;full&#47;004&#46;jpg"><img alt="Image 004" src="http:&#47;&#47;www&#46;photoswipe&#46;com&#47;latest&#47;examples&#47;images&#47;thumb&#47;004&#46;jpg" &#47;><&#47;a><&#47;li> 

<&#47;ul>/code

[Maryna Brodina]

Hello! The problem is that photoSwipe gallery is created a few times. Here is the workaround https://getsatisfaction.com/apperyio/...
Another way is to make photoSwipeInstance global variable and check if gallery has been created and create it only in case if it's not created.

[ciccio]

thanks, i created a global variale by adding a JS asset code var photoSwipeInstance/code
but i don't know how to check if gallery has been created and create it only in case if it's not created.
should i change my previous code runned on gallery page load event
codevar photoSwipeInstance = Appery("gallery")&#46;find("ul&#46;gallery a")&#46;photoSwipe({}, "gallery"); /code
with
codeif (photoSwipeInstance ==""){
photoSwipeInstance = Appery("gallery")&#46;find("ul&#46;gallery a")&#46;photoSwipe({}, "gallery")
}/code

[Maryna Brodina]

Did you try with "Render all pages in one HTML file (jQuery Mobile multi-page template)" checked?

[ciccio]

i tested this solution ut it's not working at all

[Maryna Brodina]

Replace code prevar photoSwipeInstance = Appery("gallery")&#46;find("ul&#46;gallery a")&#46;photoSwipe({}, "gallery"); /pre with the following one preif (!photoSwipeInstance){
photoSwipeInstance = Appery("gallery")&#46;find("ul&#46;gallery a")&#46;photoSwipe({}, "gallery")
}/pre

[ciccio]

i didn't because i would like to leave separeted pages. i was trying to solve the problem with the second solution you proposed ("another way is to make photoSwipeInstance global variable and check if gallery has been created and create it only in case if it's not created.") but i'm not able o check if gallery has been created and create it only in case if it's not created.

[Maryna Brodina]

Have you seen my reply above? Have you tried change code?

[ciccio]

I'm sorry but when i was writing my last post i had not seen your answer yet.
I tested your code and the first time i navigate to the page gallery everything goes right but if i move to another page and then back to the page gallery i can get the page but if i click on an image i get just the full image opened but photoswipe doesn't work anymore. on the console i get: [Uncaught SecurityError: Blocked a frame with origin "http://appery.io" from accessing a frame with origin "http://www.photoswipe.com". Protocols, domains, and ports must match.]

Anyway i Rendered all pages in one HTML file and in this way everything works fine.

just another answer:
i would like to have multiple galleries and to show on my page gallery just the first photo's thumbnail of each galleries, so when i user cliks to the thumbnail the specific gallery is opened .
could you suggest me how to obtain this result?

[Maryna Brodina]

Here is how to work with global variable without rendering all pages in one file
1) Create JS with code:
prevar photoSwipeInstance;/pre
2) On screen with gallery on Page show event add code:
preif (!photoSwipeInstance) {
photoSwipeInstance = Appery("startScreen")&#46;find("ul&#46;gallery a")&#46;photoSwipe({}, "screenName");
}/pre
3) On screen with gallery on Page hide event add code:
preCode&#46;PhotoSwipe&#46;detatch(photoSwipeInstance);
photoSwipeInstance = null;/pre
regarding "just the first photo's thumbnail of each galleries" it's not that easy to do. It's easier to show page with first images and on click on Image navigate to page with corresponding gallery.