Anyone have any experience using LightGallery?

[Under S.]

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 :

1. Streamline the options in the lightbox down to only 3 or 4, by eliminating social media sharing, or a couple of those zoom icons.
2. 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 :

<script type="text/javascript">

    $(document).ready(function() {

        $('#lg').lightGallery();

   selector: '.item'

    });

</script>

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.

[BenPleysier]

1. Have a look at this answer https://dfactory.eu/support/topic/how-to-disable-social-sharing/

2. Have a look at https://dfactory.eu/support/topic/background-color/

For more on LightGallery help got to https://dfactory.eu/support/

For the PS: see what the error message says:

[Under S.]

BenPleysier  wrote

1. Have a look at this answer https://dfactory.eu/support/topic/how-to-disable-social-sharing/

That should work, but simply adding display:none to #lg-share would be a last resort solution for me, this feels it should be a toggle (all those icons should). And as luck would have it, the author seems to suggest he eventually did just that, unless I misread his final contribution to the thread, dated almost half a year ago. He doesn't name the option, though. Could they all have toggles?

BenPleysier  wrote

2. Have a look at https://dfactory.eu/support/topic/background-color/

Looks like I'm not escaping hacking that css file, am I?
For this, however, it feels like it makes more sense. And I'll use a rgba value to achieve transparency. I can't imagine why that wouldn't work. Thanks.

BenPleysier  wrote

For the PS: see what the error message says:

That seems to be straight HTML, does the same advice hold for .js?

[BenPleysier]

The original CSS should not be touched. Any style rule changes should be made in an overriding style sheet, i.e. a style sheet that is loaded after the original. This should answer both of the first two points.

Sorry, I skipped over the .js bit. In JavaScript

'abc' === "abc"

Single quotes seem to be more popular. Golden rule, do not mix the two, this could become very confusing.

[Under S.]

BenPleysier  wrote

The original CSS should not be touched. Any style rule changes should be made in an overriding style sheet, i.e. a style sheet that is loaded after the original. This should answer both of the first two points.

Sorry, I skipped over the .js bit. In JavaScript

'abc' === "abc"

Single quotes seem to be more popular. Golden rule, do not mix the two, this could become very confusing.

Noted, and noted. Thanks.

With regards to removing those options from the lightbox view, though, I apparently chose the wrong icons to use as an examples because I'm no closer to understanding how to remove the other ones.

It's hard for me to imagine there aren't toggles to turn these options on or off. In fact, shouldn't there be a master list of toggles somewhere that could confirm or dispel that theory? I probably shouldn't be hacking the css to simply "display:none" if there's a toggle that skips the feature entirely (and more elegantly). Especially since the author himself says (in the thread you linked me to) that he made the share button an option (toggle) after the fact.

Just so we're clear, I'm talking about the row of icons at the top righthand side of the screen in the lightbox view. 3 different zoom options, share button, download button, etc... it's too much and it overflows on portrait-oriented mobile screens. I want to reduce that row to 2 or 3 options max, and I'm not sure simply turning the other ones invisible via "display:none" is the most elegant way to go about it. I'd still be loading stuff the site will never be using, right?

[osgood_]

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?

Look at the example on this 'pen' link below -  click on 'settings' and choose 'javascript'. See all those js files linked to the page - start using the X next to the files to disable them (NOT the first js link as that is the main js file) and then check out the icons in the top right corner of the lightbox. You can get rid of all of them apart from the close button and download button.

lightgallery.js

[Under S.]

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?

[osgood_ · Accepted solution]

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!!!

[Under S.]

, osgood_  wrote

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

Okay, let me give this explanation another wack.
I am currently linking to a version of the script that contains ALL the modules you listed. It's called lightgallery-all.js.

My goal is to remove options inside the lightbox view (ie, the row of icons at the top of the screen) preferably in such a way that it doesn't just 'hide' them (like adding "display:none" would do) but actually removes the functionality behind it, since there's no point including it.

So I asked if there was a toggle to turn those features off elegantly.
Your proposed solution was simple : just don't link to those .js modules.

But I already wasn't... I was linking to lightgallery-all.js.
So I then asked you to confirm the hypothesis that the most elegant way to remove the options I don't want is to STOP using lightgallery-all.js and just link to the individual modules I want.

