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

[dyllandry]

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

[dyllandry]

After setting the options property index, I've found out that I cannot goTo() the images two below or above the starting index. For example, if index = 4 then I cannot goTo() index 2, 3, 5, or 6. If I set index = 8 the same issue occurs with indices 6, 7, 9, and 10.

[Dima-Astreyko]

I faced with the same issue