I am just dabbling with photoswipe, and so far I haven't done anything more advanced than simply implementing a copy of the get started demo with a few very small (and theoretically insignificant tweaks).
My picture gallery es up just fine, and I have a total of 4 items in it as I am just trying to test it. The first picture will zoom and pan and all of that just great. However, the moment I switch pictures, I get the javascript error in this post title.
I am using the following as my items:
var items =[{"src":"/Images/Portfolio/Pieces/PhoenixFury.jpg","thumbnail":"/Images/Portfolio/Thumbs/PhoenixFury.jpg","msrc":"/Images/Portfolio/Thumbs/PhoenixFury.jpg","w":765,"h":1201,"title":"Phoenix\u0027s Fury","caption":"Illustration used for the cover of Lifeweaver","key":"Phoenix"},{"src":"/Images/Portfolio/Pieces/EnoreTower.jpg","thumbnail":"/Images/Portfolio/Thumbs/EnoreTower.jpg","msrc":"/Images/Portfolio/Thumbs/EnoreTower.jpg","w":765,"h":1200,"title":"Enore\u0027s Tower","caption":"Illustration used for the cover of Guardian\u0027s Peril","key":"Enore"},{"src":"/Images/Portfolio/Pieces/KenpoLogo.jpg","thumbnail":"/Images/Portfolio/Thumbs/KenpoLogo.jpg","msrc":"/Images/Portfolio/Thumbs/KenpoLogo.jpg","w":800,"h":966,"title":"Kenpo Karate Logo","caption":"Commissioned karate team logo for a team in Mexico with central american themes on the traditional Kenpo notion of a dragon and a tiger.","key":"Kenpo"},{"src":"/Images/Portfolio/Pieces/Quetzalcoatl.jpg","thumbnail":"/Images/Portfolio/Thumbs/Quetzalcoatl.jpg","msrc":"/Images/Portfolio/Thumbs/Quetzalcoatl.jpg","w":1600,"h":967,"title":"Quetzalcoatl","caption":"Central American ancient deity Quetzalcoatl, the feathered serpent.","key":"Quetzalcoatl"}];
I have added a few custom attributes, but I haven't done anything yet with the photoswipe to try to utilize those, so I don't imagine that is the problem.
I am using the following as my options:
var options = {
history: false,
focus: false,
index: 0,//I can verify that 0,1,2,3 all load up correctly for an initial load
showAnimationDuration: 0,
hideAnimationDuration: 0
};
So then I just do the following:
var photoswipe = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options);
photoswipe.init();
I have the pswpElement, and simply coppied the markup for that from the photoswipe site, so it should also be in line. I would really like to know what I need to do to make it so that it works when I swap to a new image.
I also verified that if I remove the u207 (encoded ') from the titles, it doesn't fix the problem just to try to be thorough about things.
I am just dabbling with photoswipe, and so far I haven't done anything more advanced than simply implementing a copy of the get started demo with a few very small (and theoretically insignificant tweaks).
My picture gallery es up just fine, and I have a total of 4 items in it as I am just trying to test it. The first picture will zoom and pan and all of that just great. However, the moment I switch pictures, I get the javascript error in this post title.
I am using the following as my items:
var items =[{"src":"/Images/Portfolio/Pieces/PhoenixFury.jpg","thumbnail":"/Images/Portfolio/Thumbs/PhoenixFury.jpg","msrc":"/Images/Portfolio/Thumbs/PhoenixFury.jpg","w":765,"h":1201,"title":"Phoenix\u0027s Fury","caption":"Illustration used for the cover of Lifeweaver","key":"Phoenix"},{"src":"/Images/Portfolio/Pieces/EnoreTower.jpg","thumbnail":"/Images/Portfolio/Thumbs/EnoreTower.jpg","msrc":"/Images/Portfolio/Thumbs/EnoreTower.jpg","w":765,"h":1200,"title":"Enore\u0027s Tower","caption":"Illustration used for the cover of Guardian\u0027s Peril","key":"Enore"},{"src":"/Images/Portfolio/Pieces/KenpoLogo.jpg","thumbnail":"/Images/Portfolio/Thumbs/KenpoLogo.jpg","msrc":"/Images/Portfolio/Thumbs/KenpoLogo.jpg","w":800,"h":966,"title":"Kenpo Karate Logo","caption":"Commissioned karate team logo for a team in Mexico with central american themes on the traditional Kenpo notion of a dragon and a tiger.","key":"Kenpo"},{"src":"/Images/Portfolio/Pieces/Quetzalcoatl.jpg","thumbnail":"/Images/Portfolio/Thumbs/Quetzalcoatl.jpg","msrc":"/Images/Portfolio/Thumbs/Quetzalcoatl.jpg","w":1600,"h":967,"title":"Quetzalcoatl","caption":"Central American ancient deity Quetzalcoatl, the feathered serpent.","key":"Quetzalcoatl"}];
I have added a few custom attributes, but I haven't done anything yet with the photoswipe to try to utilize those, so I don't imagine that is the problem.
I am using the following as my options:
var options = {
history: false,
focus: false,
index: 0,//I can verify that 0,1,2,3 all load up correctly for an initial load
showAnimationDuration: 0,
hideAnimationDuration: 0
};
So then I just do the following:
var photoswipe = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options);
photoswipe.init();
I have the pswpElement, and simply coppied the markup for that from the photoswipe site, so it should also be in line. I would really like to know what I need to do to make it so that it works when I swap to a new image.
I also verified that if I remove the u207 (encoded ') from the titles, it doesn't fix the problem just to try to be thorough about things.
Share Improve this question asked Jan 11, 2015 at 4:43 DannyDanny 3081 gold badge4 silver badges12 bronze badges 8-
Please provide a reduced test case (isolated example) that reproduces the problem. You may create it based on CodePens in PhotoSwipe documentation: raw gallery, gallery with thumbnails, custom HTML content in slides. If you're not fortable with CodePen, you may export code via
Share -> Export .zip
, and upload test case to your server. – Dmytro Semenov Commented Jan 13, 2015 at 9:00 - Here's a code pen that is almost identical to my actual scenario. I am getting the problem in this one. codepen.io/anon/pen/dPvOzy I have wonky values in the show and hide durations in this fork as I copied some code where I was experimenting a bit with those values. – Danny Commented Jan 14, 2015 at 4:13
- So how to reproduce the issue? I don't see any errors with codepen that you linked, even if animation duration is set to 0. – Dmytro Semenov Commented Jan 14, 2015 at 12:19
- I just updated Chrome manually (thought it was supposed to take care of that for me). Once I did that, the code pen works. Thanks for looking and letting me know that it "works on your box" :) – Danny Commented Jan 14, 2015 at 13:48
- Ok I can still reproduce it, but it is much better. I kind of intermittently get it. One time, I got it when I did a swipe down to close. Another time, I got it when I touched before the next image showed up. I pretty reliably seem to get a blank black screen when I do my first switch. Then I swipe back to the image I started on and navigate and it seems to work fine from there. I am still able to see the error, but it is not as easy to reproduce now that I updated chrome. – Danny Commented Jan 14, 2015 at 13:53
1 Answer
Reset to default 10Make sure that index
option value is an Integer, not a String. parseInt( ... , 10)