Control Zoom behavior on inlined Light Gallery

[anasnajaa]

Summary

This feature will allow the user to disable zoom behavior when the gallery is minimized. When the gallery is maximized, the zoom behavior is retained.
Similar issue was reported previously but was marked stale: #806

Basic example

Light Gallery can have this feature as an option for the zoom plugin. When the zoom plugin is enabled, you can use this flag to further control the zoom behavior.

lightGallery(
    document.getElementById('gallery-container'),
    {
        zoomOnMaxOnly: true
    }
);

This is an example of a workaround I was able to implement for this feature:

// Initialize Light Gallery
const galleryContainer = $("#element");
let images = [
    { src: "", thumb: "" },
    { src: "", thumb: "" }
];
let lightGalleryObj = lightGallery(
    galleryContainer[0],
    {
        plugins: [lgZoom], // lgZoom is required
        dynamicEl: images,
        container: galleryContainer[0],
        dynamic: true,
        enableSwipe: true, // required
        showMaximizeIcon: true, // required
        actualSize: false
    }
);
lightGalleryObj.openGallery();

// Begin workaround
let lightGalleryOpened = false;
galleryContainer.find(".lg-inner").css("z-index", -1);
galleryContainer.find(".lg-maximize").on("click", () => {
    lightGalleryOpened = !lightGalleryOpened;
    galleryContainer.find(".lg-inner").css("z-index", lightGalleryOpened ? 1 : -1);
});

This workaround plays around with the z-index property of .lg-inner class which contains the images. When the user clicks on the expand button (.lg-maximize), the z-index of .lg-inner is returned back to its normal value. When the user clicks on minimize (.lg-maximize), the z-index of .lg-inner is set to negative value.

Motivation

The problem I faced is related to the user experience of Light Gallery on mobile devices. When light gallery is displayed inline and the user tries to swipe up or down on the light gallery image, vertical scrolling doesn't trigger as it is being overridden by the touchmove, touchstart and touchend events used in Light Gallery. I don't think such behavior was intended as it cripples the user from scrolling down or up to see the rest of the page.
This behavior only happens when enableSwipe option is true or the zoom plugin is in use or both.
Here is an image that further demonstrates the issue:

[sachinchoolur]

hey @anasnajaa,

Thank you for the detailed info. The issue has been fixed in version 2.2.0-beta.4.
Scrolling would work without disabling the zoom option. Please take a look and let me know if you find any issues