I'm working on setting up PhotoSwipe with my site but I'm getting an uncaught reference error for
PhotoswipeUI_Default is not defined at openPhotoSwipe
Here is my code:
<!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>
I've been able to get PhotoSwipe working with images shown in thumbnails using different external, more complicated, javascript, but for some reason, this "simplified" demo keeps hitting me with the Uncaught Reference Error. I have tried loading the PhotoSwipe javascript in the header, right before the closing body tag; doesn't work.
I have also tried different variations of calling the new PhotoSwipe constructor, which doesn't seem to be working.
Test site link: https://www.azsmtest.com/test/test_photoswipe.php
