javascriptphphtmlcssphotoswipe

Photoswipe UI Default is not defined

I'm working on setting up PhotoSwipe with my site but I'm getting an uncaught reference error for

PhotoswipeUI_Default is not defined at openPhotoSwipe

Here is my code:

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Untitled Document</title>

    <link rel="stylesheet" href="../css/asmStyles.css">
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.2/photoswipe.css">
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.2/default-skin/default-skin.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.2/photoswipe.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.2/photoswipe-ui-default.js"></script>
    <script src="../js/my_photoswipe.js"></script>
    <script
  src="https://code.jquery.com/jquery-3.3.1.js"
  integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
  crossorigin="anonymous"></script>
</head>

<body>


<button id="open_photoswipe">Open Photoswipe</button>

<!-- Default photoswipe setup -->
    <div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="pswp__bg"></div>

        <div class="pswp__scroll-wrap">
            <div class="pswp__container">
                <div class="pswp__item"></div>
                <div class="pswp__item"></div>
                <div class="pswp__item"></div>
                <div class="pswp__item"></div>
            </div>

            <div class="pswp__ui pswp__ui--hidden">
                <div class="pswp__top-bar">

                    <div class="pswp__counter"></div>

                    <button class="pswp__button pswp__button--close" title="close(Esc)"></button>

                    <button class="pswp__button pswp__button--share" title="Share"></button>

                    <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>

                    <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>

                    <div class="pswp__preloader">

                        <div class="pswp__preloader__icn">
                            <div class="pswp__preloader__cut">
                                <div class="pswp__preloader__donut">
                                </div>

                            </div>

                        </div>

                    </div>

                </div>

                <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
                    <div class="pswp__share-tooltip">
                    </div>

                </div>


                <button class="pswp__button pswp__button--arrow--left" title="Previous(arrow left)">
                </button>



                <button class="pswp__button pswp__button--arrow--right" title="Next(arrow right)">
                </button>


                <div class="pswp__caption">

                    <div class="pswp__caption__center">
                    </div>



                </div>


            </div>

        </div>

    </div>

<script type="text/javascript">


    var openPhotoSwipe = function () {
        var pswpElement = document.querySelectorAll('.pswp')[0];
        //build items array

        var items = [
            {
                src:'../images/testimage.jpg',
                h: 600,
                w: 800

            },
            {
                src: '../images/testimage2.jpg',
                h: 600,
                w: 800

            }
        ];

        var options = {
            history: false,
            focus: false,

            showAnimationDuration: 0,
            hideAnimationDuration: 0
        };

        var gallery = new PhotoSwipe(pswpElement, PhotoswipeUI_Default, items, options);

        gallery.init();

    };

    openPhotoSwipe();
    document.getElementById('open_photoswipe').onclick = openPhotoSwipe;


    </script>
</body>
</html>

I've been able to get PhotoSwipe working with images shown in thumbnails using different external, more complicated, javascript, but for some reason, this "simplified" demo keeps hitting me with the Uncaught Reference Error. I have tried loading the PhotoSwipe javascript in the header, right before the closing body tag; doesn't work.

I have also tried different variations of calling the new PhotoSwipe constructor, which doesn't seem to be working.

Test site link: https://www.azsmtest.com/test/test_photoswipe.php

Solution

  • Mistyped an Uppercase as a lowercase. This line has the error: 

    var gallery = new PhotoSwipe(pswpElement, PhotoswipeUI_Default, items, options);

    The 'PhotoswipeUI_Default' should be:

    PhotoSwipeUI_Default

    The 's' in Photoswipe should be capitalized.