Как получить горизонтальный отступ в Photoswipe?

Я использую фотосвайп с отключенным зумом, как предложено здесь, но также хочу избежать очень пейзажных изображений, чтобы добраться до стрелок «предыдущий/следующий». Есть ли простой способ добиться этого?


photoswipe
person johjoh    schedule 16.05.2017    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Только что нашел решение,

1) придание «дополнения» .pswp__item, например:

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

2) обновление размера горизонтального окна просмотра перед изменением размера:

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

arrow_upward
1
arrow_downward

Я не могу комментировать ответ @johjoh, поэтому я скопирую его сюда и добавлю 3-й шаг, необходимый для того, чтобы это заработало, если вы используете getThumbBoundsFn PhotoSwipe.

1) придание «дополнения» .pswp__item, например:

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

2) обновление размера горизонтального окна просмотра перед изменением размера:

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

3) Убедитесь, что getThumbBoundsFn правильно вычисляет значение x, вычитая одну сторону (50 пикселей в этом примере) из вычисленного значения:

bounds = {
    x: {x} - 50, 
    y: ..., 
    w: ..., 
}
person noahmason    schedule 23.10.2018