sachinchoolur / lightGallery

A customizable, modular, responsive, lightbox gallery plugin.
https://www.lightgalleryjs.com/
Other
6.47k stars 1.28k forks source link

zoom violates aspect ratio #1558

Closed Svoeobraznaya closed 10 months ago

Svoeobraznaya commented 10 months ago

Description

The zoom plugin violates the aspect ratio of the original image. I can't understand the reasons. In the lightbox the image is displayed at 627627 px, aspect ratio 1:1. When I activate zoom, the image is stretched disproportionately, becomes 1000627 px, aspect ratio 1000:627. The image looks stretched in width.

Steps to reproduce

[Clear steps describing how to reproduce the issue. Please link to a demo project (Your website URL, codepen, or jsfiddle) if possible.](https://elloi.ru/bahroma-anka-5302-9382) To see the problem, follow the link, open the image in the lightbox and click on the zoom button.

JS code that you use to initialize lightGallery.

        var dynamicGallery = lightGallery(document.getElementById('gallery'), {
            dynamic: true,
            dynamicEl: galleryImgs,
            index: parseInt(document.getElementById('gallery').dataset.slickIndex, 10) || 0,
            plugins: [lgZoom, lgThumbnail, lgVideo],
            download: false,
            thumbnail: true,
            loadYouTubePoster: true,
            loadYoutubeThumbnail: true,
            autoplayVideoOnSlide: true,
            thumbWidth: 80,
            thumbContHeight: 100,
            thumbMargin: 10,            
            youTubePlayerParams: {
                autoplay: 1,
                modestbranding: 1,
                controls: 1,
                rel: 0,
                showinfo: 0
            },
            mobileSettings: {
                controls: true,
                showCloseIcon: true
            }
        });     
        dynamicGallery.openGallery();   
    });

Sample HTML markup

Additional context

Svoeobraznaya commented 10 months ago

The problem occurs on line 321-323 of the file code lg-zoom.umd.js $image .css('width', $image.get().naturalWidth + 'px') .css('height', $image.get().naturalHeight + 'px');

Svoeobraznaya commented 10 months ago

Figured it out, I had to connect all the plugin styles.