This is still a problem, most of the time you aren't going to know the image size so I find the MDB Lightbox module unusable. Other implementations don't require a size and they're also far more flexible in how you can use them. In your carousel example it would be much better if all the images in all the slides could be put in 1 gallery. It has been implemented in a really weird way and needs an overhaul.

Most Lightbox implementations just use data-gallery to specify which gallery images belong to rather than having to be figures within a div. What happens when you want images in cards to Lightbox etc? Unfortunately for me this means using a separate Lightbox library

I wrote up a solution for this :

    $('img').each(function(index){
        var imageSizeProportion = $('img')[index].width / $('img')[index].height;
        var width = '1600';
        var height = '1067';
        imageSizeProportion > 1.5 ? height = (1600/imageSizeProportion).toString() : width = (1067*imageSizeProportion).toString();
        var fullsize = width + 'x' + height;
        $('.mdb-lightbox a')[index].attributes[1].value = fullsize;
    });

Good luck!

I'm waiting too. Please address this problem asap.

This issue hasn't been resolved, is still a problem

Even with the data-size attribute being filled in incorrectly, the following CSS hack solved the issue for me, but the enlarged image might not be centered correctly however:

.pswp__img {
    max-height: 100% !important;
    width: auto !important;
}

Hi,

would you show me an example when you tried to use this solution? You can create a snippet here: https://mdbootstrap.com/snippets/ and present me your code.

Best, Marta

Hi i found in faqs from Swipebox (lightbox) https://photoswipe.com/documentation/faq.html the solution:

If thumbnail aspect ratio does not match large image, do not define msrc property for slide

objects and enable opacity transition option (showHideOpacity:true, getThumbBoundsFn:false). If aspect ratio of thumbnail image file matches large image, but thumbnail area is cropped via CSS, just add showHideOpacity:true and make sure that getThumbBoundsFn option returns coordinates that consider crop area.

How can I change these parameters in mdbootstrap?

Hi Marta,
I'm interested in that solution too.

Can you share with us the code?

Thanks in advance,
Alessandro