Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


Topic: lightbox with different image sizes and formats

Chris Sweeney premium asked 7 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

lede premium answered 4 years 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 years ago

Hi,

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

Best,


MichalBKuber free answered 4 years 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 Wierzbicka staff commented 4 years ago

Hi,

thank you for your help!

Best, Marta


colinherzog free answered 5 years ago


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


Marta Wierzbicka staff commented 5 years ago

Hi,

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

Best, Marta


ElectricMud free answered 5 years ago


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


Marta Wierzbicka staff commented 5 years ago

Yes, this is on our to-do list.


Alan CA free answered 5 years 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 Wierzbicka staff answered 5 years 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


Pozuelos pro answered 5 years 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 Wierzbicka staff answered 7 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 commented 5 years ago

Hi Marta,

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

Diego


Marta Wierzbicka staff commented 5 years 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


Chris Sweeney premium answered 7 years ago


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

Aletiger premium answered 7 years ago


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

Can you share with us the code?

Thanks in advance,
Alessandro


Chris Sweeney premium answered 7 years ago


Many thanks Marta - file sent. Cheers Chris

Marta Wierzbicka staff answered 7 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

Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Premium
  • Premium support: Yes
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags