How get the newest photoswipe version going in Laravel Blade file with dynamic images

[rudolfbruder]

Hi,

I am facing difficulties with the newest version in laravle classic blade php file with dynamic items.

import PhotoSwipeLightbox from 'photoswipe/lightbox';
import 'photoswipe/style.css';

const lightbox = new PhotoSwipeLightbox({
  gallery: '#my-gallery',
  children: 'a',
  pswpModule: () => import('photoswipe')
});
lightbox.init();

If I have this in separate js file which is build by webpack how do I assign dynamic items to it like product images please?

If I have this:

    @push('scripts')
        <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>
    @endpush

In my php file it crashes because it cannot locate the improt files because it's looking for them in /public dir.

Any help or example is much appreciated.

Thanks!

[dimsemenov]

If I have this in separate js file which is build by webpack how do I assign dynamic items to it like product images please?

It's up to you how to pass data, PhotoSwipe can grab data either from DOM elements, or you may directly pass an object. https://photoswipe.com/data-sources/

In my php file it crashes because it cannot locate the improt files because it's looking for them in /public dir.

I'm no expert in Laravel and not sure if it supports dynamic imports out of the box, but PhotoSwipe also supports initialization without dynamic import - https://photoswipe.com/getting-started/#without-dynamic-import