私は自分のサイトで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 ReferenceErrorが発生し続けます。ヘッダーのbody終了タグの直前にPhotoSwipejavascriptをロードしてみました。動作しません。
また、新しいPhotoSwipeコンストラクターを呼び出すさまざまなバリエーションを試しましたが、機能していないようです。
テストサイトのリンク：https：//www.azsmtest.com/test/test_photoswipe.php
大文字を小文字と間違えました。この行にはエラーがあります：
var gallery = new PhotoSwipe(pswpElement, PhotoswipeUI_Default, items, options);
'PhotoswipeUI_Default'は次のようになります。
PhotoSwipeUI_Default
Photoswipeの「s」は大文字にする必要があります。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加