PhotoSwipe: Uncaught TypeError: Cannot read property 'x' of undefined

I’ve already solved the problem, adding here to document the problem, in case someone runs into this as I did

Uncaught TypeError: Cannot read property 'x' of undefined error threw me off for a good 2 hours.

I read almost every line of the Call Stack in chrome debugger, ( it lead _equalizePoints() ), going back and forth until I discovered, that I had specified the images object like this:

image.push({ src: "http://----.jpg", width: 100, height 100 });

As it turns out, the expected keys for width & height are w and h, and not width or height.

I assume that because PhotoSwipe is still in beta, there is no throwing of error helpful error messages, when data is missing. A “No width or height of image found” would have been very helpful, instead I tried to inspect the bounds of my images, try to figure out when and what is called, etc.

About this issue

Original URL
State: closed
Created 10 years ago
Reactions: 61
Comments: 21 (2 by maintainers)

Most upvoted comments

I was facing this problem on my angular.js project and I solved it moving the pswp div to my index.html. It’s like @oguzhankahyaoglu solution: Alot of pages was caching the pspw div and sometimes the problem rises on my face, taking off my sleep and good health.

If you are reading this and are looking for a simpler solution, try this followinfg guide:

If you work with a single-page website just place the pspw div on the index.html (or default.html, home.html… whatever)
If the first solution doesn’t solve your ploblem (or does not apply) maybe you are wrongly caching the pspw div. On this case I recomend you to always destroy the gallery, grab the div and recreate the gallery again. If it works and your boss is happy you job is done 🥇
After you archieve the second step, with you boss happy, try to write a better cache machanism with fancy shit.
If I said somethig dumb, sorry.
I lied on step 4
I lied on step 5.
If you need any help with that I’m available. Just send me a message champs. Don’t suffer alone!

edgarberlinck on Jan 23, 2017

@m2gleason I told you the story 😃 you have to find the second line (document.querySelectorAll) in source code and replace it with the first. Reason of the issue was, jquery mobile is actually caching pages, thus, document.querySelectorAll(‘.pswp’) code refers to multiple photoswipe divs, which are located at inactive pages. page() was a shortcut by the way!

oguzhankahyaoglu on May 10, 2016

Just read this thread because I had the same issue. I solved it when coming across a typo.

Make sure to double check all the sizes especially the x symbol. In my case, this code 1280×1323 was triggering the error.

× (×) is a totally different char than x (x) besides being visually very similar. Dumb mistakes are always the toughest to spot! Hope this can help someone out there!

alessandrodallafina on Feb 28, 2017

thanks ! It helped me.

ciaala on Oct 31, 2016