Anyone have any experience using LightGallery?

Question

Hi,Designer posing as a coder here. A few months back, I was looking for a bare-bones lightbox script to zoom into various items in a gallery. Nancy OShea recommended a list of mobile-responsive solutions, and I'm finally getting around to installing one of them, which I'd bookmarked as my favorite; LightGallery.It's available in .js or jQuery flavors (as redundant as that sounds to my inexperienced ears) so I went with the latter, assuming jQuery adds enhancements of some sort. On the surface, this thing looks like it can do anything. Very modular, more than I need. So for a first run, I kept it simple by linking to lightgallery.css and lightgallery-all.js (rather than individual .js modules, also offered).And it appears to work as advertised right out of the box : swipes, animations, all there.The hard part (for me, as a designer) will be the customizing, as I feel the documentation was written for regular Github-level coders who can fill in most blanks. (Or maybe that's just what I tell myself to avoid facing how dumb I actually feel when I try customizing this thing.)Let's say I want to :Streamline the options in the lightbox down to only 3 or 4, by eliminating social media sharing, or a couple of those zoom icons.Make that lightbox background layer less opaque (it appears to be 100% black on my screen).What would be the syntax for that?I figure those are basic enough that there would be existing toggles for them.And I believe they're all located HERE, right? (Or do I even have that wrong?)Here's how I'm calling the code :I believe the customizing happens there, but I might need some help with the first two.(I'm fairly confident I can take it from there, once I see this specific syntax.)Thanks!PS: While I'm here, is it better (in 2019) to use single or double quotes for things like class or ID names in .js? I'm using single in my example, and not even sure why.

osgood_ · Accepted Answer

Have you got any of the js files below in the download package. It seems on the example page all those icons in the top right corner have been isolated into their own js files.
lg-fullscreen.js
lg-thumbnail.js
lg-video.js
lg-autoplay.js
lg-share.js
lg-zoom.js"
lg-hash.js"
lg-pager.js

You must have them connected to the page?

As mentioned in the OP, I am not linking to those individual modules. To keep things simple, I am linking to lightgallery-all.js (or lightgallery-all.min.js) which I assumed contained all of them.

Are you suggesting that this is where I erred, if my intention is not toggle off some of those lightbox options for the end user? In other words, that by linking to all of them via lightgallery-all, I am actually "toggling" them all on?

So if I stop linking to the catch-all file and instead link to the individual modules, this "toggles off" the modules I'm not linking to?

Is that how the author expected people to toggle things on or off? By just not linking to them?

https://forums.adobe.com/people/Under+S. wrote
As mentioned in the OP, I am not linking to those individual modules. To keep things simple, I am linking to lightgallery-all.js (or lightgallery-all.min.js) which I assumed contained all of them.
Are you suggesting that this is where I erred, if my intention is not toggle off some of those lightbox options for the end user? In other words, that by linking to all of them via lightgallery-all, I am actually "toggling" them all on?
So if I stop linking to the catch-all file and instead link to the individual modules, this "toggles off" the modules I'm not linking to?
Is that how the author expected people to toggle things on or off? By just not linking to them?

What exactly do you want - a minimal version of the lightbox?

If so go to the link below and grab the last js file link - lightgallery.min.js - and hook it up to your page:

lightgallery - cdnjs.com - The best FOSS CDN for web related libraries to speed up your websites!

That gives you a bare-bones version without all the other fluff - shares, zooms, thumbnails etc. If you want to add any of those options you have to do so by individual plugin js files linked to the page.

The lightbox-all.min.js file comes complete with all of those as default.

EDITED:

It's NOT hugely clear what you need to do. The documentation is quite frankly crap (as usual) aimed at geeks and written by a geek who mostly use f***king node package manager to install a simple <div>

So I'm making it clear for all you mortals because I understand you, where geeks dont.

What I wrote above is exactly what you do to get the minimum light gallery lightbox working. Then If you want to add the share crap etc you have to get the shares module and link it to the page:

lg-share - cdnjs.com - The best FOSS CDN for web related libraries to speed up your websites!

You then evoke the shares module by adding it to the lightGallery function which is called on page load.

$(document).ready(function() {

$("#lightgallery").lightGallery();

share: 'true'

});

DONT FORGET YOU NEED TO BUY A LICENSE FOR COMMERCIAL USE!!!

So I'm making it clear for all you mortals because I understand you, where geeks dont.What I wrote above is exactly what you do to get the minimum light gallery lightbox working. Then If you want to add the share crap etc you have to get the shares module and link it to the page:lg-share - cdnjs.com - The best FOSS CDN for web related libraries to speed up your websites!You then evoke the shares module by adding it to the lightGallery function which is called on page load.$(document).ready(function() {$("#lightgallery").lightGallery();share: 'true'});DONT FORGET YOU NEED TO BUY A LICENSE FOR COMMERCIAL USE!!!