Photoswipe: Document usage with webpack (Specifically where to import PhotoSwipeUI_Default from)

[j6s]

It would be nice to update the documentation to include usage with webpack.
A specific gotcha here is, where UI Default is imported from:

The package.json refereces the main library as its main file, which means that UI Default has to be imported as commented in issue #1150 .

[gnorby88]

webpack.config.js

module.exports = {
  entry: {
    app: './src/js/main.js',
    vendor: ['photoswipe','photoswipe/src/js/ui/photoswipe-ui-default.js']
  },
  plugins: [
    new webpack.ProvidePlugin({
      PhotoSwipe: 'photoswipe',
      PhotoSwipeUI_Default: 'photoswipe/src/js/ui/photoswipe-ui-default.js'
    })
  ]

main.js

  var $pswp = $('.pswp')[0];
  var image = [];

  $('.pictures').each( function() {
    var $pic = $(this),
      getItems = function() {
        var items = [];

        $pic.find('a').each(function() {
          var $href   = $(this).attr('href'),
              $size   = $(this).data('size').split('x'),
              $width  = $size[0],
              $height = $size[1];

          var item = {
              src : $href,
              w   : $width,
              h   : $height
          }

          items.push(item);
        });
        return items;
      }

    var items = getItems();

    $.each(items, function(index, value) {
      image[index]     = new Image();
      image[index].src = value['src'];
    });

    $pic.on('click', 'a', function(event) {
      event.preventDefault();

      var $index = $(this).index();
      var options = {
          index: $index,
          bgOpacity: 0.7,
          showHideOpacity: true
      }

      var lightBox = new PhotoSwipe($pswp, PhotoSwipeUI_Default, items, options);
      lightBox.init();
    });
  });

[joshchernoff]

It really should not be this much work to initialize this lib via webpack.
Worst of all trying to import the styles via webpack, barff! 🤮

[anitagraham]

It really should not be this much work to initialize this lib via webpack.
Worst of all trying to import the styles via webpack, barff! 🤮

So I get the css imported, but how did you get the assets (like default-skin.png)?

[gnorby88]

main.scss

@import '~photoswipe/src/css/main';
@import '~photoswipe/src/css/default-skin/default-skin';

[anitagraham]

main.scss

@import '~photoswipe/src/css/main';
@import '~photoswipe/src/css/default-skin/default-skin';

Yes I have that, but I am getting a 'not found' for the sprite png found in src/css/default-skin/default-skin/default-skin.png.

[joshchernoff]

You probably just need to tell webpack where to output the files found via the file loader.

IE for images ect this is what I had to do to get it working.

{
  test: /\.(png|svg|jpg|gif)$/,
  use: [
    {
      loader: "file-loader",
      options: {
        outputPath: "../images/"
      }
    }
  ]
}

note the outputPath was key to my success.

[niklasp]

has anyone tried to use it with sage wordpress and webpack?

[anitagraham]

I am using it with roots/trellis and webpack, but not with sage.

[msenkpiel]

that solved the problem for me: https://github.com/webpack/webpack/issues/9774#issuecomment-567929812

add this line on top of your sass file:
$pswp__assets-path: "~photoswipe/src/css/default-skin/";