Customizing the Lightbox

Darter02

The purpose of this thread is to collect links to the various Lightbox modifications. I'm going to slowly add them here so I know where to find them when I need them. I'm hoping to find enough that I can plan out a design of sorts. After all, the lightbox is where folks actually look closely at an image. As it stands now I find it acceptable, but as with anything perhaps it can be improved.

Feel free to add a comment with any links you've found useful. I'll edit in all links to this top post. This may take a while as I slowly peruse modifications.

Collected Links

Always Show Captions

Label Buttons

Add a Margin

Modify the Add to Cart Button

Create an Exit Button

Remove Fullscreen Button

Always Show Captions 2

Change Title & Caption Fonts

Widen the Caption Field

Add the Word Close

Center Title

Darter02 wrote: »

Round the corners of the images in the lightbox.

/* ROUND IMAGES DISPLAYED IN THE LIGHTBOX */
  .sm-lightbox-image {
      border-radius:25px;
  };
  }

beardedgit wrote: »

Set the Lightbox background colour:

[COLOR=#aeaeae]/* Set the Lightbox background colour */[/COLOR]
[COLOR=#ff6400].sm-user-ui[/COLOR] [COLOR=#ff6400].sm-lightbox[/COLOR]{
   [COLOR=#8da6ce]background[/COLOR]: [COLOR=#d8fa3c]YOUR PREFERRED COLOUR HERE[/COLOR]
}

Anyone have links to other stuff we can do? How about forcing comments to appear? Keywords?

denisegoldberg

Thanks! I think this will be a good reference for folks looking to make changes.

--- Denise

Darter02

Round the corners of the images in the lightbox.

/* ROUND IMAGES DISPLAYED IN THE LIGHTBOX */
  .sm-lightbox-image {
      border-radius:25px;
  };
  }

beardedgit

Set the Lightbox background colour:

[COLOR=#aeaeae]/* Set the Lightbox background colour */[/COLOR]
[COLOR=#ff6400].sm-user-ui[/COLOR] [COLOR=#ff6400].sm-lightbox[/COLOR]{
   [COLOR=#8da6ce]background[/COLOR]: [COLOR=#d8fa3c]YOUR PREFERRED COLOUR HERE[/COLOR]
}

Golfnut

Rounded Corners & Background Color in Lightbox
This is not working for me. It creates a rounded border around the entire window (not including the title and description), not just the image

/* ROUND IMAGES DISPLAYED IN THE LIGHTBOX */
.sm-lightbox-image {
border-radius:25px;
};
}

I am wondering if it has problems when used in combination with all the lightbox modifications from Darter02.

Also, I could not get the background color to work:
/* Set the Lightbox background colour */
.sm-user-ui .sm-lightbox{
background: YOUR PREFERRED COLOUR HERE
}

But I was able to modify the background color with this (but it only changes the image area):

.sm-lightbox-image {
background: #181825;
}

Golfnut

Lightbox CSS cropping images
I have implemented all of your CSS enhancements for the Lightbox. I like it very much; however, the images are getting cropped at the top and bottom. Any help would be greatly appreciated.
Charles
www.arrowphotos2.smugmug.com

Here are some images showing how it is getting cropped:

thenickdude

Did you perhaps apply my "always show captions" modification? Please read the section on that page called "note" for important details if you have right-click protection turned on.

Golfnut

Lamah wrote: »

Did you perhaps apply my "always show captions" modification? Please read the section on that page called "note" for important details if you have right-click protection turned on.

Ah, I see, thanks! Yes, I have right-click protection turned on; however, I didn't comment out the section above it so that the correction section would be applied.

Now the 3:2 aspect ratio images (horizontal) fit perfectly; however, the vertical oriented 2:3 images are still cropped. Note the top of the tree is cropped in the example. The bottom is cropped as well, but it is not so easy to notice.
Thanks for your help.
Charles

thenickdude

Can you add that "scale photo to fill the window" line back into this section, so it looks like this:

/* If main image uses right-click protection, it's a background-image, so we have to use a different approach: */
	.sm-user-ui .sm-lightbox .sm-lightbox-image[src="/img/spacer.gif"] {
		width:100% !important;
		height:100% !important;
		
		top:0;
		-webkit-transform:none;
		-moz-transform:none;
		-ms-transform:none;
		-o-transform:none;
		transform:none;
	
		background-size: contain !important; /* Scale photo to fill the window */
		background-position: center center;
	}

It should be working properly if that line is present.

Golfnut

That works!

Lamah wrote: »

Can you add that "scale photo to fill the window" line back into this section, so it looks like this:

It should be working properly if that line is present.

It works fine now with that change, thanks!
Charles