PhotoSwipe only shows the code for ESM modules.
<script type="module">
import PhotoSwipeLightbox from 'photoswipe/dist/photoswipe-lightbox.esm.js';
const lightbox = new PhotoSwipeLightbox({
gallery: '#my-gallery',
children: 'a',
pswpModule: () => import('photoswipe/dist/photoswipe.esm.js')
});
lightbox.init();
</script>
This does not work with my current setup. I'm working in Visual Studio on a project that uses jQuery and old ways of including JS files in HTML via <script> tags and CDNs.
If I use <script src='/path-to/photoswipe.esm.js'> it apparently won't work because this file contains an export keyword in it and it shows an error inside console:
Uncaught SyntaxError: Unexpected token 'export'
So, is there a way for me to use this library, but with old-school code?
PhotoSwipe only shows the code for ESM modules.
<script type="module">
import PhotoSwipeLightbox from 'photoswipe/dist/photoswipe-lightbox.esm.js';
const lightbox = new PhotoSwipeLightbox({
gallery: '#my-gallery',
children: 'a',
pswpModule: () => import('photoswipe/dist/photoswipe.esm.js')
});
lightbox.init();
</script>
This does not work with my current setup. I'm working in Visual Studio on a project that uses jQuery and old ways of including JS files in HTML via <script> tags and CDNs.
If I use <script src='/path-to/photoswipe.esm.js'> it apparently won't work because this file contains an export keyword in it and it shows an error inside console:
Uncaught SyntaxError: Unexpected token 'export'
So, is there a way for me to use this library, but with old-school code?
Share Improve this question asked Apr 3, 2022 at 10:44 Ali EXEAli EXE 1,3694 gold badges17 silver badges37 bronze badges 1- Did you got any solution.? – Abijith Ajayan Commented Jul 30, 2022 at 12:26
2 Answers
Reset to default 6v5 version offer umd build, you are able to use that build to run the old way
<!DOCTYPE html>
<html>
<head>
<title>Test Gallery</title>
</head>
<body>
<script src="./photoswipe.umd.min.js"></script>
<script src="./photoswipe-lightbox.umd.min.js"></script>
<link rel="stylesheet" href="../photoswipe.css">
<div class="test-gallery">
<a href="https://dummyimage./1200x600/000/fff" data-pswp-width="1200" data-pswp-height="600">
<img src="https://dummyimage./120x60/000/fff" alt="" />
</a>
<a href="https://dummyimage./1200x1200/000/fff" data-pswp-width="1200" data-pswp-height="1200">
<img src="https://dummyimage./60x60/000/fff" alt="" />
</a>
<a href="https://dummyimage./600x1200/000/fff" data-pswp-width="600" data-pswp-height="1200">
<img src="https://dummyimage./30x60/000/fff" alt="" />
</a>
</div>
<script type="text/javascript">
var lightbox = new PhotoSwipeLightbox({
gallery: '.test-gallery',
children: 'a',
// dynamic import is not supported in UMD version
pswpModule: PhotoSwipe
});
lightbox.init();
</script>
</body>
</html>
You just need to replace the links of the js files as below. Don't forget to add type='module' on the script tag.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width"/>
<link rel="stylesheet" href="https://cdn.jsdelivr/npm/[email protected]/dist/photoswipe.css">
</head>
<body>
<div id="app">
<div class="pswp-gallery" id="my-gallery">
<a
href="https://cdn.photoswipe./photoswipe-demo-images/photos/1/img-2500.jpg"
data-pswp-width="1875"
data-pswp-height="2500"
target="_blank"
>
<img
src="https://cdn.photoswipe./photoswipe-demo-images/photos/1/img-200.jpg"
alt=""
/>
</a>
<a
href="https://cdn.photoswipe./photoswipe-demo-images/photos/2/img-2500.jpg"
data-pswp-width="1669"
data-pswp-height="2500"
target="_blank"
>
<img
src="https://cdn.photoswipe./photoswipe-demo-images/photos/2/img-200.jpg"
alt=""
/>
</a>
<a
href="https://cdn.photoswipe./photoswipe-demo-images/photos/3/img-2500.jpg"
data-pswp-width="2500"
data-pswp-height="1666"
target="_blank"
>
<img
src="https://cdn.photoswipe./photoswipe-demo-images/photos/3/img-200.jpg"
alt=""
/>
</a>
</div>
</div>
<script type='module'>
import PhotoSwipeLightbox from 'https://cdn.jsdelivr/npm/[email protected]/dist/photoswipe-lightbox.esm.js';
const lightbox = new PhotoSwipeLightbox({
gallery: '#my-gallery',
children: 'a',
pswpModule: () => import('https://cdn.jsdelivr/npm/[email protected]/dist/photoswipe.esm.js')
});
lightbox.init();
</script>
</body>
</html>发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744749056a4591481.html
评论列表（0条）