Пользовательский интерфейс Photoswipe По умолчанию не определен - PullRequest
Новая
       24

Пользовательский интерфейс Photoswipe По умолчанию не определен

0 голосов
/ 19 октября 2018

Я работаю над настройкой 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, но по какой-то причине эта «упрощенная» демонстрация продолжает поражать меняUncaught Reference Error.Я попытался загрузить javascript PhotoSwipe в заголовок, прямо перед закрывающим тегом body;не работает

Я также пробовал разные варианты вызова нового конструктора PhotoSwipe, который, похоже, не работает.

Ссылка на тестовый сайт: https://www.azsmtest.com/test/test_photoswipe.php

1 Ответ

0 голосов
/ 02 ноября 2018

Опечатка в верхнем регистре как строчная.Эта строка содержит ошибку: 

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

Значение 'PhotoswipeUI_Default' должно быть: 

PhotoSwipeUI_Default

'S' в Photoswipe должно быть написано заглавными буквами.

...