Search code examples
jqueryjquery-mobilephotoswipe

PhotoSwipe.js shows UNDEFINED and cannot display images

Am using Photoswipe and am using the exact same HTML structure and script as shown on the site but when clicking my thumbnail, black screen opens and simply shows an "X" icon.

JS error panel reads 404 not found. It is trying to add "undefined" to the end of the image path.

JS:

<script>
    $(document).ready(function () {

        var myPhotoSwipe = $("#ulProdImgs").photoSwipe({ enableMouseWheel: false, enableKeyboard: false });

    }); 
    </script>

HTML:

<ul id="ulProdImgs">
<li>
<a href="/images/fence.jpg"><img src="/images/fence.jpg" alt="Image 01" /></a>
</li>
<li>
<a href="/images/fence.jpg"><img src="/images/fence.jpg" alt="Image 02" /></a>
</li>
</ul>

Am using jQuery 1.8.0 - is this not compatible?

Error is adding undefined to end of path as such:

GET http://mysite.com/page/undefined 404 (Not Found)

Solution

  • Looking at the docs it looks like you need to attach photoswipe to the anchor.

    Try this:

    var myPhotoSwipe = $("#ulProdImgs a").photoSwipe({ enableMouseWheel: false, enableKeyboard: false });