Cannot goTo() Images within 2 indices of starting index.

Author: dyllandryCreated Mar 13, 2019Updated Oct 29, 2023

I have image elements which use goTo() and an index to open PhotoSwipe. Clicking on the first image brings up PhotoSwipe and I can use the left and right arrows to go through every image.

However, clicking on the second and third images bring up PhotoSwipe with no image, just the black background. Clicking on the third image results in no error, but the second image errors with:

Uncaught TypeError: Cannot read property 'center' of undefined
    at PhotoSwipe.updateCurrZoomItem (photoswipe.js:1104)
    at PhotoSwipe.updateCurrItem (photoswipe.js:1179)
    at PhotoSwipe.goTo (photoswipe.js:1074)

That is the same error as in this issue and this question, but neither's solution (making sure the index passed to goTo() is an int) works for me. I am definitely passing an int on click. Here is my click function.

document.querySelectorAll('.pswp-image').forEach((imageElement, i) => {
        imageElement.addEventListener(`click`, function() {
                const pswpElement = document.querySelector('.pswp')
                const gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, pswpImages)
                gallery.init()
                gallery.goTo(i)
        })
})

Here is my array of images prior to PhotoSwipe processing them.

0: {src: "images/016_orig-400.jpg", w: 400, h: 300}
1: {src: "images/1615956_orig-400.jpg", w: 400, h: 300}
2: {src: "images/header-400.jpg", w: 400, h: 183}
3: {src: "images/img-1047_orig-400.jpg", w: 400, h: 300}
4: {src: "images/skinny-1-400.jpg", w: 400, h: 429}
5: {src: "images/skinny-2-400.jpeg", w: 400, h: 458}
6: {src: "images/skinny-3-400.jpg", w: 400, h: 533}
7: {src: "images/white-horse-133.jpg", w: 133, h: 100}
8: {src: "images/wide-1-400.jpg", w: 400, h: 300}
9: {src: "images/wide-2-400.jpg", w: 400, h: 300}
10: {src: "images/wide-3-400.jpg", w: 400, h: 300}

When I go through all the images by bringing up PhotoSwipe via clicking on any image except the 2nd and 3rd, PhotoSwipe populates the array with more data. Pasted below you'll see that the second image's center property was defined where previously it erred due to being undefined. At this point clicking on the second image doesn't error, but is still black.

Here's the same array after being through PhotoSwipe's viewer once.

0:
bounds: {center: {…}, max: {…}, min: {…}}
container: div.pswp__zoom-wrap
fitRatio: 0.8
h: 300
imageAppended: true
img: null
initialLayout: undefined
initialPosition: {x: 0, y: 164}
initialZoomLevel: 0.8
loadComplete: null
loaded: true
loading: false
placeholder: null
src: "images/016_orig-400.jpg"
vGap: {top: 44, bottom: 44}
w: 400
__proto__: Object
1:
bounds:
center: {x: 0, y: 164}
max: {x: 0, y: 164}
min: {x: 0, y: 164}
__proto__: Object
container: null
fitRatio: 0.8
h: 300
imageAppended: true
img: null
initialPosition: {x: 0, y: 164}
initialZoomLevel: 0.8
loaded: true
loading: false
src: "images/1615956_orig-400.jpg"
vGap: {top: 44, bottom: 44}
w: 400
__proto__: Object
2:
bounds: {center: {…}, max: {…}, min: {…}}
container: null
fitRatio: 0.8
h: 183
imageAppended: true
img: null
initialPosition: {x: 0, y: 211}
initialZoomLevel: 0.8
loadComplete: null
loaded: true
loading: false
placeholder: null
src: "images/header-400.jpg"
vGap: {top: 44, bottom: 44}
w: 400
__proto__: Object
3:
bounds: {center: {…}, max: {…}, min: {…}}
container: null
fitRatio: 0.8
h: 300
imageAppended: true
img: null
initialPosition: {x: 0, y: 164}
initialZoomLevel: 0.8
loadComplete: null
loaded: true
loading: false
placeholder: null
src: "images/img-1047_orig-400.jpg"
vGap: {top: 44, bottom: 44}
w: 400
__proto__: Object
4:
bounds: {center: {…}, max: {…}, min: {…}}
container: null
fitRatio: 0.8
h: 429
imageAppended: true
img: null
initialPosition: {x: 0, y: 112}
initialZoomLevel: 0.8
loadComplete: null
loaded: true
loading: false
placeholder: null
src: "images/skinny-1-400.jpg"
vGap: {top: 44, bottom: 44}
w: 400
__proto__: Object
5:
bounds: {center: {…}, max: {…}, min: {…}}
container: null
fitRatio: 0.8
h: 458
imageAppended: true
img: null
initialPosition: {x: 0, y: 101}
initialZoomLevel: 0.8
loadComplete: null
loaded: true
loading: false
placeholder: null
src: "images/skinny-2-400.jpeg"
vGap: {top: 44, bottom: 44}
w: 400
__proto__: Object
6:
bounds: {center: {…}, max: {…}, min: {…}}
container: null
fitRatio: 0.8
h: 533
imageAppended: true
img: null
initialPosition: {x: 0, y: 71}
initialZoomLevel: 0.8
loadComplete: null
loaded: true
loading: false
placeholder: null
src: "images/skinny-3-400.jpg"
vGap: {top: 44, bottom: 44}
w: 400
__proto__: Object
7:
bounds: {center: {…}, max: {…}, min: {…}}
container: null
fitRatio: 2.406015037593985
h: 100
imageAppended: true
img: null
initialPosition: {x: 94, y: 234}
initialZoomLevel: 1
loadComplete: null
loaded: true
loading: false
placeholder: null
src: "images/white-horse-133.jpg"
vGap: {top: 44, bottom: 44}
w: 133
__proto__: Object
8:
bounds: {center: {…}, max: {…}, min: {…}}
container: null
fitRatio: 0.8
h: 300
imageAppended: true
img: null
initialPosition: {x: 0, y: 164}
initialZoomLevel: 0.8
loadComplete: null
loaded: true
loading: false
placeholder: null
src: "images/wide-1-400.jpg"
vGap: {top: 44, bottom: 44}
w: 400
__proto__: Object
9:
bounds: {center: {…}, max: {…}, min: {…}}
container: div.pswp__zoom-wrap
fitRatio: 0.8
h: 300
imageAppended: true
img: null
initialPosition: {x: 0, y: 164}
initialZoomLevel: 0.8
loadComplete: null
loaded: true
loading: false
placeholder: null
src: "images/wide-2-400.jpg"
vGap: {top: 44, bottom: 44}
w: 400
__proto__: Object
10:
bounds: {center: {…}, max: {…}, min: {…}}
container: div.pswp__zoom-wrap
fitRatio: 0.8
h: 300
imageAppended: true
img: null
initialPosition: {x: 0, y: 164}
initialZoomLevel: 0.8
loaded: true
loading: false
src: "images/wide-3-400.jpg"
vGap: {top: 44, bottom: 44}
w: 400
__proto__: Object

Source: dimsemenov/PhotoSwipe

View original on GitHub View discussion on GitHub