lightbox with different image sizes and formats

web
mobile

Topic: lightbox with different image sizes and formats

Chris Sweeney pro premium 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="http://mdbootstrap.com/img/Photos/Lightbox/Original/img%20(112).jpg" data-size="1600x1067">
<img src="http://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(112).jpg" class="img-fluid">
</a>
</figure>
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 8 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 m.szymanska@mdbootstrap.com your file with lightbox with your photographs? I'll try to help you with this lightbox. Best, Marta

Chris Sweeney pro premium 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,
Alessandro


Chris Sweeney pro premium 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 7 months ago

Hi Marta,

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

Diego


Marta Szymanska staff pro premium commented 7 months ago

Hi,

if you mean images in the lightbox component, the actual code is here: https://mdbootstrap.com/docs/jquery/javascript/lightbox/. 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 a year ago

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?


Marta Szymanska staff pro premium answered a year ago

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


ElectricMud answered 8 months ago

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


Marta Szymanska staff pro premium commented 8 months ago

Yes, this is on our to-do list.


colinherzog pro answered 5 months ago

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


Marta Szymanska staff pro premium commented 5 months ago

Hi,

for now, you can use different data-size like here: https://mdbootstrap.com/snippets/jquery/marta-szymanska/1635700.

Best, Marta


MichalBKuber pro answered 4 months ago

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!


Marta Szymanska staff pro premium commented 4 months ago

Hi,

thank you for your help!

Best, Marta


lede pro answered 4 months ago

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


Mateusz Łubianka staff commented 4 months ago

Hi,

please, create a snippet showing your problem here: https://mdbootstrap.com/snippets/. I'll try to help you.

Best,


Please insert min. 20 characters.
Status

Answered

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