lgRotate block the ability to close the "zoomed-in" image

[Athar42]

Description

When an image in zoomed in, we should be able to close the view by clicking in the black area. This is working until we enable the "lgRotate" plugin.

Steps to reproduce

This behavior can be seen here : https://www.lightgalleryjs.com/demos/thumbnails/

Click, for example, on the first image, then click on either of the border (left or right) ==> The image will not be closed.

Now, if you do "one rotation" (either side) then you attempt to click on either border ==> The image will close.

If lgRotate plugin is removed, we can get the normal behavior back :)

For this same example, the issue seems to be that the added div :

<div class="lg-img-rotate" style="transition-duration: 400ms; transform: rotate(0deg) scale3d(1, 1, 1);">
...
</div>

did overlap the picture statement :

<picture class="lg-img-wrap" style="transform: translate3d(0px, 0px, 0px);">

Environment

• Browser and version - Firefox 121.0.1
• OS - Windows 11 23H2
• lightGallery version - 2.7.2

Additional context

[bytesandbots3]

The problem seems to be due to the additional <div class="lg-img-rotate"> element introduced by the lgRotate plugin. This element overlaps the element, which likely interferes with the event handling that closes the image when the black area is clicked.

Proposed fix is to modify the condition that determines whether a click should close the image. By adding target.hasClass('lg-img-rotate') to the condition, it ensures that clicks on the lg-img-rotate element are treated the same as clicks on the other specified elements (lg-outer, lg-item, lg-img-wrap), thus restoring the close-on-click functionality even when the lgRotate plugin is active.

Here's a clearer explanation of the proposed fix:

isSlideElement(target: lgQuery): boolean {
        return (
            target.hasClass('lg-outer') ||
            target.hasClass('lg-item') ||
            target.hasClass('lg-img-wrap') ||
             target.hasClass('lg-img-rotate') // Added line: also close if clicked on the rotate element.
        );
  }

This modification adds a check for the lg-img-rotate class. If the clicked element has this class, it will trigger the image to close, which aligns with the behavior observed when the lgRotate plugin is not active.

[Athar42]

I can confirm that the proposed fix by @bytesandbots3 is working, tested on my end and it seems all good now, thanks :)

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.