javascript - Photoswipe 无法读取 photoswipe.js 第 1070 行未定义的属性 'center'

Question

我只是涉足 photoswipe，到目前为止，我没有做任何更高级的事情，只是通过一些非常小的(理论上微不足道的调整)简单地实现入门演示的副本。

我的图片库显示得很好，我总共有 4 个项目，因为我只是想测试一下。第一张图片将缩放和平移，所有这些都很棒。但是，在我切换图片的那一刻，我在这篇文章的标题中收到了 javascript 错误。

我使用以下作为我的元素:

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"}];

我已经添加了一些自定义属性，但我还没有对 photoswipe 做任何尝试来尝试利用这些属性，所以我不认为这是问题所在。

我使用以下选项:

        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

        };

那么我只需执行以下操作:

   var photoswipe = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options);
        photoswipe.init();

我有 pswpElement，只是从 photoswipe 网站复制了它的标记，所以它也应该符合要求。我真的很想知道我需要做什么才能让它在我换到新图像时起作用。

我还验证了如果我从标题中删除 u207(编码为 ')，它并不能解决问题只是为了彻底了解事情。

Answer 1

确保 index 选项值是一个整数，而不是一个字符串。 parseInt( ... , 10)