Do you have long, detailed captions underneath your photos? By default, SmugMug hides the caption of your photo in the lightbox, requiring your customers to hover over it to reveal it. Even when revealed, the space allocated to the caption is small, requiring your customer to view only a portion of your caption at a time in an awkward scrollable box.
This customisation changes the lightbox so that the photo title, caption, and photo controls like the buy button are always visible, without hovering. They are displayed below the photo, and your customers can scroll the page downwards to see the complete caption if it is cut off.
Please check out an example gallery below to see how the customised lightbox behaves:
Add this code to your theme's CSS if you want to apply it to every gallery, or add it to your gallery in a CSS content block if you only want to apply it to that gallery.
If your photos use "right click-protection", applying this customisation will cause your photos to be scaled to fit the window, even if the photo was smaller than the window to begin with. If your photos' maximum display size is normally smaller than the window, you can edit the CSS to force your photo to display at its regular, unstretched size. Find this line in the CSS and remove it:
However, if your photos are tall enough to fill the window, this will cause them to be cropped slightly in the vertical direction (45 pixels in total by default).
Reserve more height for the caption area
You can shrink the photo more in order to have more room for the caption to display without scrolling the page. Add this CSS to the end of the code to double the space reserved for the caption:
The default is 45 pixels, so choose a number higher than that to increase the space, or lower it all the way down to zero to require people to scroll to see the beginning of the caption.
Prevent the left arrow, right arrow, or close button from fading out
Prevent the photo from touching the sides of the window
By default, if your photo is large enough, it will touch the edges of the window on the left, right and top sides of the lightbox. If you don't want that to happen, you can prevent it by adding padding to the photo display area:
Tweak left and right navigation buttons
You can make the left and right navigation buttons clickable across the entire height of the photo area (instead of just where the button appears) by adding this code to your CSS:
Centre the caption area underneath the photo
If you've got a lot of portrait-orientation photos, and a very large monitor, the default caption position puts the caption a long way away from the photo. You can centre it instead by adding this CSS:
Allow the caption to fill the entire window width
Formatting for the title and caption
I wanted to increase the size of the title in my lightbox, use a darker text colour for captions, and add spacing between the paragraphs of the caption, so I added this CSS: