dimsemenov / PhotoSwipe

JavaScript image gallery for mobile and desktop, modular, framework independent
http://photoswipe.com
MIT License
24.27k stars 3.31k forks source link

Why not use the UMD version? #2042

Closed rrueger closed 1 year ago

rrueger commented 1 year ago

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 using npm/yarn etc.

The UMD documentation says

Use it only if you are unable to use ESM version.

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!

dimsemenov commented 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

rrueger commented 1 year ago

Thanks for the quick reply. Unfortunately, I cannot get this to work. Perhaps you can give me a pointer on what has gone wrong.

  1. mkdir photoswipe-test; cd photoswipe-test
  2. git clone https://github.com/dimsemenov/PhotoSwipe
  3. Create index.html
    Contents here
<!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>

  1. python -m http.server
  2. Go to localhost. The images are there, however when clicking on an image, it only opens the full-sized version in a new tab.
dimsemenov commented 1 year ago

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

rrueger commented 1 year ago

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.