How add lightGallery integration

[ratm2]

Hi! How add lightGallery (lightgalleryjs.com) modules into project like /bricks/src/js/integrations/swiper.js ?

F.e., if i add from instruction in /bricks/src/js/vendor/lightgallery.js

import lightGallery from '../../../node_modules/lightgallery/lightgallery.umd.js';
import lgZoom from '../../../node_modules/lightgallery/plugins/zoom/lg-zoom.umd.js'

it create file in /bricks/assets/js/lightgallery.min.js

but it has browser error:
Uncaught ReferenceError: lightGallery_umd is not defined

Why "umd" variable?

P.s.: sorry for my english)

[stefanobartoletti]

Hi, first of all thank you for being interested in Bricks.

According to their documentation, after you have installed lightgallery either with npm install lightgallery or yarn add lightgallery, you can import the packages with

import lightGallery from 'lightgallery';

// Plugins
import lgThumbnail from 'lightgallery/plugins/thumbnail'
import lgZoom from 'lightgallery/plugins/zoom'

It works for me, it includes the library code inside the compiled bundle in /bricks/dist/js/scripts.min.js

I don't have a license so the gallery itself isn't really working on my test, but I'm not getting errors in the console, just a warning for the missing license.

Please let me know if this works for you as well.

[ratm2]

Thanks for the quick reply! Bricks is very cool! 👍

Yes, i followed these import instructions earlier for compile separate file "lightgallery.min.js", because lightgallery need only for single posts/pages (CMS Wordpress). But got an message when gulp compile:

Generated an empty chunk: "lightgallery"

Code in compiled js-file lightgallery.min.js:

(function (factory) {
	typeof define === 'function' && define.amd ? define(factory) :
	factory();
})((function () { 'use strict';

}));

//# sourceMappingURL=lightgallery.min.js.map

What could be the problem?

[stefanobartoletti]

Looks like you haven't initizlized the library after importing it.

If you create a new file, let's say src/js/gallery.js with this content

import lightGallery from 'lightgallery';

// Plugins
import lgThumbnail from 'lightgallery/plugins/thumbnail';
import lgZoom from 'lightgallery/plugins/zoom';

lightGallery(document.getElementById('lightgallery'), {
  plugins: [lgZoom, lgThumbnail]
});

You should have a dist/js/gallery.min.js correctly bundled.

---

Please note that this is not strictly related to Bricks or WordPress, more to the library itself, so if this doesn't work for you, I would advise you to read their documentation and refer to their developers.

[ratm2]

It works! You are my savior! Thank you very much! 🤗

I'm not pro and started doing web development recently for a personal project. Therefore, many things are difficult... 🤕 And your bricks theme makes this process easier! 👍

What was my mistake - I initialized the library from another script, in which I write small pieces of custom code for the site. Because that's what it says in the documentation.

Your own custom scripts should be written in their own files, placed in sub-folders of src/js, that you must then individually include in scripts.js.

I created a script theme.js in src/js/components and import it to scripts.js

import './components/theme';

But with this library, this approach does not work.

You've helped me a lot. Thanks for the theme and support! 👍👍👍

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.