lightbox with different image sizes and formats


Topic: lightbox with different image sizes and formats

Chris Sweeney pro asked 3 years ago

Hi On the photography.html template, all the images appear o be the same size and all in landscape format, e.g.
<figure class="col-md-4">
<a href="" data-size="1600x1067">
<img src="" class="img-fluid">
The data-size="1600x1067" part seems to be critical in getting the lightbox to work. However, I'm trying to load the images dynamically and they are a mix of portrait and landscape of differing dimensions. These dimensions aren't stored in the database. Is this possible, and if so, what modifications are required to allow for these variations? Many thanks Chris

Alan CA answered 4 months ago

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;

Marta Szymanska staff pro premium answered 3 years ago

Hi, could you send me to your file with lightbox with your photographs? I'll try to help you with this lightbox. Best, Marta

Chris Sweeney pro answered 3 years ago

Many thanks Marta - file sent. Cheers Chris

Aletiger pro answered 2 years ago

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

Can you share with us the code?

Thanks in advance,

Chris Sweeney pro answered 2 years ago

In the end, this didn't work as the image sizes were required and I reverted to a different lightbox solution.

Marta Szymanska staff pro premium answered 2 years ago

Hi Guys, now we don't have a solution for lightbox without data-size but we'll try to find something in our next update. In a few next months, we'll be working on completely improveĀ our components, sections etc. We'll try to deal with the issues you're reporting us here. Best, Marta

Diego pro premium commented 3 months ago

Hi Marta,

Did you guys find out a way to center the images?


Marta Szymanska staff pro premium commented 3 months ago


if you mean images in the lightbox component, the actual code is here: We still use the data-size attribute. If you have a more specific problems that you need help, please provide a code and I'll try to help you.

Best, Marta

Pozuelos pro answered 10 months ago

Hi i found in faqs from Swipebox (lightbox) 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?

Marta Szymanska staff pro premium answered 10 months ago


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

Best, Marta

ElectricMud answered 4 months ago

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

Marta Szymanska staff pro premium commented 4 months ago

Yes, this is on our to-do list.

colinherzog pro answered a week ago

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

Marta Szymanska staff pro premium commented a week ago


for now, you can use different data-size like here:

Best, Marta

MichalBKuber pro answered a day ago

I wrote up a solution for this :

        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!

Please insert min. 20 characters.


Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No