LightGallery v2

[sachinchoolur]

Any questions, ideas, suggestions about lightGallery v2

[CCCullens]

Thanks for creating a version without jQuery. I've been planning my move from Bootstrap 4 to version 5, which dropped jQuery. LightGallery is my last component that required jQuery. I use Typescript and glad to see your move to Typescript as well. I dropped support all versions of IE, thus fine with me to drop any or all versions of IE.
Sorry, but I will not have time to use the beta for a couple of months.

[CCCullens]

Hi Sachin
Thank you for creating and releasing LightGallery, and continuing to enhance it. It is powerful, fast and straightforward to use. I've never sold my app that uses Lightgallery, I may in the future. I just purchased your lightGallery Organization License to thank you for all your hard work.

Have a great day!

[sachinchoolur]

Thank you so much for your support.

[niklasp]

I am also happy for the new release and consider supporting it / buying an OEM license. Help us please understand the difference between lightgallery.js please? Will that be replaced by lightGallery v2?

Also as feature requests I would love to see options to import only needed styles from scss directly. Like only the transition I want to use, only the styles from the plugins I really need and so one

[sachinchoolur]

Hey @niklasp ,
Thank you for the feedback. Yes, lightgallery.js will be replaced with lightGallery v2.

Also as feature requests I would love to see options to import only needed styles from scss directly. Like only the transition I want to use, only the styles from the plugins I really need and so one

This is already on my to-do list. I will make the changes before the public release.

[sachinchoolur]

Separated plugins styles from the main stylesheet. - http://sachinchoolur.github.io/lightGallery/v2/docs/getting-started/#include-css-and-javascript-files

Thank you for your patience.

[niklasp]

Cool! How is the update going? Can we test it?

[sachinchoolur]

Yes, beta version is already available on npm - https://www.npmjs.com/package/lightgallery/v/2.0.0-beta.3

[catsmeatman]

Thank's for v2 without jQuery! LightGallery v2 is excellent replacement FancyBox

[sachinchoolur]

Thank you :)

[bangank36]

Thanks for the major updates, my question is it hard to implement scroll zoom on desktop slide? I would like to implement it myself if you do not have near plan for adding it

[sachinchoolur]

Hey @bangank36,
It won't be hard to implement. But I've enough items on my to-do list for the next 3-4 weeks. So if you can wait for another 3-4 weeks, I'll try to implement it.

It should be the same as pinch-to-zoom option. The only thing is you need to set setPageCords() based on mouse coordinates before calling call the zoomImage() method.

[bangank36]

3-4 weeks sound great! I'll keep watching, thanks so much

[antonio-goncalves-unp]

Hi, thanks for the library

On the demo of v2 when I click on fullscreen the fullscreen is applied to the webpage and not the photo itself

I was expecting to see the fullscreen applied to the photo, is the current behavior (webpage fullscreen instead of photo) a bug?

Screen.Recording.2021-04-29.at.11.42.20.mov

[sachinchoolur]

Hey @antonio-goncalves,
Thank you for the feedback. This is not a bug. But browser fullscreen doesn't work really well with the inline gallery. I'll update the demo.
The last icon on the toolbar is for expanding the gallery to fullscreen view.

[antonio-goncalves-unp]

Thanks for the reply,

I would suggest you when clicking on the browser fullscreen button activating also the fullscreen view

[CCCullens]

This gets to what does fullscreen mean to an app user

1. Fullscreen means fill the browser window
2. Fullscreen means fill the device windows
   Both of these roles are needed. For inline galleries, I think many people would want "fullscreen" to fill the browser window.

Maybe this means there is a fullwindow and fullscreen?

[sachinchoolur]

Let's keep it as it is now. If we get more feedback on this, we can make the necessary changes.

[mlesin]

Is it possible to enter maximized mode when fullscreen button is pressed?
Is there some event for this?

[mshb9999]

Will you support infinite scrolling? Let's say I have 1,000 images. When I load the page, I only load first 50 images, and when I scroll down, the the library downloads another 10 and so on.

[sachinchoolur]

Infinite scrolling with lightGallery can be easily done by using destroy public method.
After appending new thumbnails, you need to destroy and re-initiate lightGallery.

