Plugins with webpack

[chadwilken]

First off, thanks for the awesome plugin, and rewriting it without dependencies.

I am using the lightgallery portion successfully, but am unable to get the plugins working. I am trying to use lg-zoom.js and lg-fullscreen.js. I tried the nested requires like you had an example of to no success. I have tried several methods of using webpack loaders for exporting or importing variables into the module. If you or any other users have an idea on how to fix this it would be greatly appreciated.

My setup looks like

require('lightgallery.js');
require('lg-zoom.js');
require('lg-pager.js');
require('lg-fullscreen.js');

export default (function () {
  $('document').ready(() => {
    lightgallery($('#lightgallery')[0]);

    $('.dwnld').click(function(ev) {
      ev.preventDefault();
      $(this).text('Preparing Download…');
      var $form = $('#download-form');
      $form.submit();
    });
  });
})();

[danii1]

Plugins are in the separate packages, just install them and you code should work:

npm i --save lg-zoom.js lg-pager.js lg-fullscreen.js

[klaygomes]

Did you resolve this issue? I'm having same problem.

[chadwilken]

Yea by requiring like:

require('lightgallery.js');
require('lg-zoom.js');
require('lg-fullscreen.js');
require('lg-pager.js');

It loaded them in the correct order and allowed them to function.

[klaygomes]

I was trying to load "lightgallery" with out trailing '.js'.

[IAMtheIAM]

I got it to work with webpack like this:

      require(['lightgallery.js'], function() {
         require(['lg-thumbnail.js', 'lg-autoplay.js', 'lg-fullscreen.js', 'lg-zoom.js', 'lg-hash.js', 'lg-share.js', 'lg-pager.js'], function() {
            lightGallery(document.getElementById('lightgallery'), {
               thumbnail: true
            });
         });
      });

[opmind]

On my experience with lightgallery + webpack 4 any js files from npm package were loaded but gave error $(…).lightGallery is not a function, while lightgallery-all.js from cdn works successfully being loaded with webpack:

require(['./plugins/lightgallery-all.js'], function() {
    require([], function() {
        $("#lightgallery").lightGallery();
    });
});

So lightgallery-all.js from npm and lightgallery-all.js from cdn differs.

[IAMtheIAM]

Here's another way to do it using Promise.all and dynamic imports

/**
       * Dynamically loading multiple modules
       * See: https://webpack.js.org/api/module-methods/#import-
       * See: http://2ality.com/2017/01/import-operator.html
       */
      Promise.all([
         import(
            /* webpackChunkName: "lightgallery" */
            'lightgallery.js'), // lightgallery.js must be first
         import('lg-thumbnail.js'),
         import('lg-autoplay.js'),
         import('lg-fullscreen.js'),
         import('lg-zoom.js'),
         import('lg-share.js'),
         import('lg-pager.js')
         // import('lg-hash.js')
      ])
         .then(([]) => {
            lightGallery(document.getElementById('lightgallery'), {
               thumbnail: true,
               selector : '.gallery-item'
            });
         })
         .catch(error => {
            console.log(error);
            toastr.error('An error occurred while loading the lightgallery module', "Module Load Failed");
         });

[TripShade]

After playing with it for a while this is what I ended up using. Might be useful for whoever ends up here.

const lightboxList = [].slice.call(document.querySelectorAll('.js-lightbox'));
// I check Promise so my builder automatically adds the polyfill on build it is not required
if (lightboxList.length > 0 && typeof Promise !== 'undefined') {
    import(/* webpackChunkName: "lightgallery" */ 'lightgallery.js')
        .then(({ default: lightGallery }) => {
            import(/* webpackChunkName: "lg-video" */ 'lg-video.js');
            lightboxList.map(item => {
                window.lightGallery(item, {
                    selector: 'your selector',
                });
            });
        })
        .catch(error => 'An error occurred while importing Lightgallery');
}

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. If the issue is still valid for version 2.x, please re-open. Apologize for not responding on time. Thank you for your contributions.