help! lightbox adjustments

smadar79k · September 27, 2013

hi all!

so i'm customizing my smugmug site for future commercial use, and i got an issue with the light box. one support hero suggested i post it up in this forum, so- here i am!

to put it in short: the light box that opens when clicking on an image is simply way too big for my use. the support hero says that it's designed so that it would fit whole in any browser, but that's a problem for me, both aesthetically, and also because it allows a screen capture and possible copyright infringement.

so- what i'm interested in is a method to control the size of the light box. i would like have it fit somewhere around 25% of the screen, and centered.

i don't know much about messing around with CSS or whatever, but i would really love any suggestions you might have and possibly a step-by-step solution....

thanks so much for helping!

smadar

thenickdude · September 27, 2013

Anything that you do to scale the image down in the lightbox with CSS is going to be worthless as a protection method, since the actual size of the image file won't change. The only way to reduce the resolution of the image that someone could save is to reduce the maximum display size of your images in your gallery settings.

If you do just want it as an aesthetic option, add this CSS code to your theme:

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

You can change the 0.97 to 0.25 in that code if you only want to fill 25% of the window (that's about as big as a postage stamp).

leftquark · September 27, 2013

As Lamah mentioned, your best bet for making sure people don't see large photos is to go to your Gallery Settings (Customize -> Gallery Settings) and to change the "Maximum Display Size" (under "Security & Privacy" tab") to something smaller.

smadar79k · September 27, 2013

thanks lamah! worked great, though what i had in mind is all of the light box window getting smaller, and not only the photo within. but still... it's better.
do you know of any way to make the entire window smaller, so that there is still visibility to the page below? or if not- a way to make the light box background translucent?

thanks again!

thenickdude · September 28, 2013

To make the background translucent (reduce the number for more transparent, increase for more opaque):

.sm-user-ui .yui3-widget-mask.sm-lightbox-mask {
  opacity: 0.5;
}

I think scaling down the whole lightbox is probably not achievable.

rht · September 28, 2013

Lamah wrote: »
To make the background translucent (reduce the number for more transparent, increase for more opaque):
.sm-user-ui .yui3-widget-mask.sm-lightbox-mask {
  opacity: 0.5;
}
I think scaling down the whole lightbox is probably not achievable.

You certainly can adjust the size of the mask and position it relative, but that's probably not what you want - because all the controls like the navigation arrows, full screen and close button still remain at the edges of the page.

A visual trick would be drop shadow and a border:

/* Lightbox formatting */
.sm-lightbox-image {
 -webkit-box-shadow: rgba(0,0,0,0.8) 0px 0 30px;
 -moz-box-shadow: rgba(0,0,0,0.8) 0 0 30px;
 box-shadow: rgba(0,0,0,0.8) 0 0 30px;
 border: 5px solid #333333;
 overflow: hidden;
border-radius:20px 20px 20px 20px;
}

This, when used in conjuction with the opacity setting above makes the lightbox seem smaller (the size of the image). Of course this is all academic on the mobile version. You can probably shorten the border-radius to just 20px if you want.

smadar79k · September 28, 2013

This was actually very helpful!
i even managed to tweak it a bit to my own taste - a white boarder instead of the brown one, for example. and i gotta say i feel like a computer genius for being able to achieve that!!! (-:
one question though:
in the css it has this line concerning the boarder: border: 5px solid #333333;
what word do i use instead of "solid" if i aim to have my boarder a bit transparent (that is- i'm assuming "solid" is the command for that feature)?

rht wrote: »
You certainly can adjust the size of the mask and position it relative, but that's probably not what you want - because all the controls like the navigation arrows, full screen and close button still remain at the edges of the page.

A visual trick would be drop shadow and a border:
/* Lightbox formatting */
.sm-lightbox-image {
 -webkit-box-shadow: rgba(0,0,0,0.8) 0px 0 30px;
 -moz-box-shadow: rgba(0,0,0,0.8) 0 0 30px;
 box-shadow: rgba(0,0,0,0.8) 0 0 30px;
 border: 5px solid #333333;
 overflow: hidden;
border-radius:20px 20px 20px 20px;
}
This, when used in conjuction with the opacity setting above makes the lightbox seem smaller (the size of the image). Of course this is all academic on the mobile version. You can probably shorten the border-radius to just 20px if you want.

smadar79k · September 28, 2013

excellent!

thank you once again!

Lamah wrote: »
To make the background translucent (reduce the number for more transparent, increase for more opaque):
.sm-user-ui .yui3-widget-mask.sm-lightbox-mask {
  opacity: 0.5;
}
I think scaling down the whole lightbox is probably not achievable.

rht · September 29, 2013

Hi there.

You could try this code:

border: 5px solid rgba(0,0,0,0.5);

Where the first three zeros are Red, Green, Blue and the final 0.5 indicates opacity/alpha (from 0 through to 1). 0,0,0 gives you black, and 0.5 means 50% opacity.

I've not tried it myself. However, you might get problems with the square image overflowing outside of the border region which won't look good. The word solid indicates the style of border you want, ie, dashed lines or solid, etc. See the following for an overview of the settings:

http://www.w3schools.com/css/css_border.asp

I did it on mine to look like this:
http://reheatimages.smugmug.com/CivilAviation/Aerial/i-F8jxFcn/A

Repositioning all the controls for the lightbox doesn't seem easy at all especially given any tweaks you do must be appropriate for not just web, but mobile and tablet devices too.

kyllitedre · October 19, 2013

I have exactly the same problem ad smadar79k. I really need to scale down this lightbox, or at least bring buttons closer to photograph (whis is quite small in my site, deliberately).
Unfortunately even this transparent code is not working for me. I have no idea why. I can have the border around photo etc, but not the transparent background

I need help!
But then again, is there no way to bring all buttons (arrows, close, filename, size, download etc closer to photo or just in general make lightbox smaller??

thenickdude · October 19, 2013

kyllitedre wrote: »

is there no way to bring all buttons (arrows, close, filename, size, download etc closer to photo or just in general make lightbox smaller??

Apply this customisation:

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

But add this CSS to the bottom:

.sm-lightbox .sm-lightbox-content { 
  max-height: 400px !important;
}

Tune that height to set the Lightbox to whatever height you like!

GRBlizz · October 19, 2013

Thank you so much for this code! I don't really know anything about CSS, but using your code I was able to get the lightbox exactly the way I wanted it.

Here's my personal site with your custom code. http://sunnyshots.smugmug.com/PhotoBlog/2013/

This went so well that I now feel capable of trying some of your other tricks!

help! lightbox adjustments

Comments