Topic: lightbox with different image sizes and formats
<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>
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 Marta,
I'm interested in that solution too.
Can you share with us the code?
Thanks in advance,
Alessandro
Diego pro commented 5 years ago
Hi Marta,
Did you guys find out a way to center the images?
Diego
Marta Szymanska staff pro premium 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
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,
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
This issue hasn't been resolved, is still a problem
I'm waiting too. Please address this problem asap.
Marta Szymanska staff pro premium 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
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!
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 5 years ago
Hi,
please, create a snippet showing your problem here: https://mdbootstrap.com/snippets/. I'll try to help you.
Best,
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: No
- Technology: General Bootstrap questions
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No