Possible to use photoswipe-dynamic-caption-plugin with photoswipe core?

[eshmh]

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.

[eshmh]

I figured out one way to do it.

1. modify the constructor of the library:

  constructor(pswp, options) {
    this.options = {
      ...defaultOptions,
      ...options
    };

    this.pswp = pswp;

    this.initCaption();
  }

2. make change of datasource in my code and pass pswp object to the library as:

   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'),
                   element: el
               }));
   
               const pswp = new PhotoSwipe(options);
   
               const captionPlugin = new PhotoSwipeDynamicCaption(pswp, {
                   mobileLayoutBreakpoint: 700,
                   type: 'auto',
                   mobileCaptionOverlapRatio: 1
               });

Each el contains a "pswp-caption-content" class, as usual, to provide caption content to PhotoSwipeDynamicCaption plugin.