gpt4 book ai didi

javascript - 未定义 Photoswipe UI 默认值

转载 作者:行者123 更新时间:2023-11-28 00:57:24 25 4
gpt4 key购买 nike

我正在为我的网站设置 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>

我已经能够使用不同的外部、更复杂的 javascript 让 PhotoSwipe 处理缩略图中显示的图像,但出于某种原因,这个“简化的”演示一直让我遇到 Uncaught ReferenceError 。我尝试在标题中加载 PhotoSwipe javascript,就在结束正文标记之前;不起作用。

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

测试站点链接:https://www.azsmtest.com/test/test_photoswipe.php

最佳答案

将大写字母错误地输入为小写字母。此行有错误:

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

“PhotoswipeUI_Default”应该是:

PhotoSwipeUI_Default

Photoswipe 中的“s”应大写。

关于javascript - 未定义 Photoswipe UI 默认值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52883984/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com