"Yes" would have likely ended the conversation, but it seems you still weren't quite sure what I was looking to achieve (prompting this explanation).

So clearly, the answer to my last reply is "yes".
I will therefore unlink lightgallery-all.js and manually link the individual modules, at your suggestion. You've made it clear that this is the most elegant way to unclutter the row of options AND not bloat the code with what it doesn't need.

So thank you, that's very useful information. I should be able to take it from here.

***

Originally, I thought maybe there was a way to keep linking to the single catch-all file, and have "toggles" in the.js call that turns selected modules off. That way, I can unclutter the <head> by linking to just 1 file for the lightbox.

Back in my day, we did everything we could to limit the calls to the server... but I guess that's not so much a concern in 2019, if I can't just link to lightgallery-all.js and toggle modules off in such a way that only the relevant portions of code are imported from said file.

(Wait a minute... can't I just link to the composite file containing all the modules and just delete or comment out the portions of code I don't want? Won't that be exactly like linking only to specific modules?)

[osgood_]

I agree with you. It probably would have been less confusing to have had the ability to toggle the parts not needed instead of having to link to other files if you need them, all gets a bit messy in my opinion. Still like most other aspects of web development these days it wouldnt be quite right unless you over complicate the procedure

When you say link to the  composite file do you mean the catch alll js file. I guess if you are familiar with javascript you could comment out the code which controls the various add ons. Im not familar with what comes in the download package or js file itself as lve never used this particular lightbox. Im just reading the instructions and trying to piece together the workflow needed to get it up and running.

It could also be that the developer decided to break up the files so only the js that is needed is delivered, just toggling out sections would still mean a larger than strictly necessary file is called from the server, so probably sense amongst the perceived madness.Although lm not sure calling  a few extra kbs makes much difference these days. Would need to check how many extra kbs the optiion actually adds to the file and make a decision based on that

Good luck with the deployment. If you need any more help post back.

[Under S.]

osgood_  wrote

When you say link to the  composite file do you mean the catch alll js file. I guess if you are familiar with javascript you could comment out the code which controls the various add ons.

If you take a look at the actual "lightgallery-all" file, you'll see not only are all the modules in there, but they are clearly separated and identified. I bet if I copy/pasted the contents of all the individual modules into a single file, it would look a lot like lightgallery-all (I haven't compared line by line, just seems logical in hindsight).

So instead of linking to multiple .js files, I can just remove them from the "all" file and link to that. I've tested it, it works, and I barely know any javascript at all (just a designer who likes solving stuff that's not too hard).

However some things, like the download icon (the downward arrow that allows you to download a local copy of the image being displayed), remain even if you take all the extra modules out. So I'm assuming that one has a toggle that I haven't yet found (if you beat me to it, please share). Same with the left-right arrows (to cycle through images). For whatever reason, when interacting with my native stylesheet, those left-right arrows are top-justified in the viewport. The left one is still on the left, and the right on the right, but they're not vertically centered.

(Those are the 3 icons I'd like to turn off next, at least until I solve the left/right arrow position issue. Then I can turn those 2 back on.)

[osgood_]

https://forums.adobe.com/people/Under+S.  wrote

However some things, like the download icon (the downward arrow that allows you to download a local copy of the image being displayed), remain even if you take all the extra modules out. So I'm assuming that one has a toggle that I haven't yet found (if you beat me to it, please share). Same with the left-right arrows (to cycle through images). For whatever reason, when interacting with my native stylesheet, those left-right arrows are top-justified in the viewport. The left one is still on the left, and the right on the right, but they're not vertically centered.

(Those are the 3 icons I'd like to turn off next, at least until I solve the left/right arrow position issue. Then I can turn those 2 back on.)

I have no idea if the download icon has an option to toggle BUT if it doesnt just find the below in the js file:

this.s.backdropDuration),this.s.download&&this.$outer.find(".lg-toolbar").append('<a id="lg-download" target="_blank" download class="lg-download lg-icon"></a>')

and remove this code below.

<a id="lg-download" target="_blank" download class="lg-download lg-icon"></a>

So you are left with:

this.s.backdropDuration),this.s.download&&this.$outer.find(".lg-toolbar").append('')

If the left and right arrow icons are NOT vertcially centered when you have your native stylesheet hooked up to the page then I would suggest to look for what is a causing the conflict in your native stylsheet rather than alter the lightgallery css file.