0

I am trying to customize the Lightbox/zoom feature in Cargo Collective, believe it uses Photoswiper. As of now it fills the whole screen and would like to be able to control the size so it does not cover the top and bottom nav bars. Can I add some padding or block to the PSWP? The PSWP is not showing up in the general CSS editor. SO it seems as though I would need to add some of my own code. The goal is trim off the top and bottom and also control the size of image when zoomed.
Thank you in advance.

Jeff Henrikson
  • 1
  • 2

2 Answers2

0

I came across the same problem trying to resize the PhotoSwipe image within my Cargo Collective site. I added the following to the custom CSS and it worked perfectly:

.pswp img { 
object-fit: contain !important;
max-height: 400px !important;
max-width: auto !important;
margin-top: 100px;
margin-bottom: 100px;
 }

I also styled the background with the following. You could also add margin top and bottom here if you want to add a gap in the PhotoSwipe background.

.pswp__bg {
    background-color: #fff !important;
}
.Pswp_bg image-zoom-background {
    background-color: #fff !important;
}

Cheers!

Shelby Neville
  • 21
  • 1
  • Amazing, will try this out! – Jeff Henrikson Jun 12 '20 at 01:03
  • The image resizing worked perfectly, thank you. Unfortunately the "zoom" window is still coming up full screen. Let me know if you have any other ideas! – Jeff Henrikson Jun 12 '20 at 02:19
  • Hey Jeff, I applied a margin to the bg element and that worked to reveal the nav bar above the lightbox. For some reason margin-bottom didn't work, but there must be a way... I added: .pswp__bg { background-color: #fff !important; margin-top: 50px; – Shelby Neville Jun 12 '20 at 19:08
0

An update - this solution looked great on my screen but too small on a big screen. Styling with percentages rather than a single px size is a better solution here. Hence:

 .pswp img {
     object-fit: contain !important;
     max-height: 70% !important;
     max-width: auto !important;
     margin-top: 5%;
     margin-bottom: auto;
}
ShelbyN
  • 1