Is it possible to use lightGallery for jQuery?

[kukrik]

Hello, dear folks!

I might have a silly question?! Unfortunately, I am still using another framework that expects minimal interaction with jQuery. I'm gradually transitioning to full JavaScript. If I create my JavaScript plugin for my framework, I'll wrap it in a jQuery wrapper so that it can still communicate with the framework.

I really like the JavaScript lightGallery, let it stay that way! Here's a quick question: can it be wrapped with a jQuery wrapper? For example, I would like to do something like $("#lightgallery").lightGallery(); or $("#lightgallery").lightGallery({options}); No need to think further :)!

I apologize in advance if my question is off-topic.

Thanks in advance!

[bytesandbots3]

@kukrik , Regarding your question lightGallery is a standalone JavaScript library and does not have a built-in jQuery wrapper. It is designed to be used directly with JavaScript. However, if you want to use LG with jQuery, you can create a custom jQuery plugin that wraps the lightGallery functionality. This way, you can use jQuery syntax to initialize and interact with lightGallery.

Here's an example of how you can create a custom jQuery plugin for LG:

        (function ($) {
            $.fn.lightGallery = function (options) {
                this.each(function () {
                    lightGallery(this, options);
                });
                return this;
            };
        })(jQuery);

        $('#animated-thumbnails-gallery').lightGallery({
            pager: false,
            hash: false,
            mode: 'lg-zoom-in-out',
            selector: '.gallery-item',
            addClass: 'lightGallery-white-theme',
            plugins: [
                lgZoom,
                lgAutoplay,
                lgFullscreen,
                lgPager,
                lgRotate,
                lgShare,
                lgThumbnail,
                lgVideo,
            ],
            mobileSettings: {
                controls: false,
                showCloseIcon: false,
                download: false,
                rotate: false,
            },
        });

With this custom jQuery plugin, you can now use
$("#lightgallery").lightGallery(); or $("#lightgallery").lightGallery({options});
to initialize lightGallery and pass any options you want.

I hope this helps!

[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.

[kukrik]

Thanks! I saved this suggestion to my computer. I have a few projects to finish. If necessary, I can reopen this ticket!

Thanks again!