Closed rrueger closed 1 year ago
UMD version is the same code but transpiled (automatically rewritten so it works with older browsers/systems). Please do not use it unless it's a part of some legacy codebase. You don't have to use npm
/yarn
, the ESM files can be linked directly if you provide the full path https://photoswipe.com/getting-started/#initialization
Thanks for the quick reply. Unfortunately, I cannot get this to work. Perhaps you can give me a pointer on what has gone wrong.
mkdir photoswipe-test; cd photoswipe-test
git clone https://github.com/dimsemenov/PhotoSwipe
index.html
<!DOCTYPE html>
<html>
<head>
<title>Test Gallery</title>
<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>
<link rel="stylesheet" href="/photoswipe/dist/photoswipe.css">
</head>
<body>
<div class="pswp-gallery pswp-gallery--single-column" id="gallery--getting-started">
<a href="https://cdn.photoswipe.com/photoswipe-demo-images/photos/2/img-2500.jpg"
data-pswp-width="1669"
data-pswp-height="2500"
target="_blank">
<img src="https://cdn.photoswipe.com/photoswipe-demo-images/photos/2/img-200.jpg" alt="" />
</a>
<!-- cropped thumbnail: -->
<a href="https://cdn.photoswipe.com/photoswipe-demo-images/photos/7/img-2500.jpg"
data-pswp-width="1875"
data-pswp-height="2500"
data-cropped="true"
target="_blank">
<img src="https://cdn.photoswipe.com/photoswipe-demo-images/photos/7/img-200.jpg" alt="" />
Cropped
</a>
<!-- data-pswp-src with custom URL in href -->
<a href="https://unsplash.com"
data-pswp-src="https://cdn.photoswipe.com/photoswipe-demo-images/photos/3/img-2500.jpg"
data-pswp-width="2500"
data-pswp-height="1666"
target="_blank">
<img src="https://cdn.photoswipe.com/photoswipe-demo-images/photos/3/img-200.jpg" alt="" />
</a>
<!-- Without thumbnail: -->
<a href="http://example.com"
data-pswp-src="https://cdn.photoswipe.com/photoswipe-demo-images/photos/5/img-2500.jpg"
data-pswp-width="2500"
data-pswp-height="1668"
target="_blank">
No thumbnail
</a>
<!-- wrapped with any element: -->
<div>
<a href="https://cdn.photoswipe.com/photoswipe-demo-images/photos/6/img-2500.jpg"
data-pswp-width="2500"
data-pswp-height="1667"
target="_blank">
<img src="https://cdn.photoswipe.com/photoswipe-demo-images/photos/6/img-200.jpg" alt="" />
</a>
</div>
</div>
</body>
</html>
python -m http.server
localhost
. The images are there, however when clicking on an image, it only opens the full-sized version in a new tab.There is no element with ID my-gallery
on your page, also make sure paths to JS files are correct, you might want to provide absolute path like http://example.com/photoswipe/dist/photoswipe.esm.js
or that starts with /
like /photoswipe/dist/photoswipe.esm.js
Brilliant! Thank you so much. All working now. It was a combination of changing the id
to my-gallery
and using absolute paths that I didn't test.
Thank you for writing this great software!
I am looking to include photoswipe to modernise an old website.
Using the UMD version makes it very easy to build and deploy the website by only including 2 additional regular
.js
files without the need of usingnpm
/yarn
etc.The UMD documentation says
This sound ominous, and it is not clear to me what the disadvantages of using the UMD version.
I presume UMD has performance disadvantages?
If it is possible to use the ESM version with a similar setup (no
npm
) by downloading the.js
files and including them like in the UMD version? Or do you need some more complex package management system?Thank you for clarifying!