sachinchoolur/lightGallery

zoom violates aspect ratio

Closed this issue · 2 comments

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

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');

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