Lightgallery: Adding custom buttons

[tpaksu]

Hello,

Can we add custom buttons to the top controls bar and then binding callbacks to the new buttons in this gallery? For example, I want pagination in my gallery and I want to display page links on the button bar. When I click one of them, I'll make a new dynamic request and show a new lightGallery with the new information.

[mdod]

You can add buttons in the lightgallery.js file here

[tpaksu]

Modifying the core would be a problem when updating the script. I'll try to create a plugin.

[ctf0]

@tpaksu maybe u can instead use something like onAfterOpen.lg to add the new button after the gallery opens ?

[skar3]

A plugin will be very helpful

[rochapablo]

I've found a good way to create your own plugin without alter the core.

(function($, window, document, undefined) {

    'use strict';

    // ...

    $.fn.lightGallery.modules.MyCode = MyCode;

})(jQuery, window, document);

In my case, I had add a new tab at the bottom, close to thumbs.

[skakraze5]

Here's an example of what @ctf0 suggested related to a feature I wanted with adding caption a toggle. I don't think it will fully help with everything original problem stated. But it was at least a way I found to add a custom items to the toolbar without having to make a full plugin.

$lg = $(strSelector);
$lg.lightGallery(oOptions);
$lg.on('onAfterOpen.lg',function(event){
   $('.lg-toolbar').append('<a class=\"lg-icon\" href=\"javascript:toggleCaption()\">CC</a>');
});

function toggleCaption() {
   var curVal = $('.lg-sub-html').css('visibility');
   $('.lg-sub-html').css('visibility', curVal == 'hidden' ? 'visible' : 'hidden');
}

[tpaksu]

@rochapablo I've done the same by creating a plugin. It just appends like @skakraze5 pointed out. I think it should be an official plugin.

[sachinchoolur]

Hi Guys,
Here is the documentation for creating lightGallery plugin.
Also, you can refer any of the simple existing lightGallery plugins such as fullscreen or autoplay

Sorry for the delayed response :)

[xmon]

Hi, here a very basic plugin example ;)