Lightbox image sizing

Jtring · October 7, 2013

I'm seeing odd behavior where the sizing of images in the lightbox seems to depend on whether right-click protection is turned on or off, all other things being the same. Compare the lightbox images in the following two test galleries when the browser window is sized so the images are constrained on the left and the right.

http://jtringl.smugmug.com/Other/RC-Protected
http://jtringl.smugmug.com/Other/Not-RC-Protected

The side margins, generated by some custom CSS code, are different. The images resize as the browser window resizes, so this is not a case of fixing to X2 or X3. And the images in question are all quite large -- see the info box. I've replicated this behavior on Firefox 24, Internet Explorer 10, and Chrome 30. It doesn't matter whether I'm logged in or not.

Here's my CSS code relevant to lightbox image sizing, some of which is a variation of that which appears on Lamah's site:

/* These blocks of code raise the caption in the lightbox
from the default of 40px to 56px and adjusts the padding
around the picture.  40px on top avoids interference with the "full screen"
icon on the top right.  60px below, with the 56px position for the text, 
allows for two-line captions.
That appears to work for almost all pictures at all resolutions.  
The 48 px on the sides avoids interference with the right and left arrows.
This is a variation on code found at http://www.sherlockphotography.org/Customisations/Lightbox-margin
Added 2013-09-29 + mods 2013-10-05*/

.sm-lightbox-basic .yui3-widget-ft .sm-lightbox-panel {
 height: 56px !important;
}
.sm-lightbox-image {
 border-width: 42px 48px 60px 48px;
 border-style: solid;
 border-color: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;
}

The Not-RC-Protected version seems to be following the border width code correctly. The RC-protected version add extra width on the sides. If you want to see all my CSS, it's copied on my Tools page (use the main menu).

Any idea what's going on here? SM bug or some odd interaction with my code? Nothing here is disastrous, but I worry when I see a difference like this. Is there something else lurking I haven't yet found? Is some odd side effect coming with the next SM site fix? And in any case, I'd prefer what I see on the screen match what I'm asking for in my CSS mods.

Jim Ringland
jtringl.smugmug.com

thenickdude · October 7, 2013

It turns out that my customisation had a side-effect of changing the aspect ratio of the photo slightly, particularly for very wide images, if right-click protection was turned off (wide images got stretched horizontally).

The newer version of that customisation fixes that problem:

http://www.sherlockphotography.org/Customisations/Lightbox-margin

Jtring · October 7, 2013

Lamah wrote: »

It turns out that my customisation had a side-effect of changing the aspect ratio of the photo slightly, particularly for very wide images, if right-click protection was turned off (wide images got stretched horizontally)...

OK, I understand the aspect ratio issue. The whole process pushes the content in, retaining the original box size for both the content and border combined. Your revised approach keeps the push proportional while the fixed width approach does not. What I don't understand is why the fixed width case should this depend on whether right-click protection is on or off Border sizing and right-click-ability would seem to be totally separate issues. Am I missing something?

To pull on that thread a little bit, I did a little screen measuring to see what the various cases would actually produce. I used a picture whose original aspect ratio was 16:10.

RC protection off, using the fixed-width borders. The visible picture has an aspect ratio close to 17:10. Adding in 102px vertically and 96px horizontally – my total fixed margins – I get a bounding box that is back to 16:10. That bounding box would touch the edges of the lightbox. That seems to match what I'd expect.

RC protection on, using the fixed-width borders. The visible picture itself is close to 16:10! Adding in the 102 and 96px margins gives a bounding box that is more like 15:10. And that bounding box would not touch the edges of the lightbox. The result looks better than the previous case, but it doesn't match my model of how all this is supposed to behave.

Proportional-width borders. The aspect ratio is always 16:10 and the bounding box would reach the edge of the lightbox.

Now I'm really lost. It rather looks like SM lightbox code behavior about the same for the first and third but just different for the middle case. Any clues as why this should happen – is it just weird lightbox coding? - would be welcome.

BTW, the obvious question here is why don't I just use to proportional margins and be done with it. Proportional margins don't always work real well for what I'm after: building white space around the image to avoid interference with the fixed-size right and left arrows, the "X" at the top, and the caption. A great proportion for that white space for one screen resolution or one browser window size may not be a great proportion for another. I'll eventually choose which imperfect solution to go with, but I'd like to understand as much as I can first.

Jim Ringland
jtringl.smugmug.com

thenickdude · October 8, 2013

Jtring wrote: »

What I don't understand is why the fixed width case should this depend on whether right-click protection is on or off

When right-click protection is turned off, the photo is rendered as a simple <img> tag, which has a precise width and height set by JavaScript in order to proportionately scale it to fill the window. When box-sizing is set to border-box, and a margin is added to the image, it causes the image to shrink by that margin amount. But since the margin is not set as a percentage of the image height, or image width, that fixed change in the image height and width will stretch the image and cause the image aspect ratio to change (unless, say, your image was square and your margin was the same on all sides).

If you have right-click protection turned on, the image is replaced with a transparent placeholder, and the photo is set as a CSS background image on that placeholder. CSS background images have a nifty feature where you can request that the image be scaled proportionately to fill its container. This means that when the margin is applied to the image, the background will be rescaled proportionately to fit the new size, avoiding any image stretching.

Jtring · October 8, 2013

I understand ... and I've now found http://www.sherlockphotography.org/Customisations/Lightbox-captions which has even more options. You've given me the information I needed and more tools with which to go forward. Thank you very much, Lamah.

Jim Ringland
jtringl.smugmug.com

chris457 · November 19, 2014

Did you ever get anywhere with this? I'm resorting to proportional scaling but I'd really like to add a fixed margin/padding to the bottom so the image isn't covered by the caption (without messing with the aspect ratio of the image).

I'd rather not turn right click protection on, but it appears that may be the answer?

Jtring · November 19, 2014

chris457 wrote: »

Did you ever get anywhere with this? I'm resorting to proportional scaling but I'd really like to add a fixed margin/padding to the bottom so the image isn't covered by the caption (without messing with the aspect ratio of the image).

I'd rather not turn right click protection on, but it appears that may be the answer?

I created my own hybrid of various things Nick / Lamah has posted. You can see what my lightbox looks like in action by examining my site. I've also posted an image of the CSS I'm using -- including the rather complex code that adjusts the lightbox -- at http://jtringl.smugmug.com/CSS. The lightbox bits begin about half way down the page. No warranties or guarantees, but you are welcome to use this for ideas to build your own custom lightbox. If you prefer to just take a piece of CSS as is and use it, you might examine Nick's superlative site: http://www.sherlockphotography.org/Customisations

By the way, I have right click protection off on almost all of my galleries although I have code to deal with both the on and off cases.

chris457 · November 23, 2014

Jtring wrote: »

I created my own hybrid of various things Nick / Lamah has posted. You can see what my lightbox looks like in action by examining my site. I've also posted an image of the CSS I'm using -- including the rather complex code that adjusts the lightbox -- at http://jtringl.smugmug.com/CSS. The lightbox bits begin about half way down the page. No warranties or guarantees, but you are welcome to use this for ideas to build your own custom lightbox. If you prefer to just take a piece of CSS as is and use it, you might examine Nick's superlative site: http://www.sherlockphotography.org/Customisations

By the way, I have right click protection off on almost all of my galleries although I have code to deal with both the on and off cases.

Cool, thanks. I will take a look at this.

Lightbox image sizing

Comments