CODEWITHSUNDEEP
photoswipe
user1656017
user1656017

Reputation: 87

Photoswipe adding margin to lightbox image

I'm using http://photoswipe.com/ here: http://www.michelperezphoto.com/.

Trying to add padding or margin so that the image displayed in lightbox does not occupy the whole width and or height of screen...

Tried this: .pswp__item { margin: 5%; }

But now the lightbox image is not centered ...its slightly offcenter to the right...

Any insight would be greatly appreciated...

Cheers.....

Upvotes: 0

Views: 1054

Answers (3)

Vlad Moyseenko
Vlad Moyseenko

Reputation: 223

Now there are two options for lightbox. padding and paddingFn https://photoswipe.com/options/#padding, https://photoswipe.com/options/#paddingfn

For example

const lightbox = new PhotoSwipeLightbox({
  // ...
  paddingFn: (viewportSize, itemData, index) => {
          return {
            top: viewportSize.x > 600 ? 82 : 0,
            bottom: viewportSize.x > 600 ? 100 : 0,
            left: viewportSize.x < 600 ? 10 : 0,
            right: viewportSize.x < 600 ? 10 : 0
          }
   }
})

Upvotes: 1

Mr Jonny Wood
Mr Jonny Wood

Reputation: 3854

I have a border-radius and drop shadow applied to my images, using the margin technique above masked my images and didn't look good. I found a better solution:

.pswp__img {
    transform: scale(0.9);
}

Upvotes: 2

user1656017
user1656017

Reputation: 87

In case this helps someone, I got desired effect using this:

@media (min-width: 900px) { 
 .pswp__item {
    margin: 5% 5% 5% 0%;
  }
}

Upvotes: 1

Related Questions