lightGallery | A customizable, modular, responsive, lightbox gallery plugin | Widget library

 by   sachinchoolur TypeScript Version: 2.7.2-beta.1 License: Non-SPDX

kandi X-RAY | lightGallery Summary

kandi X-RAY | lightGallery Summary

lightGallery is a TypeScript library typically used in Telecommunications, Media, Media, Entertainment, User Interface, Widget, React applications. lightGallery has no vulnerabilities and it has medium support. However lightGallery has 6 bugs and it has a Non-SPDX License. You can download it from GitHub.

A customizable, modular, responsive, lightbox gallery plugin. No dependencies.\ Available for React.js, Angular, Vue.js, and typescript.

            kandi-support Support

              lightGallery has a medium active ecosystem.
              It has 5843 star(s) with 1266 fork(s). There are 137 watchers for this library.
              There were 2 major release(s) in the last 6 months.
              There are 37 open issues and 1212 have been closed. On average issues are closed in 80 days. There are 1 open pull requests and 0 closed requests.
              It has a neutral sentiment in the developer community.
              The latest version of lightGallery is 2.7.2-beta.1

            kandi-Quality Quality

              lightGallery has 6 bugs (0 blocker, 0 critical, 1 major, 5 minor) and 0 code smells.

            kandi-Security Security

              lightGallery has no vulnerabilities reported, and its dependent libraries have no vulnerabilities reported.
              lightGallery code analysis shows 0 unresolved vulnerabilities.
              There are 0 security hotspots that need review.

            kandi-License License

              lightGallery has a Non-SPDX License.
              Non-SPDX licenses can be open source with a non SPDX compliant license, or non open source licenses, and you need to review them closely before use.

            kandi-Reuse Reuse

              lightGallery releases are available to install and integrate.
              Installation instructions, examples and code snippets are available.

            Top functions reviewed by kandi - BETA

            kandi has reviewed lightGallery and discovered the below as its top functions. This is intended to give you an instant insight into lightGallery implemented functionality, and help decide if they suit your requirements.
            • Build a production build
            • Listen for video playback .
            • Constructs the client environment environment .
            • Initialize a new light plugin .
            • Read project config .
            • Get the additional paths from the baseUrl .
            • Get the thumbnail image URL
            • Creates an instance of light zoom settings .
            • returns a generator
            • Initialize the custom animation .
            Get all kandi verified functions for this library.

            lightGallery Key Features

            No Key Features are available at this moment for lightGallery.

            lightGallery Examples and Code Snippets

            How to use third party plugin in rails 6? Using webpacker
            JavaScriptdot img1Lines of Code : 42dot img1License : Strong Copyleft (CC BY-SA 4.0)
            copy iconCopy
            # Some other previous code
              new webpack.ProvidePlugin({
                $: 'jquery',
                jQuery: 'jquery'
            module.exports = environment
            Open lightgallery.js programmatically
            JavaScriptdot img2Lines of Code : 20dot img2License : Strong Copyleft (CC BY-SA 4.0)
            copy iconCopy
            $("#magic_start").on("click", () => {
                $("#lightgallery a:first-child > img").trigger("click");
            CLICK TO OPEN
            lightGallery doesn't work properly after Ajax call which replaces gallery images
            JavaScriptdot img3Lines of Code : 46dot img3License : Strong Copyleft (CC BY-SA 4.0)
            copy iconCopy
            const settings = {
                    enableDrag: true,
                    onSliderLoad: function(el) {
            Open Lightbox on onload page
            JavaScriptdot img4Lines of Code : 140dot img4License : Strong Copyleft (CC BY-SA 4.0)
            copy iconCopy
                    projects as $crp_project): ?>
                                $coverInfo = CRPHelper::decode2Obj($coverInfo);
                                $meta = CRPHelper::getAttachementMeta($coverInfo->
            Xamarin.Forms HybridWebView do nothing in API 23
            JavaScriptdot img5Lines of Code : 35dot img5License : Strong Copyleft (CC BY-SA 4.0)
            copy iconCopy

            اولین چینی توربو در بازار ایران

            Community Discussions


            How to display single image in slider using loop in Laravel 5.7?
            Asked 2022-Mar-08 at 10:52

            I am trying to display the single image in the slider, but whenever the user will click on this then it's open a popup in data-src="multiple-images-here" where I am running the slider. But the main issue is with the single image display in for loop. It displays all the available images in the loop. Please suggest me the best solution for this.

            Here is my index.blade.php file where I am trying to display the slider using this code.



            Answered 2022-Mar-08 at 10:52

            You can pass ->first() function to get only 1 images, It will show you only the first item from your data in database.



            How to append a dynamic element to an image opened in lightgallery.js
            Asked 2022-Feb-09 at 01:36

            I have a page that show lots of photos which can be opened with lightgallery.js

            I've already made some custom HTML caption which works fine. But now I want to add a label to the image itself. How can I do that?

            I will show an example of what my photos page looks like:

            When you open an image this is what it looks like:

            The left part is a custom HTML caption which I linked with this attribute: data-sub-html.

            Example code of my looped code:



            Answered 2022-Feb-09 at 01:36

            According to the lightgallery docs, you can use the event lgAfterOpen to execute code once the gallery is opened. However, lightgallery makes this slightly difficult as you can't access the image clicked on from this event, but you can access it from the event lgBeforeOpen. With this in mind, I'd accomplish this by doing two things.

            Firstly, add the size as a data attribute of each image:



            Bootstrap 5 + Masonry + Fancybox gallery getting destroyed when uploaded to hosting
            Asked 2021-Oct-16 at 11:49

            I have a problem with using Bootstrap plus Masonry for my layout. Trying it out on my computer, it works perfectly, but when I upload it to GitHub pages or Godaddy hosting, it sometimes gets destroyed like the image I shared. I bought Lightgallery and tried it instead of Fancybox to make the photo gallery, just in case something there was making a problem, but it's the same.

            The problem being Masonry or bootstrap, I can't get rid of bootstrap but could use an alternative to Masonry. My client just needs the Pinterest-like layout.

            It's very frustrating because it works perfectly until it is live. I tried a lot of things but nothing has worked. Thank you for any idea you could give me, and sorry for my bad English.

            Github link:

            edit: Very important detail, it often gets fixed after reloading or resizing the page, but for the first time someone enters there, then it doesn't motivate people to invest more time in the site if it looks that bad.

            gallery destroyed

            gallery destroyed 2



            Answered 2021-Oct-16 at 11:49

            The problem is with Masonry and not Fancybox (or any other lightbox alternative). Looks like it incorrectly calculates height for the container. Since it works after assets have been cached, I guess that your masonry script does all calculations before your CSS is loaded. Therefore top/bottom padding is not taken into account for calculations.



            How do I optimize the code so that I don't have to write a new number every time?
            Asked 2021-Oct-07 at 20:36

            I have js code like this:



            Answered 2021-Oct-07 at 20:35

            You can use a for loop:



            How to make slick slider only target elements as a slide with a certain class
            Asked 2021-Sep-03 at 16:28

            I have a row of images that I would like to turn into a slider using slick slider.

            Each image opens as a lightgallery popup when clicked on it with some custom HTML as caption. The problem is slick slider treats this caption also as a seperate slide.

            My html:



            Answered 2021-Sep-03 at 16:28

            Why don't you simply wrap each item? Because slick gets initiated by adding the parent class and all children are seen as individual slides/items.



            Create a single slide show of images and HTML5 videos using lightGallery
            Asked 2021-Aug-16 at 08:18

            I am trying to create a mixed slider of images and HTML5 videos using lightgallery.js.

            Images are shown in slider while video does not play. It gives this error:

   to load content

            Below are the CSS and JS files included in my project.

            Anyone please suggest me whether I am missing any JS or CSS files or the way of creating a slideshow is not correct.

            JS part:



            Answered 2021-Aug-11 at 08:51

            I assume, the different nesting depths might cause the problem.
            If you check the official Mixed Contents docs, the code should looks like this:

            HTML structure:



            Dynamic path for images in javascript with lightgallery plugin
            Asked 2021-Jul-14 at 10:25

            I'm working on a project in craft cms and I want to make a gallery block that is added as an entry in craft. After doing some research I was trying to do it with dynamic mode of lightgallery plugin. The problem is that in dynamic mode, both sources and thumbnails for the gallery are defined in javascript, as an ex.



            Answered 2021-Jul-14 at 10:25

            You will need to pass the list of images to JavaScript in order to access it in your lightbox initialization function. There are multiple ways to do that. For example, you could use the {% js %} tag to add some JavaScript code to your page that contains the encoded data. Or use the json_encode filter to add the data to your HTML element as a data attribute and use JSON.parse in your JavaScript code to parse the encoded JSON-string.

            Here's a good article on passing data from Twig to JavaScript.



            Lightgallery v2 multiple instances
            Asked 2021-Jun-13 at 13:29

            This library has an example to build a gallery based on element ID:



            Answered 2021-Jun-13 at 13:29

            Just creating IDs on the way:



            URL Processing in Laravel mix doesn't work in postCSS
            Asked 2021-Jun-03 at 11:35

            I have problems with URL Processing in Laravel mix.

            here is my app.css



            Answered 2021-Feb-19 at 20:52

            First, in webpack.mix.js, do you need the SASS line? Because it's causing issues.



            LightGallery Video Plugin won't work (undefined $)
            Asked 2021-Apr-30 at 07:12

            I am currently working on a webpage and tried implementing LightGallery. Although the image galleries work totally fine for me the videos won't seem to play. When I check the console the following error message is displayed upon loading the site:



            Answered 2021-Apr-30 at 07:12

            Here's a working JSFiddle. Here's what I did, working through the installation page I referenced yesterday:

            1. Starting in the "Include CSS and Javascript files" section, they say to include lightgallery.css, though they don't give a link for it. I searched and found a CDN link, and added that ;

            2. Added a CDN link to the latest jQuery;

            3. Copied and added the 'jsdelivr collection' link for the Lightgallery JS;

            4. Copied the JS they show to initiate the plugin;

            5. Copied the relevant part of your HTML snippet - just the lightgallery div, with some minor updates:

              • Neither video-poster1.jpg nor img/thumb1.jpg exist here of course, so I replaced them with placeholder images;
              • I get "Video unavailable" for that video, so I randomly picked another;

            This works fine - the placeholder thumbnail is shown, when I click it the video opens against a black background, and plays if I click play. Here's the code:


            Community Discussions, Code Snippets contain sources that include Stack Exchange Network


            No vulnerabilities reported

            Install lightGallery

            lightGallery is available on NPM, Yarn, Bower, CDNs, and GitHub. You can use any of the following method to download lightGallery. First of all, include lightgallery.css in the <head> of the document. If you want include any lightGallery plugin such as thumbnails or zoom, you need to include respective css files as well. Alternatively you can include lightgallery-bundle.css which contains lightGallery and all plugin styles instead of separate stylesheets. If you like you can also import scss files instead of css files from the scss folder. Then include lightgallery.umd.js into your document. If you want to include any lightgallery plugin you can include it after lightgallery.umd.js. lightGallery supports AMD, CommonJS and ES6 modules too. lightgallery does not force you to use any kind of markup. you can use whatever markup you want. Here can find detailed examples of different kinds of markups. If you know the original size of the media, you can pass it via data-lg-size="${width}-${height}" attribute for the initial zoom animation. But, this is completely optional. Finally, you need to initiate the gallery by adding the following code. You'll receive a license key via email one you purchase a license More info. As shown above, you need to pass the plugins via settings if you want to use any lightGallery plugins. If you are including lightGallery files via script tag, please use the same plugins names as follows. lgZoom, lgAutoplay, lgComment, lgFullscreen , lgHash, lgPager, lgRotate, lgShare, lgThumbnail, lgVideo, lgMediumZoom.
            NPM - NPM is a package manager for the JavaScript programming language. You can install lightgallery using the following command npm install lightgallery
            YARN - Yarn is another popular package manager for the JavaScript programming language. If you prefer you can use Yarn instead of NPM yarn add lightgallery
            Bower - You can find lightGallery on Bower package manager as well bower install lightgallery --save
            GitHub - You can also directly download lightgallery from GitHub
            CDN - If you prefer to use a CDN, you can load files via jsdelivr, cdnjs or unpkg


            Getting startedSettingsReactVue.jsAngularDemosCodePen
            Find more information at:

            Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from over 650 million Knowledge Items

            Find more libraries
          • npm

            npm i lightgallery

          • CLONE
          • HTTPS


          • CLI

            gh repo clone sachinchoolur/lightGallery

          • sshUrl


          • Stay Updated

            Subscribe to our newsletter for trending solutions and developer bootcamps

            Agree to Sign up and Terms & Conditions

            Share this Page

            share link