Lightbox Image Ignoring original aspect ratio

[cheonmux]

Hello, I'm currently considering using the Portswipe 5 version for WordPress.

My goal is to have the images displayed in the lightbox maintain their original aspect ratio and size.

However, I've encountered an issue where the image size seems to be fixed to the screen size, regardless of the zoom level adjustments.

Could anyone guide me on how to resolve this problem? I'd like the images to display in their original size and aspect ratio within the lightbox.

Website : https://seoartgallery.com/test/?product=%eb%8b%ac%ed%95%ad%ec%95%84%eb%a6%ac-%ea%b7%b8%eb%a6%bc-%eb%b0%95%ec%a0%95%eb%9e%80-3/

Code :

document.addEventListener('DOMContentLoaded', () => {
    const lightbox = new PhotoSwipeLightbox({
        gallery: '.product-gallery-slider',
        children: '.woocommerce-product-gallery__image',
        pswpModule: PhotoSwipe,
        allowPanToNext: true,
        allowMouseDrag: true,
        wheelToZoom: true,
        zoom: false,
        clickToCloseNonZoomable: false,
        preload: [1, 3],
        
        // 이미지 소스와 크기를 동적으로 가져오기
        dataSource: Array.from(document.querySelectorAll('.product-gallery-slider .woocommerce-product-gallery__image')).map(figure => {
            const img = figure.querySelector('img');
            const anchor = figure.querySelector('a');
            return {
                src: anchor ? anchor.href : img.src,
                w: parseInt(img.getAttribute('data-large_image_width') || img.naturalWidth),
                h: parseInt(img.getAttribute('data-large_image_height') || img.naturalHeight),
                alt: img.alt
            };
        }),

        // 초기 줌 레벨 설정
        initialZoomLevel: 'fill',
        secondaryZoomLevel: 1.5,
        maxZoomLevel: 1,

        // 이미지 크기 조정
		//showHideAnimationType: 'zoom',
    });

    lightbox.on('uiRegister', function() {
        lightbox.pswp.ui.registerElement({
            name: 'custom-caption',
            order: 9,
            isButton: false,
            appendTo: 'root',
            html: 'Caption text',
            onInit: (el, pswp) => {
                lightbox.pswp.on('change', () => {
                    const currSlideElement = lightbox.pswp.currSlide.data.element;
                    let captionHTML = '';
                    if (currSlideElement) {
                        const img = currSlideElement.querySelector('img');
                        if (img) {
                            captionHTML = img.alt || '';
                        }
                    }
                    el.innerHTML = captionHTML;
                });
            }
        });
    });

    lightbox.init();


    // 갤러리 이미지 클릭 이벤트 처리

    document.querySelector('.product-gallery-slider').addEventListener('click', (e) => {
        if (e.target.closest('.woocommerce-product-gallery__image')) {
            e.preventDefault();
            const clickedIndex = Array.from(e.target.closest('.product-gallery-slider').children).indexOf(e.target.closest('.woocommerce-product-gallery__image'));
            lightbox.loadAndOpen(clickedIndex);
        }
    });
});

Thank you.

[dimsemenov]

You're using both gallery/children options and dataSource, they are not compatible with each other. Use either or.

If you want to use non-default HTML markup, check this - https://photoswipe.com/data-sources/#custom-html-markup

[cheonmux]

Hi, @dimsemenov

Its sovled! Thanks a lot!