lg.destroy();
setTimeout(() => {
    lg = lightGallery($infiniteScrollGallery, {
        speed: 500,
    });
}, 500);

I've created a basic demo - http://sachinchoolur.github.io/lightGallery/v2/demos/infinite-scrolling/

Please let me know if you have any questions

[mshb9999]

I am sorry, I looked but didn't notice. Last question: does it support masonry view? I see you have an example of Thumbnails but it still groups things by rows, where I was looking for images having different width/height? And I take this is possible: having both images and videos with infinite scrolling?

…

On Wed, May 5, 2021 at 3:04 AM Sachin N ***@***.***> wrote: Infinite scrolling with lightGallery can be easily done by using destroy public method. After appending new thumbnails, you need to destroy and re-initiate lightGallery. lg.destroy();setTimeout(() => { lg = lightGallery($infiniteScrollGallery, { speed: 500, });}, 500); I've created a basic demo - http://sachinchoolur.github.io/lightGallery/v2/demos/infinite-scrolling/ Please let me know if you have any questions — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#988 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AOET7JI64Y7JDONKCDHMVQTTMDUWDANCNFSM43HZWY7A> .

[sachinchoolur]

Yes, it supports masonry as well. The second demo on the thumbnails page uses masonry - http://sachinchoolur.github.io/lightGallery/v2/demos/thumbnails/#static-thumbnails

And yes, both images and videos works infinite scrolling :)

[mshb9999]

Oh wow, I need to do better with scrolling.
Thank you, I don't think I've seen such a full-featured gallery script.

I am impressed, you've got yourself a customer!

[sachinchoolur]

Thank you so much 😊

[hycday]

@sachinchoolur
sorry to bump this one from nowhere, but how to achieve same masonry result as in https://www.lightgalleryjs.com/demos/thumbnails/#static-thumbnails ? any plugin needed or particular option/parameter to setup ? I couldn't find any info except here #612 where it says we can use https://masonry.desandro.com/layout.html but without saying how to implement it...
help would be greatly appreciated ! thanks

[mirceanu]

Anybody solved the masonry issue yet ?

[CCCullens]

My view on the need to support IE 11. While I don't know the effort required to support IE in LG, I don't think IE support is needed. IE market is tiny (1%). Yesterday, WordPress (40% of websites) announced they are dropping IE support for in their July v5.8 release.
https://wordpress.org/news/2021/05/dropping-support-for-internet-explorer-11/

Simply put, if dropping IE helps development, performance or usage of LG v2. Consider dropping all IE support.

[gianlucadelgobbo]

Ciao, your library is great,
but I'm unable to load dynamically a video, what is wrong?

    var dynamicEl = [{
        src: "https://avnode.net/warehouse/videos/2020/06/7894edd6-9eb2-422f-be0e-47c60d1bbc61_mp4.mp4", 
        poster: "https://avnode.net/warehouse/videos_previews/2020/…/7894edd6-9eb2-422f-be0e-47c60d1bbc61_mp4_png.jpg", 
        thumb: "https://avnode.net/warehouse/videos_previews/2020/…/7894edd6-9eb2-422f-be0e-47c60d1bbc61_mp4_png.jpg", 
        subHtml: "<h4>No Borders Backstage</h4>"
    }];
    const dynamicGallery = lightGallery($dynamicGallery, {
        dynamic: true,
        plugins: [
          lgZoom,
          lgVideo,
          lgThumbnail
        ],
        dynamicEl: dynamicEl
    });

[sachinchoolur]

Hey @gianlucadelgobbo ,

For displaying HTML5 video slides, the dynamicEl structure is a bit different from image other slides.
You need to construct video source in the following way.

const dynamicEl = [{
        video: {"source": [{"src":"https://avnode.net/warehouse/videos/2020/06/7894edd6-9eb2-422f-be0e-47c60d1bbc61_mp4.mp4", "type":"video/mp4"}], "attributes": {"preload": false, "controls": true}},
        poster: "https://avnode.net/warehouse/videos_previews/2020/…/7894edd6-9eb2-422f-be0e-47c60d1bbc61_mp4_png.jpg", 
        thumb: "https://avnode.net/warehouse/videos_previews/2020/…/7894edd6-9eb2-422f-be0e-47c60d1bbc61_mp4_png.jpg", 
        subHtml: "<h4>No Borders Backstage</h4>"
    }];

