it would be great if lightbox was fully responsive on mobile with support for changing orientation while viewing an image, and without needing a page reload. After playing around a bit with CSS it does not take much to achieve this effect with CSS3.
So as some food for thought I'm adding the following solution (that I'll be using productively from now on):
`
.lightbox
{
position: fixed; /fixes (no pun intended) issue that image is not visible on mobile, when scroll pos is further down the page/
top: 30px !important;
}
.lb-outerContainer
{
display: inline-block;
width: initial !important;
height: initial !important;
}
.lb-image
{
width: initial !important;
height: initial !important;
max-width: 100% !important;
max-height: calc(100vh - 35px) !important;
}
.lb-dataContainer
{
width: initial !important;
}
.lb-details
{
text-align: center !important;
width: 100% !important;
}
.lb-close
{
display: none !important;
}
.lb-number
{
display: initial !important;
}
@media screen and (max-width: 1050px)
{
lightbox
{
top: 0 !important;
}
}
`
And one more fix for #541
Still needed for Chrome, Android 8.1:
lightboxOverlay
{
width: 100% !important;
height: 150% !important; /use 150% to avoid looking (temporarily) beyond bounds while scrolling/
position: fixed;
}
Hi,
it would be great if lightbox was fully responsive on mobile with support for changing orientation while viewing an image, and without needing a page reload. After playing around a bit with CSS it does not take much to achieve this effect with CSS3.
So as some food for thought I'm adding the following solution (that I'll be using productively from now on):
` .lightbox { position: fixed; /fixes (no pun intended) issue that image is not visible on mobile, when scroll pos is further down the page/ top: 30px !important; } .lb-outerContainer { display: inline-block; width: initial !important; height: initial !important; } .lb-image { width: initial !important; height: initial !important; max-width: 100% !important; max-height: calc(100vh - 35px) !important; } .lb-dataContainer { width: initial !important; } .lb-details { text-align: center !important; width: 100% !important; } .lb-close { display: none !important; }
.lb-number { display: initial !important; }
@media screen and (max-width: 1050px) {
lightbox
} `
And one more fix for #541 Still needed for Chrome, Android 8.1:
lightboxOverlay
{ width: 100% !important; height: 150% !important; /use 150% to avoid looking (temporarily) beyond bounds while scrolling/ position: fixed; }
Result: [mobile, landscape]
Standard lightbox 2.10.0: