Possible to use photoswipe-dynamic-caption-plugin with photoswipe core? #27
Description
I am using Photoswipe without lightbox module (https://photoswipe.com/data-sources/#without-lightbox-module). The example provided here is based on lightbox
const captionPlugin = new PhotoSwipeDynamicCaption(lightbox, {
// Plugins options, for example:
type: 'auto',
});
How to load PhotoSwipeDynamicCaption with photoswipe? My current code looks like this:
<script type='module'>
import PhotoSwipe from '../js/photoswipe.esm.min.js';
import PhotoSwipeDynamicCaption from '../js/photoswipe-dynamic-caption-plugin.esm.min.js';
document.querySelectorAll('td[id="img_link"] a').forEach((thumbnail, index) => {
thumbnail.addEventListener('click', (e) => {
e.preventDefault();
const galleryElements = document.querySelectorAll('td[id="img_link"] a');
const options = {
dataSource: [],
index: index, // Start at the clicked thumbnail
padding: {
top: 20,
bottom: 40,
left: 100,
right: 100
},
wheelToZoom: true
};
options.dataSource = Array.from(galleryElements).map(el => ({
src: el.getAttribute('href'),
width: parseInt(el.getAttribute('data-pswp-width')),
height: parseInt(el.getAttribute('data-pswp-height')),
alt: el.getAttribute('data-caption')
}));
const pswp = new PhotoSwipe(options);
pswp.init();
});
});
</script>
"alt" property in options.dataSource is the caption text.
Thanks.