LightBox Gallery Material Box IMG Height/Width

Topic: LightBox Gallery Material Box IMG Height/Width

Daniel pro asked 5 years ago

Creating a default LightBox Gallery Material Box, what are the IMG Dimension we should use? Weirdly the code adjusts the width of any image automatically to fit fine in the Gallery but not the Height. If we use default height:auto; the height is original and will be messed as not every IMG has same height. What are the correct / ideal IMG Dimensions we should use on Upload of Media? I assume that all Media must be the exact same size to work finely in this kind of gallery. Of course we can crop, but then we will have gaps between the single image (gallery) items. Thank you

Add comment

Michal Szymanski staff answered 5 years ago

0 0 Best answer

The thing is a little bit tricky. Because LightBox Galllery uses Bootstrap Grid to provide a responsiveness, each column has a defined width. In our example from documentation for each image width is 1/3 of available space (because we use bootstrap columns "col-md-4). The height isn't defined, but it can be. But then we risk that our images will be cut or streeched (depend if we set "overflow" to "hidden" or not). So the best way to provide a high quality images in gallery and the best user experience is to prepare images in the same size. Then you can be sure they will be always display perfectly.

rjmead23 pro commented 3 years ago

I'm creating charts from out of Excel which I'm then pulling into the lightbox.. I've found that even though I set the images to exactly the same size in Excel, all of the images don't line up properly.. Are there any more details you can offer around how to make sure the images work in a lightbox?

Add comment

Daniel pro answered 5 years ago

0 0 Best answer

Yeah, that's what I suspected. Best practice begins in best preparation of content :D thank you Michal, still fully convinced of MDB :)

Add comment

Michal Szymanski staff answered 5 years ago

0 0 Best answer

No problem Daniel! ;)

Add comment

Write

Create snippet

Status

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

Daniel

Pro User

10Support score
15Questions 21Answers

0Snippets likes 0Snippets

Service	Why?	Agreement
Essential cookies	These cookies are strictly necessary to provide you with services available through our websites and to use some of its features, such as access to secure areas. Because these cookies are strictly necessary to deliver the websites, you cannot refuse them without impacting how our websites function. You can block or delete them by changing your browser settings.	No Yes
Functional	These cookies are used to enhance the performance and functionality of our websites but are non-essential to their use. However, without these cookies, certain functionality may become unavailable. These cookies are served by brandflow.net.	No Yes
Google AdWords	These cookies are used to make advertising via Google AdWords messages more relevant to you and your interests. They also perform functions like preventing the same ad from continuously reappearing, ensuring that ads are properly displayed, and in some cases selecting advertisements that are based on your interests.	No Yes
Facebook Pixel	These cookies are used to make advertising Facebook messages more relevant to you and your interests. They also perform functions like preventing the same ad from continuously reappearing, ensuring that ads are properly displayed, and in some cases selecting advertisements that are based on your interests.	No Yes

Daniel

Privacy Preferences