Lightbox image sizing
Jtring
Registered Users Posts: 675 Major grins
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:
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
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
Jim Ringland . . . . . jtringl.smugmug.com
0
Comments
The newer version of that customisation fixes that problem:
http://www.sherlockphotography.org/Customisations/Lightbox-margin
Please check out my gallery of customisations for the New SmugMug, more to come!
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.
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
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.
Please check out my gallery of customisations for the New SmugMug, more to come!
Jim Ringland
jtringl.smugmug.com
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.
Cool, thanks. I will take a look at this.