It seems, there is some CSS rule overriding the styles of PhotoSwipe. The smaller image is a lower resolution version which is used as placeholder when opening the image. Also see my reference site how it is intended to work: Lightbox with PhotoSwipe 5 (overlay caption) – WordPress Demo
Unfortunately I can not tell you right away which CSS rule is responsible here, but using the developer tools in the browser it should be possible to identify the issue. I assume there is a rule which is “too global” like img instead of a specific class img.myclass.
Right away I see the following CSS rules, wich may affect PhotoSwipe as well since they address all <img> elements including those in PhotoSwipe:
img {
margin-left: auto;
margin-right: auto;
border-radius: 4px;
}
img {
height: auto;
max-width: 100%;
}
Thanks for the tip about CSS. I found the culprit:
.pswp__img {
background-color: white !important;
padding: 80px;
border-radius: 84px;
}
It’s padding: 80px; which causes the problem.
But I really need a little white space around my photos when I want to present them. Any idea how to get this without padding ?
(You may also look at my testing site https://01.site-bakery.com/pure-standard-version/, which is cleaner, has less code.)
Ah – I see… and remember. It seems the idea with the additional padding does not work then. Right away I don’t know how to solve this, but I’ll have a look into this, if there is way to achieve this. But it may be, that this can not be done without changing PhotoSwipe itself. If this is the case, I’ll provide an option to open images without a low resolution placeholder, which should also help you.
All right, thank you very much!
For now I will stick to the padding, because there aren’t so much photos with format 3:1.
Great plugin by the way!
It seems, with the padding in the styles, the opening transition will not work any longer as expected and I don’t find a simple way to fix this, since PhotoSwipe itself also relies on its own CSS rules for certain calculations. I will try to add an option to disable the opening transation and see if this works better then. If that will help, this option will be added in the next update.
Ok, it seems, this problem can not be fixed, sorry. As soon as the style for .pswp__img contains a padding, the opening process of the lightbox in PhotoSwipe breaks. Even if transitions are completely disabled and there is only one image to show without any opening transition, this one image will show up as “ghost” image first for about 1 or 2 seconds, since PhotoSwipe seems to get confused by the padding.
Since modifying the image style this way is also not officially documented at https://photoswipe.com/styling/, the only option you have is to avoid this style override or to live with this visual glitch, sorry.
Thanks for investigating! Perhaps Dmytro can do something to the core code … Meanwhile I’ll live with that glitch.
