文章/答案/技术大牛

发布

社区首页 >问答首页 >未定义Photoswipe默认设置

问未定义Photoswipe默认设置
EN

Stack Overflow用户

提问于 2018-10-18 23:40:05

回答 1查看 1.6K关注 0票数 0

我正在用我的站点来设置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>

我已经能够让PhotoSwipe使用不同的外部、更复杂的javascript来处理缩略图中显示的图像，但是由于某种原因，这个“简化的”演示一直在给我留下一个不明确的参考错误。我尝试过在头中加载PhotoSwipe javascript，就在关闭的body标记之前；不起作用。

我也尝试过不同的方法来调用新的PhotoSwipe构造函数，这似乎不起作用。

测试站点链接：photoswipe.php

photoswipe

javascript

php

html

css

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-11-01 23:37:14

错误地将大写大写误为小写。这一行有错误：

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

“PhotoswipeUI_Default”应该是：

PhotoSwipeUI_Default

光擦除中的's‘应该大写。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/52883984

复制

相似问题

问未定义Photoswipe默认设置
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问未定义Photoswipe默认设置EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问未定义Photoswipe默认设置
EN