angular-bootstrap-lightbox
angular-bootstrap-lightbox copied to clipboard
Trim the left & right margins
I'm trying to fit this lightbox into a mobile screen. There is a huge amount of margins on the left & right of every image.
I'm not sure how to go about customizing this. I see the "calculateImageDimensionLimits" & "calculateModalDimensions" but don't know how to change any of those values. Should those hard-coded numbers be baked into the configuration?
Please try with v0.3.1.
If the problem remains, what devices/browsers are you using? Do the images not fill up the screen vertically when there are side margins?
The hard-coded numbers are not good practice, though they are directly based on Bootstrap's CSS values. I'll think about whether there's a better way to do it.
@compact You could, at the very least, put those numbers into an object and expose it to the developers to make it more configurable.
You can edit the calculation methods themselves, as in http://compact.github.io/angular-bootstrap-lightbox/demo2/index.html
In my experience, setting dimensions to max actually works pretty well:
LightboxProvider.calculateImageDimensionLimits = function (dimensions) {
return {
'maxWidth': dimensions.windowWidth,
'maxHeight': dimensions.windowHeight
};
};
LightboxProvider.calculateModalDimensions = function (dimensions) {
return {
'width': dimensions.imageDisplayWidth,
'height': dimensions.imageDisplayHeight
};
};