CodePen: https://codepen.io/sachinchoolur/pen/VwpYagE
Demo: https://www.lightgalleryjs.com/demos/video-gallery/

Let me know if you have any questions.

[gianlucadelgobbo]

Perfect, thank you!!!

[Romancho]

Thanks for great job. Your library is the "things that must have". In v2 I have one strange issue. If I include library in <head> (before markup) and call function after <footer>, I get Cannot read property 'focus' of null at LightGallery.openGallery at this.outer.get().focus();

[Romancho]

Oh, thanks a lot. Yes, look like the same. Waiting for merge))

[niklasp]

there is also a workaround by setting container: document.body when initializing

[Romancho]

Thank you for help)

[sachinchoolur]

@niklasp ,
Thanks for the help. I can confirm the issue. This happens only when the script tag is placed before the body tag. I'll merge the PR ASAP

@Romancho, Please use pass container: document.body for now

    document.addEventListener("DOMContentLoaded", function(event) {
        lightGallery(document.getElementById('gallery-videos-demo'), {
            container: document.body
        });
    })

[Romancho]

UPD: Fixed in 2.1.1 release.

[martinX308]

I like your library! Do you have any recommendations on how to make it work for m3u8 files?

[sachinchoolur]

Hey @martinX308,

Sorry, I missed your question.
Could you please try adding type="application/x-mpegURL" as mentioned in this answer

Docs - https://www.lightgalleryjs.com/demos/video-gallery/

[jaccino]

After looking the v1 site was inactive and the forum closed I'm glad to see this new version and I have just purchased a personal license. I'm currently testing so many new features and looking the best way to migrate my personal site from v1 to this one. Any hints about this?
Thanks for such a great library,
NK.

[jaccino]

Well, instead of migrating my v1 site I'm making a fresh setup and changing to masonry layout. It's going mostly well but I'm stuck in two issues: I have not found something as the old v1 'showThumbByDefault' setting, so I'm unable to get thumbnails hidden by default and have to use the toggle button each time. About the other issue, although mousewheel is set to true, it doesn't change slides, while it goes fine in the v1 site. Surely I'm missing something...

[sachinchoolur]

1 - showThumbByDefault has been removed in v2. But, I'll consider adding it if we get more requests.
2- Works fine for me. Which browser do you use?

[jaccino]

1 - Without showThumbByDefault option, is there some other way to get thumbnails hidden by default? Also, in v1 I have captions from data-sub-html always shown along with each slide (I'm not sure about how I did it, really) and when I toggle thumbnails up, both caption and thumbnails move up. In v2, however, it looks as caption and thumbnails form a single piece and I have no way to show one without the other.
2 - Firefox 90.0.1, Mac OS 10.15.7. In fact I'm accessing both sites in local, on separated tabs of the same browser.

[sachinchoolur]

1 - You can use setting {appendSubHtmlTo: '.lg-item'} to move captions along with the slide. And yes, captions and thumbnails are in the same block. but, they can work without each other. In V2, to include some other features such as allowMediaOverlap some adjustments have been done in the markup. I'll try to improve this

[jaccino]

1 - Thanks for the tip! I have made an attempt and yes, it shows the captions under the image (as it was usual in v1) but only if thumbnails are set to false (that is, no toggle button, either). If thumbnails are true but hidden, captions do not appear. I have been playing a bit with the various options but in the end I have been unable to replicate the way v1 works:

• Caption is displayed along the image.
• Thumbnails are active but hidden by default.
• Toggling thumbnails visible, both, thumbnails and caption are displayed together (maybe overlapping the image).

On the other hand, I see that allowMediaOverlap option is a great feature if avoiding that overlapping (then shrinking the image) is preferred or required for some reason. Just I don't know how to conciliate both modes.
2 - To discard any interference within my v2 site I have checked the thumbnails demo page and mousewheel does not change slides, either.

[muellerj]

I was using showThumbByDefault in v1 as well and would love to see that ported. Otherwise, v2 seems a huge improvement, especially on mobile.

Thanks for nice work!