sachinchoolur

sachinchoolur

Full-Time Open-Sourcerer.

Member Since 7 years ago

Bangalore

Experience Points
647
follower
Lessons Completed
9
follow
Lessons Completed
353
stars
Best Reply Awards
41
repos

1137 contributions in the last year

Pinned
⚡ A customizable, modular, responsive, lightbox gallery plugin.
⚡ JQuery lightSlider is a lightweight responsive Content slider with carousel thumbnails navigation
⚡ Automatically finds jQuery methods from existing projects and generates vanilla js alternatives.
⚡ A modern, electron and nodejs based image viewer for Mac, Windows and Linux.
⚡ An angularjs directive to copy text to clipboard without using flash
⚡ TinyEvents is a tiny event utility library for modern browsers(IE 11+). Supports jQuery-like syntax. Just 1 kb gzipped.
Activity
Jan
14
1 week ago
Activity icon
issue

sachinchoolur issue sachinchoolur/lightGallery

sachinchoolur
sachinchoolur

When I click on the previous button on my mobile, the gallery closes but I am redirected to the second last page (instead of last page)

Hi,

When I click on the previous button on my mobile, the gallery closes but I am redirected to the second last page (instead of last page)

Steps to reproduce

* On mobile go to https://www.google.com/
* Search for lightGallery
* Click on https://www.lightgalleryjs.com/
* Click on an image in the gallery to open the light box
* Click on the previous button of your mobile
KO ->I am not redirected to the last page (https://www.lightgalleryjs.com/) but to the second last page (google search)
Expected -> The light box closes and I stay on the last page (https://www.lightgalleryjs.com/)

Environment

  • Google chrome
  • Android
  • lightGallery version 2.1
Activity icon
issue

sachinchoolur issue comment sachinchoolur/lightGallery

sachinchoolur
sachinchoolur

When I click on the previous button on my mobile, the gallery closes but I am redirected to the second last page (instead of last page)

Hi,

When I click on the previous button on my mobile, the gallery closes but I am redirected to the second last page (instead of last page)

Steps to reproduce

* On mobile go to https://www.google.com/
* Search for lightGallery
* Click on https://www.lightgalleryjs.com/
* Click on an image in the gallery to open the light box
* Click on the previous button of your mobile
KO ->I am not redirected to the last page (https://www.lightgalleryjs.com/) but to the second last page (google search)
Expected -> The light box closes and I stay on the last page (https://www.lightgalleryjs.com/)

Environment

  • Google chrome
  • Android
  • lightGallery version 2.1
sachinchoolur
sachinchoolur

@VoltolRL,

That is how the hash plugin works currently. It doesn't modify the browser history. But, we've already got a few feature request for the same and will be implementing it soon

Closing this issue as duplicate https://github.com/sachinchoolur/lightGallery/issues/1014

Jan
11
1 week ago
Activity icon
issue

sachinchoolur issue comment sachinchoolur/lightGallery

sachinchoolur
sachinchoolur

Drop in image quality in full size image

Hi

There seems to be a bug displaying full resolution images. The image is really soft on actual size or zoomed to 1:1, especially when the viewport is smaller than the image.

The size (calculated by 3dtransform?) is off by one to two pixels and this causes a noticable drop in image quality. Ie. the "actual size" image in Lightgallery in my example has dimensions of 2049.56 x 1366.05 pixels. The real size is 2048 x 1365 pixels.

This issue is present in 2.2., 2.3. and 2.4 beta. You can see it in your demo page as well.

Tested in latest Chrome and Edge on Windows 10.

LG soft image

You can see the softness in Windows Chrome in the attached image - the last image is 1:1 the same image on a browser window.

Any plans on fixing the issue? This might not be a problem in blogs etc. but in professional photography or art pages, the quality is not good enough.

Other than this issue Lightgallery is really amazing, you have done a great job.

sachinchoolur
sachinchoolur

Yes, it is a known issue. The quality of the images is slightly reduced on some browsers in certain scenarios.

And you are right. CSS transform is causing the issue. CSS transform is only required for the zoom animation and can be removed once the animation is completed. I've already fixed the issue locally but need some more time to test it properly as I completely re-wrote the zoom module.

The fix will be mostly available in the next version

Activity icon
issue

sachinchoolur issue sachinchoolur/lightGallery

sachinchoolur
sachinchoolur

Excluding class ??

Hi, There is one in my gallery that takes you to another subpage. Now, when I click on the link, the gallery opens. How to prevent the gallery from opening after clicking the url link?

Jan
5
2 weeks ago
Activity icon
issue

sachinchoolur issue comment sachinchoolur/lightGallery

sachinchoolur
sachinchoolur

Features/996 - Language translation aria-label

Test have been done with French language. Obviously we would need to add more languages in the future.

sachinchoolur
sachinchoolur

It looks like there are some issues with the autogenerated docs.

You can find all the possible options below.


lightGallery(document.getElementById('lightgallery'), {
    strings: {
        closeGallery: 'Close gallery',
        toggleMaximize: 'Toggle maximize',
        previousSlide: 'Previous slide',
        nextSlide: 'Next slide',
        download: 'Download',
        playVideo: 'Play video',
    },
    autoplayPluginStrings: {
        toggleAutoplay: 'Toggle Autoplay'
    },
    commentPluginStrings: {
        toggleComments: 'Toggle Comments'
    },
    fullscreenPluginStrings: {
        toggleFullscreen: 'Toggle Fullscreen'
    },
    rotatePluginStrings: {
        flipVertical: 'Flip vertical',
        flipHorizontal: 'Flip horizontal',
        rotateLeft: 'Rotate left',
        rotateRight: 'Rotate right',
    },
    sharePluginStrings: {
        share: 'Share'
    },
    thumbnailPluginStrings: {
        toggleThumbnails: 'Toggle thumbnails'
    },
    zoomPluginStrings: {
        zoomIn: 'Zoom in',
        zoomOut: 'Zoom out',
        viewActualSize: 'View actual size',
    },
})

I'll update the docs

started
started time in 2 weeks ago
Jan
4
2 weeks ago
started
started time in 2 weeks ago
Jan
2
3 weeks ago
Activity icon
issue

sachinchoolur issue comment sachinchoolur/lightGallery

sachinchoolur
sachinchoolur

Dynamic Items - Thumbnails not clickable, HTML5 Videos not working

I'm having major problems trying to get light gallery using dynamic items to make HTML5 videos work at all. I'm also having an issue where thumbnails are displaying but clicking them does nothing - no errors in the console either. I have spent way too much time on this, hoping it's something stupid I'm missing. I load lightGallery via CDN including CSS bundle and both plugin files. Light gallery opens, shows the video poster but clicking the play icon does nothing. Thumbnails show but clicking does nothing - this issues could be linked!? If I remove the video from the array, the thumbnails are still not clickable. I would really appreciate some help, thank you.

  const GALLERY_FILES = [
{
  src: 'http://localhost/image/original.jpg',
  thumb: 'http://localhost/image/thumbnail.jpg',
},
{
  video: 'http://localhost/video/video.mp4',
  poster: 'http://localhost/video/thumbnail.jpg',
  thumb: 'http://localhost/video/thumbnail.jpg',
}
];
  const lightbox = lightGallery($gallery, {
    licenseKey: 'REMOVED',
    dynamic: true,
    animateThumb: true,
    plugins: [lgThumbnail, lgVideo],
    dynamicEl: GALLERY_FILES,
  });
sachinchoolur
sachinchoolur

lightGallery has jQuery-like utilities for dom-manipulation and even management. That is why it was working for image slides. I think I should either throw an error when a non HTML element is passed via lightGallery or make it jQuery compatible completely. Thank you for pointing this out. Happy new year!

Activity icon
issue

sachinchoolur issue comment sachinchoolur/lightGallery

sachinchoolur
sachinchoolur

Vue3 component with dynamic items not clickable

Description

While using vue3 and component provided from the library, i can't make the gallery work when i load images from an array. I have an endpoint from which i am getting images, those images are store in state property items. Then i loop through items and creating anchor element inside of the light-gallery component. Also i would like to mention, when i hard code those anchor elements inside of the light-gallery component, the gallery works fine and there are no errors in the browser console. It stops working only when i use v-for. Please see my component.

Steps to reproduce

Unfortunately i dont have it online yet.

The lightGallery component is registered in following way

import {createApp} from "vue";
import Lightgallery from 'lightgallery/vue';
const app = createApp({delimiters: ['${', '}']});
app.component('light-gallery', Lightgallery);

Vue3 component for listing of images

<template>
    <div :class="state.noResultsClass">
        <vue-title>
            {{section.title}}
        </vue-title>

        <div class="max-w-7xl mx-auto p-4 sm:px-6 my-10 text-center">
            <button
            v-for="tag in state.tags"
            class="tags mb-2 bg-green-500 rounded text-white px-1 py-0.5 mx-1 first:ml-0 last:mr-0 first:ml-0 last:mr-0"
            @click="loadPerTags(tag.slug)"
            >{{tag.title}}</button>

        </div>
            <div class="max-w-7xl mx-auto p-4 sm:px-6 my-10">
                <infinite-scroll
                    @infinite-scroll="load"
                >
                    <light-gallery
                        :settings="{
                            speed: 500,
                            plugins: state.plugins,
                            dynamic: true,
                            dynamicEl: state.items

                        }"
                        :onInit="onInit"
                        :onBeforeSlide="onBeforeSlide"
                        class="w-full grid grid-cols-3 gap-4"
                    >
                        <a
                            v-for="item in state.items"
                            :key="item.id"
                            class="painting-thumbnail"
                            data-src="https://images.unsplash.com/photo-1581894158358-5ecd2c518883?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=240&q=80"
                        >
                            <img
                                class="img-responsive"
                                src="https://images.unsplash.com/photo-1581894158358-5ecd2c518883?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=240&q=80"
                            />
                        </a>

                    </light-gallery>
                </infinite-scroll>
            </div>

        <modal-painting
            :open="state.showModal"
            :item="state.currentItem"
            :index="state.currentIndex"
        >
        </modal-painting>
    </div>
</template>

<script>

import {onMounted, reactive, inject} from "vue";
import lgThumbnail from "lightgallery/plugins/thumbnail";
import lgZoom from "lightgallery/plugins/zoom";

export default {
    props: {
        section: Object
    },

    setup(props) {
        const emitter = inject("emitter");

        const state = reactive({
            items: [],
            currentItem: {},
            showModal: false,
            tags: [],
            currentIndex: 0,
            noResult: false,
            message: "No more results found.",
            page: 1,
            perPage: 6,
            isLoading: false,
            noResultsClass: '',
            currentFilter: 'all',
            plugins: [lgZoom, lgThumbnail],
            lightGallery: null
        });

        const viewMore = () => {
            window.location = '/paintings'
        }

        const openModal = (item, index) => {
            state.currentItem = item;
            state.currentIndex = index;
            state.showModal = true;
        }

        const load = async () => {
            if (state.isLoading || state.noResult) {
                return;
            }
            state.isLoading = true;
            axios.get('/get-paintings?page=' + state.page + '&perPage=' + state.perPage + getFilterSuffix(state.currentFilter) , {
                header: {
                    'Content-Type': 'application/json'
                }
            }).then(response => {
                if (response.data.length) {
                    state.items.push(...response.data);
                } else {
                    state.noResult = true;
                    state.noResultsClass = 'no-results';
                }

                state.isLoading = false;
                state.page++;
            }).catch(error => {
                state.isLoading = false;
                console.log(error);
            });
        }

        const loadTags = () => {
            axios.get('/get-tags/', {
                header: {
                    'Content-Type': 'application/json'
                }
            }).then(response => {
                state.tags = response.data;
            }).catch(error => {
                console.log(error);
            });
        }

        const loadPerTags = (tag) => {
            console.log('load per tag');
            state.currentFilter = tag;
            state.items = [];
            state.page = 1;
            state.noResult = false,
            load();
            state.lightGallery.refresh();

        }

        const getFilterSuffix = (tag) => {
            if (tag !== 'all') {
                return '&tags[]=' + tag;
            }

            return ''
        }

        const onInit = (detail) => {
            state.lightGallery = detail.instance;
            console.log('lightGallery has been initialized');
        }
        const onBeforeSlide = () => {
            console.log('calling before slide');
        }
        onMounted(() => {
            loadTags();
            load();
            state.lightGallery.refresh();
            emitter.on('painting-next', (currentIndex) => {
                const nextIndex = currentIndex + 1;
                if (currentIndex + 1 <= state.items.length) {
                    state.currentIndex = nextIndex;
                    state.currentItem = state.items[nextIndex];
                }
            });

            emitter.on('painting-prev', (currentIndex) => {
                const prevIndex = currentIndex - 1;
                if (prevIndex >= 0) {
                    state.currentIndex = prevIndex;
                    state.currentItem = state.items[prevIndex   ];
                }
            });
        });

        return {
            state,
            openModal,
            load,
            viewMore,
            loadPerTags,
            onInit,
            onBeforeSlide
        }
    }
}

</script>
<style lang="css" scoped>
    @import 'lightgallery/css/lightgallery.css';
    @import 'lightgallery/css/lg-thumbnail.css';
    @import 'lightgallery/css/lg-zoom.css';
</style>

Sample HTML markup

Environment

  • Browser and version - using chrome
  • OS - ios - laravel valet
  • lightGallery version - 2.3.0

Additional context

sachinchoolur
sachinchoolur

Hey @dipsor, To update the slides, you need to call the lightGallery refresh method. Demo - https://www.lightgalleryjs.com/docs/vue/#updating-slides

I know this is a major limitation currently. But will be improved in the upcoming version.

let me know if you face any issues

Jan
1
3 weeks ago
Activity icon
issue

sachinchoolur issue sachinchoolur/lightGallery

sachinchoolur
sachinchoolur

V2 feature request

Is your feature request related to a problem? Please describe. Not a problem

Describe the solution you'd like Provide ability to localise (ie translate) the aria-label text of controls (lg-icon)

Activity icon
issue

sachinchoolur issue comment sachinchoolur/lightGallery

sachinchoolur
sachinchoolur

V2 feature request

Is your feature request related to a problem? Please describe. Not a problem

Describe the solution you'd like Provide ability to localise (ie translate) the aria-label text of controls (lg-icon)

Dec
30
3 weeks ago
Activity icon
created branch
createdAt 3 weeks ago
started
started time in 3 weeks ago
Activity icon
issue

sachinchoolur issue comment sachinchoolur/lightGallery

sachinchoolur
sachinchoolur

Dynamic Items - Thumbnails not clickable, HTML5 Videos not working

I'm having major problems trying to get light gallery using dynamic items to make HTML5 videos work at all. I'm also having an issue where thumbnails are displaying but clicking them does nothing - no errors in the console either. I have spent way too much time on this, hoping it's something stupid I'm missing. I load lightGallery via CDN including CSS bundle and both plugin files. Light gallery opens, shows the video poster but clicking the play icon does nothing. Thumbnails show but clicking does nothing - this issues could be linked!? If I remove the video from the array, the thumbnails are still not clickable. I would really appreciate some help, thank you.

  const GALLERY_FILES = [
{
  src: 'http://localhost/image/original.jpg',
  thumb: 'http://localhost/image/thumbnail.jpg',
},
{
  video: 'http://localhost/video/video.mp4',
  poster: 'http://localhost/video/thumbnail.jpg',
  thumb: 'http://localhost/video/thumbnail.jpg',
}
];
  const lightbox = lightGallery($gallery, {
    licenseKey: 'REMOVED',
    dynamic: true,
    animateThumb: true,
    plugins: [lgThumbnail, lgVideo],
    dynamicEl: GALLERY_FILES,
  });
sachinchoolur
sachinchoolur

Can you please make sure that the $gallery is an HTMLElement? I'm not exactly sure as the code is minified on the website. But it looks like $gallery is a jQuery object

If that is the case, you need to fetch the native DOM element from jQuery object and pass it via lightGallery.

use $gallery[0] to get the DOM element

The below code should work fine.

 const gallery = lightGallery($gallery[0], {
    licenseKey: ApiSettings.galleryLicense,
    plugins: [lgVideo, lgThumbnail],
    dynamic: true,
    dynamicEl: [
      {
        src: 'https://images.unsplash.com/photo-1609342122563-a43ac8917a3a?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1400&q=80',
        responsive:
          'https://images.unsplash.com/photo-1609342122563-a43ac8917a3a?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=480&q=80 480, https://images.unsplash.com/photo-1609342122563-a43ac8917a3a?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=800&q=80 800',
        thumb:
          'https://images.unsplash.com/photo-1609342122563-a43ac8917a3a?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=240&q=80',
        subHtml: `<div class="lightGallery-captions">
                  <h4>Photo by <a href="https://unsplash.com/@brookecagle">Brooke Cagle</a></h4>
                  <p>Description of the slide 1</p>
              </div>`,
      },
      {
        video: {
          source: [{ src: 'https://www.lightgalleryjs.com//videos/video1.mp4', type: 'video/mp4' }],
          attributes: { preload: false, controls: true },
        },
        thumb: 'https://www.lightgalleryjs.com//images/demo/html5-video-poster.jpg',
        subHtml: `<div class="lightGallery-captions">
                  <h4>Photo by <a href="https://unsplash.com/@brookecagle">Brooke Cagle</a></h4>
                  <p>Description of the slide 2</p>
              </div>`,
      },
      {
        src: 'https://images.unsplash.com/photo-1477322524744-0eece9e79640?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1400&q=80',
        responsive:
          'https://images.unsplash.com/photo-1477322524744-0eece9e79640?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=480&q=80 480, https://images.unsplash.com/photo-1477322524744-0eece9e79640?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80 800',
        thumb:
          'https://images.unsplash.com/photo-1477322524744-0eece9e79640?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=240&q=80',
      },
      {
        src: '//www.youtube.com/watch?v=egyIeygdS_E',
        poster: 'https://img.youtube.com/vi/egyIeygdS_E/maxresdefault.jpg',
        thumb: 'https://img.youtube.com/vi/egyIeygdS_E/maxresdefault.jpg',
      },
    ],
  });

Let me know if it works

Dec
27
4 weeks ago
Activity icon
issue

sachinchoolur issue comment sachinchoolur/lightGallery

sachinchoolur
sachinchoolur

Dynamic Items - Thumbnails not clickable, HTML5 Videos not working

I'm having major problems trying to get light gallery using dynamic items to make HTML5 videos work at all. I'm also having an issue where thumbnails are displaying but clicking them does nothing - no errors in the console either. I have spent way too much time on this, hoping it's something stupid I'm missing. I load lightGallery via CDN including CSS bundle and both plugin files. Light gallery opens, shows the video poster but clicking the play icon does nothing. Thumbnails show but clicking does nothing - this issues could be linked!? If I remove the video from the array, the thumbnails are still not clickable. I would really appreciate some help, thank you.

  const GALLERY_FILES = [
{
  src: 'http://localhost/image/original.jpg',
  thumb: 'http://localhost/image/thumbnail.jpg',
},
{
  video: 'http://localhost/video/video.mp4',
  poster: 'http://localhost/video/thumbnail.jpg',
  thumb: 'http://localhost/video/thumbnail.jpg',
}
];
  const lightbox = lightGallery($gallery, {
    licenseKey: 'REMOVED',
    dynamic: true,
    animateThumb: true,
    plugins: [lgThumbnail, lgVideo],
    dynamicEl: GALLERY_FILES,
  });
sachinchoolur
sachinchoolur

Yes, this should be some simple issue. Do you have an online demo URL that I can take a look at?

Activity icon
issue

sachinchoolur issue sachinchoolur/lightGallery

sachinchoolur
sachinchoolur

Vimeo embed with wrong iframe src: missing "?"

Description

If i use the video plugin, the vimeo iframe src ends up with no ? after the video id, making the it unusable, unfortunately.

Steps to reproduce

You can see the problem by just adding a vimeo video as a slide, using the video plugin.

Expected result

I expected to see the video streaming, just as youtube does.

Actual result

Unfortunately, the iframe just says "The embed code for this video is not valid."

Additional context

If i inspect the code, the result in the iframe src is: //player.vimeo.com/video/503007964byline=0&portrait=0&speed=0&title=0&color=e7374c If i add the ? with the inspector, the video loads fine.

started
started time in 3 weeks ago
Dec
23
1 month ago
Activity icon
issue

sachinchoolur issue comment sachinchoolur/lightGallery

sachinchoolur
sachinchoolur

Dynamic Items - Thumbnails not clickable, HTML5 Videos not working

I'm having major problems trying to get light gallery using dynamic items to make HTML5 videos work at all. I'm also having an issue where thumbnails are displaying but clicking them does nothing - no errors in the console either. I have spent way too much time on this, hoping it's something stupid I'm missing. I load lightGallery via CDN including CSS bundle and both plugin files. Light gallery opens, shows the video poster but clicking the play icon does nothing. Thumbnails show but clicking does nothing - this issues could be linked!? If I remove the video from the array, the thumbnails are still not clickable. I would really appreciate some help, thank you.

  const GALLERY_FILES = [
{
  src: 'http://localhost/image/original.jpg',
  thumb: 'http://localhost/image/thumbnail.jpg',
},
{
  video: 'http://localhost/video/video.mp4',
  poster: 'http://localhost/video/thumbnail.jpg',
  thumb: 'http://localhost/video/thumbnail.jpg',
}
];
  const lightbox = lightGallery($gallery, {
    licenseKey: 'REMOVED',
    dynamic: true,
    animateThumb: true,
    plugins: [lgThumbnail, lgVideo],
    dynamicEl: GALLERY_FILES,
  });
sachinchoolur
sachinchoolur

Hey @waynehaffenden,

For HTML5 videos, you need to pass the video source via video key.

Docs - https://www.lightgalleryjs.com/demos/video-gallery/#5-videos Demo - https://codepen.io/sachinchoolur/pen/VwpYagE

The below code should work fine for you

const GALLERY_FILES = [
{
  src: 'http://localhost/image/original.jpg',
  thumb: 'http://localhost/image/thumbnail.jpg',
},
{
  video: {"source": [{"src":"http://localhost/video/video.mp4", "type":"video/mp4"}], "attributes": {"preload": false, "controls": true}},
  poster: 'http://localhost/video/thumbnail.jpg',
  thumb: 'http://localhost/video/thumbnail.jpg',
}
];
  const lightbox = lightGallery($gallery, {
    licenseKey: 'REMOVED',
    dynamic: true,
    animateThumb: true,
    plugins: [lgThumbnail, lgVideo],
    dynamicEl: GALLERY_FILES,
  });

Let me know if you face any issues

Dec
21
1 month ago
Activity icon
delete
deleted time in 1 month ago
Activity icon
issue

sachinchoolur issue comment sachinchoolur/lightGallery

sachinchoolur
sachinchoolur

Features/996 - Language translation aria-label

Test have been done with French language. Obviously we would need to add more languages in the future.

sachinchoolur
sachinchoolur

Hey @arnaud-ober,

The PR has been merged, and it is available in version 2.4.0-beta.0

Thank you so much for your time and effort.

Dec
19
1 month ago
Activity icon
issue

sachinchoolur issue sachinchoolur/lightGallery

sachinchoolur
sachinchoolur

license key is not valid for production use at LG

I have this problem, actually it's a warning but I don't like to appear in console How can i fix that?! lightgalery

Activity icon
issue

sachinchoolur issue comment sachinchoolur/lightGallery

sachinchoolur
sachinchoolur

license key is not valid for production use at LG

I have this problem, actually it's a warning but I don't like to appear in console How can i fix that?! lightgalery

sachinchoolur
sachinchoolur

Hey @mamadfar, Once you purchase a lightGallery license, you'll get the license key via email

Docs : https://www.lightgalleryjs.com/license/ https://www.lightgalleryjs.com/docs/settings/#licenseKey

If your project is GPLv3, please contact me at [email protected] to get a license key

Dec
18
1 month ago
Activity icon
issue

sachinchoolur issue comment sachinchoolur/lightGallery

sachinchoolur
sachinchoolur

Close dynamic lightgallery with back button (dynamic + hash plugin incompatibility)

Dynamic lightgallery seem to be incompatible with Hash plugin. On mobile, closing stuff is usually performed with "back" button. This results in a non-intuitive behavior that the page containing lightgallery is whatever swapped to the previous page in history or browser is being closed completely, if you opened page link from something like Messenger. Before you'll say that such issue was already reported, yes it was (https://github.com/sachinchoolur/lightGallery/issues/302), but I don't believe it was resolved. Plus I believe any workaronds that were posted in it are true for lightgallery 1.x and not 2.x because they do mention jQuery.

What I want to achieve: For example in this case https://codepen.io/sachinchoolur/pen/vYmEyRE I want to be able to close any of the three galleries by pressing browser back button. Note that in my personal case i do not want to cycle through any previously viewed images before closing the gallery, but other people may expect this to happen as well.

sachinchoolur
sachinchoolur

Added to 2.6.0 release checklist 👍🏻

Activity icon
issue

sachinchoolur issue comment sachinchoolur/lightGallery

sachinchoolur
sachinchoolur

Increase the usage of compound assignment operators

Summary

:eyes: Some source code analysis tools can help to find opportunities for improving software components. :thought_balloon: I propose to increase the usage of compound operators accordingly.

Basic example

diff --git a/dist/lightgallery.es5.js b/dist/lightgallery.es5.js
index 538fb83..3c933bf 100644
--- a/dist/lightgallery.es5.js
+++ b/dist/lightgallery.es5.js
@@ -44,7 +44,7 @@ function initLgPolyfills() {
         if (typeof window.CustomEvent === 'function')
             return false;
         function CustomEvent(event, params) {
-            params = params || {
+            params ||= {
                 bubbles: false,
                 cancelable: false,
                 detail: null,
@@ -86,7 +86,7 @@ var lgQuery = /** @class */ (function () {
         if (typeof selector !== 'string') {
             return selector;
         }
-        context = context || document;
+        context ||= document;
         var fl = selector.substring(0, 1);
         if (fl === '#') {
             return context.querySelector(selector);
@@ -1199,7 +1199,7 @@ var LightGallery = /** @class */ (function () {
         this.currentItemsInDom = itemsToBeInsertedToDom;
         var items = '';
         itemsToBeInsertedToDom.forEach(function (item) {
-            items = items + ("<div id=\"" + item + "\" class=\"lg-item\"></div>");
+            items += "<div id=\"" + item + "\" class=\"lg-item\"></div>";
         });
         this.$inner.append(items);
         this.addHtml(index);
diff --git a/dist/lightgallery.umd.js b/dist/lightgallery.umd.js
index e9eb0dd..824dcc5 100644
--- a/dist/lightgallery.umd.js
+++ b/dist/lightgallery.umd.js
@@ -50,7 +50,7 @@
             if (typeof window.CustomEvent === 'function')
                 return false;
             function CustomEvent(event, params) {
-                params = params || {
+                params ||= {
                     bubbles: false,
                     cancelable: false,
                     detail: null,
@@ -92,7 +92,7 @@
             if (typeof selector !== 'string') {
                 return selector;
             }
-            context = context || document;
+            context ||= document;
             var fl = selector.substring(0, 1);
             if (fl === '#') {
                 return context.querySelector(selector);
@@ -1205,7 +1205,7 @@
             this.currentItemsInDom = itemsToBeInsertedToDom;
             var items = '';
             itemsToBeInsertedToDom.forEach(function (item) {
-                items = items + ("<div id=\"" + item + "\" class=\"lg-item\"></div>");
+                items += "<div id=\"" + item + "\" class=\"lg-item\"></div>";
             });
             this.$inner.append(items);
             this.addHtml(index);
diff --git a/dist/plugins/thumbnail/lg-thumbnail.es5.js b/dist/plugins/thumbnail/lg-thumbnail.es5.js
index ae0b6bb..733d94f 100644
--- a/dist/plugins/thumbnail/lg-thumbnail.es5.js
+++ b/dist/plugins/thumbnail/lg-thumbnail.es5.js
@@ -365,11 +365,10 @@ var Thumbnail = /** @class */ (function () {
             if (speedX > 2) {
                 speedX += 1;
             }
-            speedX =
-                speedX +
+            speedX +=
                     speedX * (Math.abs(distanceXnew) / this.thumbOuterWidth);
             this.$lgThumb.css('transition-duration', Math.min(speedX - 1, 2) + 'settings');
-            distanceXnew = distanceXnew * speedX;
+            distanceXnew *= speedX;
             this.translateX = this.getPossibleTransformX(this.translateX - distanceXnew);
             this.setTranslate(this.translateX);
         }
diff --git a/dist/plugins/thumbnail/lg-thumbnail.umd.js b/dist/plugins/thumbnail/lg-thumbnail.umd.js
index c3f40ce..6f7c117 100644
--- a/dist/plugins/thumbnail/lg-thumbnail.umd.js
+++ b/dist/plugins/thumbnail/lg-thumbnail.umd.js
@@ -371,11 +371,10 @@
                 if (speedX > 2) {
                     speedX += 1;
                 }
-                speedX =
-                    speedX +
+                speedX +=
                         speedX * (Math.abs(distanceXnew) / this.thumbOuterWidth);
                 this.$lgThumb.css('transition-duration', Math.min(speedX - 1, 2) + 'settings');
-                distanceXnew = distanceXnew * speedX;
+                distanceXnew *= speedX;
                 this.translateX = this.getPossibleTransformX(this.translateX - distanceXnew);
                 this.setTranslate(this.translateX);
             }
diff --git a/dist/plugins/video/lg-video.es5.js b/dist/plugins/video/lg-video.es5.js
index 8ae6bbc..4e7bde2 100644
--- a/dist/plugins/video/lg-video.es5.js
+++ b/dist/plugins/video/lg-video.es5.js
@@ -360,7 +360,7 @@ var Video = /** @class */ (function () {
             }
             else if (videoInfo.wistia) {
                 try {
-                    window._wq = window._wq || [];
+                    window._wq ||= [];
                     // @todo Event is gettign triggered multiple times
                     window._wq.push({
                         id: $videoElement.attr('id'),
@@ -416,7 +416,7 @@ var Video = /** @class */ (function () {
         }
         else if (videoInfo.wistia) {
             try {
-                window._wq = window._wq || [];
+                window._wq ||= [];
                 // @todo Find a way to destroy wistia player instance
                 window._wq.push({
                     id: $videoElement.attr('id'),
diff --git a/dist/plugins/video/lg-video.umd.js b/dist/plugins/video/lg-video.umd.js
index c46a2f6..a0444d2 100644
--- a/dist/plugins/video/lg-video.umd.js
+++ b/dist/plugins/video/lg-video.umd.js
@@ -366,7 +366,7 @@
                 }
                 else if (videoInfo.wistia) {
                     try {
-                        window._wq = window._wq || [];
+                        window._wq ||= [];
                         // @todo Event is gettign triggered multiple times
                         window._wq.push({
                             id: $videoElement.attr('id'),
@@ -422,7 +422,7 @@
             }
             else if (videoInfo.wistia) {
                 try {
-                    window._wq = window._wq || [];
+                    window._wq ||= [];
                     // @todo Find a way to destroy wistia player instance
                     window._wq.push({
                         id: $videoElement.attr('id'),
diff --git a/dist/plugins/zoom/lg-zoom.es5.js b/dist/plugins/zoom/lg-zoom.es5.js
index 9f7b8b2..7e9e2b1 100644
--- a/dist/plugins/zoom/lg-zoom.es5.js
+++ b/dist/plugins/zoom/lg-zoom.es5.js
@@ -148,8 +148,8 @@ var Zoom = /** @class */ (function () {
                 else {
                     modifier = 1;
                 }
             }
-            modifier = modifier * flipHorizontalValue;
+            modifier *= flipHorizontalValue;
         }
         else {
             var flipVerticalValue = Math.sign(parseFloat(transformValues[3]));
@@ -161,7 +161,7 @@ var Zoom = /** @class */ (function () {
                 var sinMinusX = parseFloat(transformValues[2]);
                 modifier = Math.sign(sinX * sinMinusX * originalRotate * flipVerticalValue);
             }
-            modifier = modifier * flipVerticalValue;
+            modifier *= flipVerticalValue;
         }
         return modifier;
     };
@@ -212,7 +212,7 @@ var Zoom = /** @class */ (function () {
         }
     };
     Zoom.prototype.getDragAllowedAxises = function (rotateValue, scale) {
-        scale = scale || this.scale || 1;
+        scale ||= this.scale || 1;
         var allowY = this.imageYSize * scale > this.containerRect.height;
         var allowX = this.imageXSize * scale > this.containerRect.width;
         if (rotateValue === 90) {
@@ -670,8 +670,8 @@ var Zoom = /** @class */ (function () {
         if (speedY > 2) {
             speedY += 1;
         }
-        distanceXnew = distanceXnew * speedX;
-        distanceYnew = distanceYnew * speedY;
+        distanceXnew *= speedX;
+        distanceYnew *= speedY;
         var _LGel = this.core
             .getSlideItem(this.core.index)
             .find('.lg-img-wrap')
diff --git a/dist/plugins/zoom/lg-zoom.umd.js b/dist/plugins/zoom/lg-zoom.umd.js
index 70bb2a2..df86cc4 100644
--- a/dist/plugins/zoom/lg-zoom.umd.js
+++ b/dist/plugins/zoom/lg-zoom.umd.js
@@ -154,8 +154,8 @@
                     else {
                         modifier = 1;
                     }
                 }
-                modifier = modifier * flipHorizontalValue;
+                modifier *= flipHorizontalValue;
             }
             else {
                 var flipVerticalValue = Math.sign(parseFloat(transformValues[3]));
@@ -167,7 +167,7 @@
                     var sinMinusX = parseFloat(transformValues[2]);
                     modifier = Math.sign(sinX * sinMinusX * originalRotate * flipVerticalValue);
                 }
-                modifier = modifier * flipVerticalValue;
+                modifier *= flipVerticalValue;
             }
             return modifier;
         };
@@ -218,7 +218,7 @@
             }
         };
         Zoom.prototype.getDragAllowedAxises = function (rotateValue, scale) {
-            scale = scale || this.scale || 1;
+            scale ||= this.scale || 1;
             var allowY = this.imageYSize * scale > this.containerRect.height;
             var allowX = this.imageXSize * scale > this.containerRect.width;
             if (rotateValue === 90) {
@@ -676,8 +676,8 @@
             if (speedY > 2) {
                 speedY += 1;
             }
-            distanceXnew = distanceXnew * speedX;
-            distanceYnew = distanceYnew * speedY;
+            distanceXnew *= speedX;
+            distanceYnew *= speedY;
             var _LGel = this.core
                 .getSlideItem(this.core.index)
                 .find('.lg-img-wrap')
diff --git a/lightgallery-react/config/modules.js b/lightgallery-react/config/modules.js
index d63e41d..844916f 100644
--- a/lightgallery-react/config/modules.js
+++ b/lightgallery-react/config/modules.js
@@ -118,7 +118,7 @@ function getModules() {
     config = require(paths.appJsConfig);
   }
 
-  config = config || {};
+  config ||= {};
   const options = config.compilerOptions || {};
 
   const additionalModulePaths = getAdditionalModulePaths(options);
diff --git a/site/v1/lightgallery/js/lg-thumbnail.js b/site/v1/lightgallery/js/lg-thumbnail.js
index a9e024b..48b9c73 100644
--- a/site/v1/lightgallery/js/lg-thumbnail.js
+++ b/site/v1/lightgallery/js/lg-thumbnail.js
@@ -338,7 +338,7 @@
 
                 _this.$thumbOuter.addClass('lg-dragging');
 
-                tempLeft = tempLeft - (endCoords - startCoords);
+                tempLeft -= endCoords - startCoords;
 
                 if (tempLeft > (_this.thumbTotalWidth - _this.thumbOuterWidth)) {
                     tempLeft = _this.thumbTotalWidth - _this.thumbOuterWidth;
@@ -402,7 +402,7 @@
 
                 tempLeft = _this.left;
 
-                tempLeft = tempLeft - (endCoords - startCoords);
+                tempLeft -= endCoords - startCoords;
 
                 if (tempLeft > (_this.thumbTotalWidth - _this.thumbOuterWidth)) {
                     tempLeft = _this.thumbTotalWidth - _this.thumbOuterWidth;
diff --git a/site/v1/lightgallery/js/lg-video.js b/site/v1/lightgallery/js/lg-video.js
index b5c3c8a..7b6d4c2 100644
--- a/site/v1/lightgallery/js/lg-video.js
+++ b/site/v1/lightgallery/js/lg-video.js
@@ -118,7 +118,7 @@
 
                 a = '?wmode=opaque&autoplay=' + autoplay + '&enablejsapi=1';
                 if (this.core.s.youtubePlayerParams) {
-                    a = a + '&' + $.param(this.core.s.youtubePlayerParams);
+                    a += '&' + $.param(this.core.s.youtubePlayerParams);
                 }
 
                 video = '<iframe class="lg-video-object lg-youtube ' + addClass + '" ' + videoTitle + ' width="560" height="315" src="//www.youtube.com/embed/' + isVideo.youtube[1] + a + '" frameborder="0" allowfullscreen></iframe>';
@@ -127,7 +127,7 @@
 
                 a = '?autoplay=' + autoplay + '&api=1';
                 if (this.core.s.vimeoPlayerParams) {
-                    a = a + '&' + $.param(this.core.s.vimeoPlayerParams);
+                    a += '&' + $.param(this.core.s.vimeoPlayerParams);
                 }
 
                 video = '<iframe class="lg-video-object lg-vimeo ' + addClass + '" ' + videoTitle + ' width="560" height="315"  src="//player.vimeo.com/video/' + isVideo.vimeo[1] + a + '" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>';
@@ -136,7 +136,7 @@
 
                 a = '?wmode=opaque&autoplay=' + autoplay + '&api=postMessage';
                 if (this.core.s.dailymotionPlayerParams) {
-                    a = a + '&' + $.param(this.core.s.dailymotionPlayerParams);
+                    a += '&' + $.param(this.core.s.dailymotionPlayerParams);
                 }
 
                 video = '<iframe class="lg-video-object lg-dailymotion ' + addClass + '" ' + videoTitle + ' width="560" height="315" src="//www.dailymotion.com/embed/video/' + isVideo.dailymotion[1] + a + '" frameborder="0" allowfullscreen></iframe>';
@@ -153,7 +153,7 @@
 
                 a = '&autoplay=' + autoplay;
                 if (this.core.s.vkPlayerParams) {
-                    a = a + '&' + $.param(this.core.s.vkPlayerParams);
+                    a += '&' + $.param(this.core.s.vkPlayerParams);
                 }
 
                 video = '<iframe class="lg-video-object lg-vk ' + addClass + '" ' + videoTitle + ' width="560" height="315" src="//vk.com/video_ext.php?' + isVideo.vk[1] + a + '" frameborder="0" allowfullscreen></iframe>';
diff --git a/site/v1/lightgallery/js/lg-zoom.js b/site/v1/lightgallery/js/lg-zoom.js
index 590c9dc..f65f5ee 100644
--- a/site/v1/lightgallery/js/lg-zoom.js
+++ b/site/v1/lightgallery/js/lg-zoom.js
@@ -302,8 +302,8 @@
                 } else {
                     modifier = 1;
                 }
             }
-            modifier = modifier * flipHorizontalValue;
+            modifier *= flipHorizontalValue;
         } else {
             var flipVerticalValue = Math.sign(parseFloat(transformValues[3]));
             if (rotateValue === 0 || rotateValue === 180) {
@@ -313,7 +313,7 @@
                 var sinMinusX = parseFloat(transformValues[2]);
                 modifier = Math.sign(sinX * sinMinusX * originalRotate * flipVerticalValue);
             }
-            modifier = modifier * flipVerticalValue;
+            modifier *= flipVerticalValue;
         }
         return modifier;
     };
diff --git a/site/v1/static/js/affix.js b/site/v1/static/js/affix.js
index 9997379..a4ebb01 100644
--- a/site/v1/static/js/affix.js
+++ b/site/v1/static/js/affix.js
@@ -150,7 +150,7 @@
       var $spy = $(this)
       var data = $spy.data()
 
-      data.offset = data.offset || {}
+      data.offset ||= {}
 
       if (data.offsetBottom != null) data.offset.bottom = data.offsetBottom
       if (data.offsetTop    != null) data.offset.top    = data.offsetTop

Motivation

Adjusted software run time characteristics

sachinchoolur
sachinchoolur
Previous