Options
Lightbox Margins
chris457
Registered Users Posts: 17 Big grins
Going to post this question in a new thread, I've seen a few related, but nothing that accomplishes exactly what I'm looking for.
I'd like to add a margin to the bottom of the image within the lightbox. I don't like the default Smugmug behaviour that causes the caption box to cover the image.
A margin can be added via css, but it forces the image upwards (and cuts it off). Padding can be added via css, but this alters the image aspect ratio (squishing it vertically).
The best I've found is relative scaling here http://www.sherlockphotography.org/Customisations/Lightbox-margin.
But that has a couple of disadvantages as it is relative scaling on all sides, and the bottom caption bar is a fixed size, so depending on the screen resolution some of the image may still be hidden under the caption bar.
Using the relative scaling CSS, padding will still squish the image. A margin at the bottom will push the image up BUT, then the image will not be cantered in a vertical window (it will always have the bottom margin specified).
I'm at a bit of a loss. For now I've used 90% relative scaling, and only for screen widths greater than 800px (so it still fills the screen in mobile), as a simple tap in mobile will hide the caption (instead of waiting for the time out as you have to in desktop.
Sorry that got long.
I'd like to add a margin to the bottom of the image within the lightbox. I don't like the default Smugmug behaviour that causes the caption box to cover the image.
A margin can be added via css, but it forces the image upwards (and cuts it off). Padding can be added via css, but this alters the image aspect ratio (squishing it vertically).
The best I've found is relative scaling here http://www.sherlockphotography.org/Customisations/Lightbox-margin.
But that has a couple of disadvantages as it is relative scaling on all sides, and the bottom caption bar is a fixed size, so depending on the screen resolution some of the image may still be hidden under the caption bar.
Using the relative scaling CSS, padding will still squish the image. A margin at the bottom will push the image up BUT, then the image will not be cantered in a vertical window (it will always have the bottom margin specified).
I'm at a bit of a loss. For now I've used 90% relative scaling, and only for screen widths greater than 800px (so it still fills the screen in mobile), as a simple tap in mobile will hide the caption (instead of waiting for the time out as you have to in desktop.
Sorry that got long.
0