Question

我正在与我的网站一起设置PhotoSwipe，但遇到了

的未引用错误。

PhotoswipeUI_Default未在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>

我已经能够使用不同的外部，更复杂的javascript使PhotoSwipe处理缩略图中显示的图像，但是由于某些原因，此“简化”的演示一直给我带来Uncaught Reference Error的困扰。我试过将PhotoSwipe javascript加载到标题中，就在结束body标签之前；不起作用。

我还尝试了各种不同的调用新PhotoSwipe构造函数的方法，该构造函数似乎不起作用。

测试站点链接：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的默认设置

1 个答案: