angular-bootstrap-lightbox icon indicating copy to clipboard operation
angular-bootstrap-lightbox copied to clipboard

Trim the left & right margins

Open coryking opened this issue 10 years ago • 4 comments

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?

coryking avatar Oct 20 '14 21:10 coryking

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 avatar Oct 25 '14 22:10 compact

@compact You could, at the very least, put those numbers into an object and expose it to the developers to make it more configurable.

Ryuno-Ki avatar Sep 18 '15 19:09 Ryuno-Ki

You can edit the calculation methods themselves, as in http://compact.github.io/angular-bootstrap-lightbox/demo2/index.html

compact avatar Oct 24 '15 23:10 compact

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
        };
    };

wintermute42 avatar Feb 18 '16 17:02 wintermute42