New Lightbox Padding

Patrick B

Hi Everyone,

Another quick question on the new Lightbox display mode.
Beautiful and clean but on some images, or all in this case, i would love to have some padding on the top and bottom (or all sides if thats better). Some images in the galleries are older and don't have the resolution to display nicely with the default "Fill" setting.

I looked around but it didn't seem possible to find a setting to change the behavior from fill to a maximum size. It would be nice if I could specify that it can fill up to a certain size.

Since I'm imaging that that's not possible I was wondering if anyone has had better luck finding the css where I can modify it so that their is still the fill function but adding top and bottom padding so their is some white space all around?

Any help would be appreciated.

thenickdude

This is not really possible, because JavaScript is currently being used to make sure the image precisely touches the edges, which we can't modify. The best we can do is add a transparent border to the image:

.sm-lightbox-image {
    border: 15px solid transparent;
    
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

The side-effect is that the transparent border will still be there, shrinking the image slightly, when the image isn't filling the window.

Patrick B

Hi Lamah,

Thats what I thought but thanks for your solution. It looked like it would work but seems to be causing some issues. When I apply the css the transparent border seems to introduce an x and y background repeat on the image on the left and top of the image, as if they are tiling the background image in Lightbox. I tried to resolve this by setting the border from transparent to white. That looked like it was going to work like a charm but seems to be cropping the image by forcing it over in the same areas that its repeating in the left and top corner.

I'll play around with it and see if their is a way of fixing that, but thank you for the idea.

thenickdude

Hm, which web browser are you using (name & version)? If I could reproduce that problem, I might be able to tweak it for you to fix it.

Patrick B

Lamah wrote: »

Hm, which web browser are you using (name & version)? If I could reproduce that problem, I might be able to tweak it for you to fix it.

I tested in both Chrome Version 28.0.1500.95 and Firefox 22.0 on mac osx 10.8.4

Perhaps it also has something to do with where I implemented the Css, i placed it in the advanced field under the theme, as i assumed that was the correct location.

thenickdude

That's the correct location, and I'm using Chrome too on the same Mac OS where it works for me. Is your site public, can you post a link? I'm guessing the problem is some interaction with the site theme.

Patrick B

Hi lamah,

The site is public, here is the link http://www.susanhelmsphotography.com/

thenickdude

Ahhh I see, the problem is that you have right-click protection enabled and this trick wasn't compatible with that. Try this instead:

.sm-lightbox-image {
  border: 15px solid transparent;

  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;

  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain !important;
}

By the way, the image underneath your logo doesn't load for me. Is it coming from a Private gallery? Those are only visible when logged on, you'll need to move that photo to an Unlisted gallery for it to be visible.

Patrick B

Hi Lamah,

Ah, that worked. Thanks so much.

As for the sidebar image - that's a bit odd. When logged out I can see it on all my browsers. It's in a public gallery and just the image is set to hidden (Other>People and Animals). The only place I am seeing that behavior, where it wont load is in my mobile browser (safari on the iphone 4s and 5), though when set to unhid the image it does load.
I had written about the issue on another thread where I had questions relating to the mobile site (http://www.dgrin.com/showthread.php?t=238903).
Perhaps I will try moving it to a public but unlisted gallery.

Thanks for all your help.

thenickdude

When you log out, your browser will still have the image in its cache from when you are logged on, that's why it still shows up for you. If you log out, then visit that page and hold down shift or control and click on the refresh button in your browser, you should see your cache empty out and that image be downloaded from scratch, and it'll be broken this time.