How to get horizontal padding in Photoswipe?

Question

I'm using photoswipe with disabled zoom, like suggested here, but also want to avoid very landscapish images to reach beneath the prev/next arrows. Is there an easy way to achieve this?

Answer 1

Just found a solution, by

1) giving "padding" to the .pswp__item, like so:

.pswp__item {
    left: 50px;
    right: 50px;
}

2) updating the horizontal viewport size before resize:

pswp.listen('beforeResize', function(){
    pswp.viewportSize.x = pswp.viewportSize.x - 100;
);

Answer 2

I can't comment on @johjoh's answer, so I'm going to copy it here and add the 3rd step required to get this working if you are using PhotoSwipe's getThumbBoundsFn.

1) giving "padding" to the .pswp__item, like so:

.pswp__item {
    left: 50px;
    right: 50px;
}

2) updating the horizontal viewport size before resize:

pswp.listen('beforeResize', function(){
    pswp.viewportSize.x = pswp.viewportSize.x - 100;
);

3) Ensuring the getThumbBoundsFn properly calculates the x value by subtracting one side (50px in this example) from your calculated value:

bounds = {
    x: {x} - 50, 
    y: ..., 
    w: ..., 
}