How can I add more LightGallery plugins (lgZoom, lgAutoplay, lgComment, lgFullscreen , lgHash, lgPager, lgRotate, lgShare, lgThumbnail, lgVideo, lgMediumZoom?

[javierfs]

I would like to show more options when I click on an image such as lgFullscreen or lgMediumZoom.

To do so, I tried to figure out which options of the theme are available in this Theme:

> # [email protected] https://github.com/sachinchoolur/lightgallery.js
> # [email protected] https://github.com/sachinchoolur/lg-thumbnail.js
> # [email protected] https://github.com/sachinchoolur/lg-zoom.js

In order to add new plugins (for example, full screen) I added the following lines:

{{- $source := $cdn.lightgalleryFullScreen | default "lib/lightgallery/lg-fullscreen.min.js" -}}
{{- dict "Source" $source "Fingerprint" $fingerprint | dict "Scratch" .Scratch "Data" | partial "scratch/script.html" -}}

in layouts/partials/assets.html:

{{- /* lightgallery.js */ -}}
{{- if $params.lightgallery -}}
    
    {{- $source := $cdn.lightgalleryCSS | default "lib/lightgallery/lightgallery.min.css" -}}
    {{- dict "Source" $source "Fingerprint" $fingerprint | dict "Scratch" .Scratch "Data" | partial "scratch/style.html" -}}
    
    {{- $source := $cdn.lightgalleryJS | default "lib/lightgallery/lightgallery.min.js" -}}
    {{- dict "Source" $source "Fingerprint" $fingerprint | dict "Scratch" .Scratch "Data" | partial "scratch/script.html" -}}
    
    {{- $source := $cdn.lightgalleryThumbnailJS | default "lib/lightgallery/lg-thumbnail.min.js" -}}
    {{- dict "Source" $source "Fingerprint" $fingerprint | dict "Scratch" .Scratch "Data" | partial "scratch/script.html" -}}
    
    {{- $source := $cdn.lightgalleryZoomJS | default "lib/lightgallery/lg-zoom.min.js" -}}
    {{- dict "Source" $source "Fingerprint" $fingerprint | dict "Scratch" .Scratch "Data" | partial "scratch/script.html" -}} 
    
    {{- $source := $cdn.lightgalleryFullScreen | default "lib/lightgallery/lg-fullscreen.min.js" -}}
    {{- dict "Source" $source "Fingerprint" $fingerprint | dict "Scratch" .Scratch "Data" | partial "scratch/script.html" -}}
   
    {{- $config = dict "selector" ".lightgallery" "speed" 400 "hideBarsDelay" 2000 "thumbnail" true "exThumbImage" "data-thumbnail" "thumbWidth" 80 "thumbContHeight" 80 "actualSize" false | dict "lightGallery" | merge $config -}}
{{- end -}}

I added lg-fullscreen.min.js in lib/lightgallery/ from https://github.com/sachinchoolur/lg-fullscreen/blob/master/dist/lg-fullscreen.min.js

and I added this line in assets/data/cdn/jsdelivr.yml:

lightgalleryFullScreen: [email protected]/dist/lg-fullscreen.min.js

However when I click on the image, there is no buttom showing up for full screen. Might it bue due to a non-matching versions between scripts? Could anyone help me?

[HEIGE-PCloud]

You need to update the $config variable as well.

The $config variable is a dictionary including all the options for lightgallery. lightgallery will be initialized by calling lightGallery(document.getElementById('content'), $config).

For example, you probably want to change it to

{{- $config = dict "selector" ".lightgallery" "speed" 400 "hideBarsDelay" 2000 "thumbnail" true "exThumbImage" "data-thumbnail" "thumbWidth" 80 "thumbContHeight" 80 "actualSize" false "fullScreen" true | dict "lightGallery" | merge $config -}}

to enable the fullscreen plugin.

Be aware that DoIt theme is still using lightgallery.js 1.x, so you need to pick up the corresponding plugins for them to work correctly.

[javierfs]

Oh Thanks a lot! I spent almost two days on this! I was missing the "fullScreen" option on the config dictionary. Also, I needed to add the correct js script: https://cdn.jsdelivr.net/npm/[email protected]/dist/lg-fullscreen.min.js

[javierfs]

UPDATE: I tried to add the rotate plugin but it didn't work. I did the same process. Now the config looks like:

{{- $config = dict "selector" ".lightgallery" "enableTouch" true "speed" 400 "hideBarsDelay" 2000 "thumbnail" true "exThumbImage" "data-thumbnail" "thumbWidth" 80 "thumbContHeight" 80 "actualSize" false "scale" 0.5 "currentPagerPosition" "right" "fullScreen" true "rotate" true "rotateLeft" true "rotateRight" true "flipHorizontal" true "flipVertical" true| dict "lightGallery" | merge $config -}}

I also tried all the versions 1.x of the lg-rotate.min.js script:

{{- $source := $cdn.lightgalleryRotate | default "lib/lightgallery/lg-rotate.min.js" -}}
{{- dict "Source" $source "Fingerprint" $fingerprint | dict "Scratch" .Scratch "Data" | partial "scratch/script.html" -}}

And also added this line in assets/data/cdn/jsdelivr.yml:

lightgalleryFullScreen: [email protected]/dist/lg-fullscreen.min.js

I got the plugins script from here: https://www.jsdelivr.com/package/npm/lg-rotate?version=1.0.0

Is there any other source where I can get the plugins from? @HEIGE-PCloud

thanks!

[HEIGE-PCloud]

There might be some issue with the plugin itself. I have tried a version from its source repo, which does show up the rotate buttons but with incorrect icons and scale.

Probably the best way is to upgrade to lightgallery v2.x for better plugin support, however I am unsure about its GPL v3 license so I don't plan to do it myself.