Photoswipe UI 默认未定义

Question

我正在为我的网站设置 PhotoSwipe，但我收到

的未捕获引用错误

PhotoswipeUI_Default is not defined at openPhotoSwipe

这是我的代码：

<!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>

我已经能够让 PhotoSwipe 处理缩略图中显示的图像，使用不同的外部，更复杂，javascript，但由于某种原因，这个 "simplified" 演示一直让我感到困惑参考错误。我已经尝试在结束 body 标签之前加载 header 中的 PhotoSwipe javascript；不起作用。

我还尝试了调用新的 PhotoSwipe 构造函数的不同变体，但似乎不起作用。

测试站点link：https://www.azsmtest.com/test/test_photoswipe.php

Answer 1

将大写字母打错为小写字母。此行有错误：

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

'PhotoswipeUI_Default'应该是：

PhotoSwipeUI_Default

Photoswipe 中的 's' 应该大写。

Photoswipe UI 默认未定义

Photoswipe UI Default is not defined

javascript

php

html

css

photoswipe