Slight hickup (?) in loading css for border color?

In short – feel free to change colors or to hide elements you don’t need with CSS but do not add a padding or borders around the image in the lightbox, this is not supported, sorry.

Explanation:

PhotoSwipe needs to know the exact size of the image to display it properly. This is needed since PhotoSwipe also allows zooming images depending on their size and the size of the viewport of the device which displays the image.

Then there is also an opening transition which does not use the final image but a smaller preview generated by the WordPress media gallery. See the “Info” tab in the Lightbox settings which tells you the sizes which used in your installation. The preview has the same aspect ratio but not the same pixel size. The idea is, that for very large images, a smaller resolution image is displayed first and then the final image is loaded.

By adding additional padding and borders the whole opening transition will not work correctly any longer as it was never designed to support this. Styling is supported in general, but only for colors and icons or to hide elements you don’t need. Also see https://photoswipe.com/styling/ about details.

Hello Arno, thank you for explaining. I removed the padding and thick border and added only 1px border which works okay, but adding a little box-shadow gives the same result of that hickup, so that isn’t possible either.

It looks okay though, so I will keep using it. But why is there a Image Padding option on the settings page?

Regards, Jack

The padding setting was added because people asked for it since PhotoSwipe itself has this option. See https://photoswipe.com/options/#padding.

Padding controls how much space is added around the image as minimum if the image is large enough to fill the viewport horizontally or vertically. However, the padding will not be added if the image is already so small that a larger padding is already visible around it. And “padding” means the distance from the image to the viewport border and not inside an image frame.

For example: let’s assume an image is 1280×720 and the viewport is 1920×1080. This means there is already a padding of 180 top and bottom and 320 left and right because PhotoSwipe will never make images larger as they are by default but only make them smaller, so they will fit the viewport. So if you set the padding to 100 on all four sides, that will not change anything at all for a large viewport. But if you have an image with an original size of 1920×1080 or larger, adding a padding of 100 on each side will cause the image to display at 1564×880 to make sure, that there is at least a padding of 100 (1080 minus 100 top and minus 100 bottom = 880).

Plugins for PhotoSwipe can also add a padding if needed to make sure there is enough space for a caption or other elements. The “dynamic caption” uses this to add empty space right or below the image for the caption box.

Edit: also just a 1 pixel border will cause problems as this changes the image size. Do not add any padding, margin or borders at all. Maybe with future versions this may change – but right now it is designed this way to display an image in front of a background without any borders.

• This reply was modified 10 months ago by Arno Welzel.

Thanks for you lengthy answer, that clarifies a lot :). I still think it looks good as it is so I will keep on using it. Swiping works very well, and I also like the option to choose what information will be shown beneath the larger image.