Always show captions in the lightbox

thenickdude · September 23, 2013

Hey everyone,

This customisation displays the caption and title of your photos underneath the photo area in the lightbox, so that your customers don't have to hover over the caption in order to read it. If your caption is long, you can view it by scrolling the whole page, instead of scrolling just the small default caption box, which is much less fiddly.

The download/buy button menu is also always displayed, which might help out with customer confusion, especially if you add text labels to those buttons to make them stand out.

Tweaks are listed which allow you to make the left & right buttons span the entire height of the window (makes them much easier to click!), prevent the left & right arrows from fading out, preventing the photo from touching the edges of the window, and more.

Please see the details and get the code here:

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

You can see an example gallery which has had this applied here, I'd love to hear your thoughts on how this looks and if it works for you!

http://www.sherlockphotography.org/Customisations/Lightbox-captions/Customised-lightbox/i-TthBbZR/A

James Lyall · September 23, 2013

Lamah wrote: »

This customisation displays the caption and title of your photos underneath the photo area in the lightbox, so that your customers don't have to hover over the caption in order to read it. If your caption is long, you can view it by scrolling the whole page, instead of scrolling just the small default caption box, which is much less fiddly.

Nicholas, your customisations are splendid! They work well for me.

One question: How do you arrange for your captions to be snugly over to the left?
On my site, there is wasted space to the left, example: http://www.lyall-photos.net/Travel/Indochina/Laos/i-NW6WmDD/A
Thanks in advance.

thenickdude · September 23, 2013

It looks like you've currently got this CSS in a content block:

.sm-lightbox-info {
max-width: none;
text-align: center;
font-size: 24px;
color: #fff!important;
}

You need to remove the "text-align: center;" line.

James Lyall · September 23, 2013

Lamah wrote: »

It looks like you've currently got this CSS in a content block:
You need to remove the "text-align: center;" line.

Thank you, Nicholas. You certainly know your way around CSS and are able to drill down immediately to a diagnosis!
May I ask a further simple question? Using WebDev in Firefox, looking at the customised CSS, it all appears in a single enormously long line. A few years ago, it appeared formatted in the way we enter it in SM. Real time experimentation with code is now a thing of the past for me. Any ideas?
Many thanks again for your prompt expert advice.

Allen · September 23, 2013

Is there anyway to have the caption initially expanded when opening lightbox and then collapse
after couple seconds? Need visitors to at least get a hint it's there.

Allen · September 23, 2013

James Lyall wrote: »

Thank you, Nicholas. You certainly know your way around CSS and are able to drill down immediately to a diagnosis!
May I ask a further simple question? Using WebDev in Firefox, looking at the customised CSS, it all appears in a single enormously long line. A few years ago, it appeared formatted in the way we enter it in SM. Real time experimentation with code is now a thing of the past for me. Any ideas?
Many thanks again for your prompt expert advice.

I use cntl-end and hit enter to get to where I can quickly add CSS.

My biggest problem is finding what tab has what in it. "entire site", "all folder" "all galleries" "specific
page" etc. Sure wish they'd separate each CSS in a tab with labels.

James Lyall · September 23, 2013

Allen wrote: »

I use cntl-end and hit enter to get to where I can quickly add CSS.

My biggest problem is finding what tab has what in it. "entire site", "all folder" "all galleries" "specific
page" etc. Sure wish they'd separate each CSS in a tab with labels.

Thanks Allen, I shall give it a rumble. My trouble, really, is that I am somewhat groping around in the dark!

Allen · September 23, 2013

That long line, select all, copy, paste into notepad with word wrap on. At least you'll see it all
and can search (cntl-F).

thenickdude · September 23, 2013

James Lyall wrote: »

May I ask a further simple question? Using WebDev in Firefox, looking at the customised CSS, it all appears in a single enormously long line.

If you right-click on an element, and click "inspect element", there's a nicely-formatted list on the right hand side showing the rules that apply to that element. You can edit these rules and add more by clicking around in that display. That's where I do most of my work.

There's a trick on SmugMug you can do in order to enable the serving of un-minified, original CSS. In Firefox, visit your site and open up the developer tools, and click on the Scratchpad icon (second from the right in the top-right toolbar). In the window that appears, enter this code:

document.cookie = "jslevel=";

Then choose "run" from the execute menu. Reload your page, and you should now be getting the original, readable versions of the CSS. The page will also take slightly longer to load, since you're no longer getting the smaller minified versions.

To undo this hack, clear your cookies (or at least your cookies for your domain).

thenickdude · September 23, 2013

Allen wrote: »

Is there anyway to have the caption initially expanded when opening lightbox and then collapse
after couple seconds? Need visitors to at least get a hint it's there.

I can't think of how that could be achieved, sorry.

James Lyall · September 23, 2013

Lamah wrote: »
If you right-click on an element, and click "inspect element", there's a nicely-formatted list on the right hand side showing the rules that apply to that element. You can edit these rules and add more by clicking around in that display. That's where I do most of my work.

There's a trick on SmugMug you can do in order to enable the serving of un-minified, original CSS. In Firefox, visit your site and open up the developer tools, and click on the Scratchpad icon (second from the right in the top-right toolbar). In the window that appears, enter this code:
document.cookie = "jslevel=";
Then choose "run" from the execute menu. Reload your page, and you should now be getting the original, readable versions of the CSS. The page will also take slightly longer to load, since you're no longer getting the smaller minified versions.

To undo this hack, clear your cookies (or at least your cookies for your domain).

Thank you so much, Nicholas. That is very helpful.

rustyblades · September 23, 2013

Lamah wrote: »

Hey everyone,

This customisation displays the caption and title of your photos underneath the photo area in the lightbox, so that your customers don't have to hover over the caption in order to read it. If your caption is long, you can view it by scrolling the whole page, instead of scrolling just the small default caption box, which is much less fiddly.

The download/buy button menu is also always displayed, which might help out with customer confusion, especially if you add text labels to those buttons to make them stand out.

Tweaks are listed which allow you to make the left & right buttons span the entire height of the window (makes them much easier to click!), prevent the left & right arrows from fading out, preventing the photo from touching the edges of the window, and more.

At this stage, this customisation is ready for testing, but hasn't seen enough use yet for me to recommend it for a public-facing gallery. Please see the details and get the code here:

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

You can see an example gallery which has had this applied here, I'd love to hear your thoughts on how this looks and if it works for you!

http://www.sherlockphotography.org/Customisations/Lightbox-captions/Customised-lightbox/i-TthBbZR/A

Hi Sherlock, I appreciate your customisations and have used a few. Nice flowers on the demo. The only downside I see is that you have lost the start slideshow button at the lower left on the SM gallery lightbox. I also don't see the button on your uncustomised SM so maybe a previous modification removed it.

I like being able to start the slideshow from the lightbox as it starts from the selected image and not from the start of the gallery which is what happens when you start the slideshow in th egallery view.

Paul

http://paultavares.smugmug.com/
.

thenickdude · September 23, 2013

Oh yep, that's a sitewide customisation I've made. It should actually continue to display that play button for you.

I'll update my example galleries so they don't hide that any more.

James Lyall · September 24, 2013

Allen wrote: »

That long line, select all, copy, paste into notepad with word wrap on. At least you'll see it all
and can search (cntl-F).

What a brilliant and simple solution, thank you!

DJM595 · October 7, 2013

Lamah wrote: »

Oh yep, that's a sitewide customisation I've made. It should actually continue to display that play button for you.

I'll update my example galleries so they don't hide that any more.

Lamah,

I'm new to this CSS, How would I remove the Play button in the lightbox?

Thank you for any advice

thenickdude · October 7, 2013

Add this to your theme's CSS, or to a CSS content block:

.sm-lightbox-ft-left {
	display: none !important;
}

DJM595 · October 8, 2013

Lamah wrote: »
Add this to your theme's CSS, or to a CSS content block:
.sm-lightbox-ft-left {
	display: none !important;
}

Thank you, that's exactly what I wanted - great stuff!

RJMugger · November 8, 2013

How can I center the title under the photo in the Lightbox?

thenickdude · November 8, 2013

RJMugger wrote: »

How can I center the title under the photo in the Lightbox?

Try adding the CSS for the tweak titled "centre the caption area underneath the photo" from this page:

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

(I've just added that section to the page now)

I wrote that for the customised "always show captions" lightbox, but I think it might work with the standard SmugMug one.

rich56k · November 9, 2013

Lightbox border/corner/shadows question...
Hi Lamah,

OK I'm really pleased with all the options you've made available to us Dgrinners to date!

I've added CSS to show rounded corners/borders/drop shadows in the lightbox along with your CSS for making the captions more visible. Your CSS works great (as always!) However I'm experiencing erratic results on the other code (see attached). In some galleries all the images are perfect, in some other galleries the image has square corners/no border-drop shadow while the border is huge (as large as can be).

:cry

To the best of my knowledge ALL the galleries have the same settings (max photo size= large, no filenames, right click protection on, etc). Any suggestions would be greatly appreciated!!

rich56k

thenickdude · November 9, 2013

With right click protection on, any image borders you've applied will definitely do what you've shown in your second screenshot, which is surround the entire image area. It's not possible to combine all three of always-show-captions, right click protection, and added image borders or rounded corners.

Right click protection is also applied to images that have been collected from a gallery which uses right-click-protection.

RJMugger · November 9, 2013

Lamah wrote: »

Try adding the CSS for the tweak titled "centre the caption area underneath the photo" from this page:

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

(I've just added that section to the page now)

I wrote that for the customised "always show captions" lightbox, but I think it might work with the standard SmugMug one.

I'm sorry. I'm a CSS newbie. You say on your webpage "Add this code to your theme's CSS if you want to apply it to every gallery". I want to change the color and font of the title in the Lightbox for all photos from all galleries by using your code:
.sm-user-ui .sm-lightbox-title {
color: green;
font-size: 20px;
}
But I don't know WHERE to put the CSS. I tried putting the CSS block in the "Entire Site", in "All Gallieries", etc and it doesn't work. I would appreciate it if you could help me. Eventually I want to add most of your code at http://www.sherlockphotography.org/Customisations/Lightbox-captions Thanks!

thenickdude · November 10, 2013

Adding a CSS block to Entire Site or All Galleries should work, actually. I wonder if some other CSS is overriding yours. You can try adding "!important" to the CSS to force it to be applied:

.sm-user-ui .sm-lightbox-title {
  color: green !important;
  font-size: 20px !important;
}

(also make sure that your images really have titles, and not just captions).

When I say "add it to your theme's CSS" it's actually in a different place than adding a CSS block. Click on customise site, then go to the Theme tab. Hover over the name of your active theme, and click the little wrench icon that appears. Then in the window that pops up, go to the Advanced tab and click the Edit link for "Custom CSS". It's really well hidden, I should probably add a guide on how to find it on my site!

rich56k · November 10, 2013

Lamah wrote: »

With right click protection on, any image borders you've applied will definitely do what you've shown in your second screenshot, which is surround the entire image area. It's not possible to combine all three of always-show-captions, right click protection, and added image borders or rounded corners.

Right click protection is also applied to images that have been collected from a gallery which uses right-click-protection.

Well do I feel dumb!! I went back in and checked gallery settings and in the cases where the borders were OK - I had NOT turned on right click protection

Well if anyone could do a work-around for this it would be you ... and if you say it's not possible then I guess I have a choice to make. Make my images even easier to steal, but look great in the mean time or go without the extra touches in lightbox

Thanks again for your help

Lamah!

Parting thought...is there any CSS override I can add to remove the border in the galleries that I use right click protection in?

RJMugger · November 10, 2013

Lamah wrote: »
Adding a CSS block to Entire Site or All Galleries should work, actually. I wonder if some other CSS is overriding yours. You can try adding "!important" to the CSS to force it to be applied:
.sm-user-ui .sm-lightbox-title {
  color: green !important;
  font-size: 20px !important;
}
(also make sure that your images really have titles, and not just captions).

When I say "add it to your theme's CSS" it's actually in a different place than adding a CSS block. Click on customise site, then go to the Theme tab. Hover over the name of your active theme, and click the little wrench icon that appears. Then in the window that pops up, go to the Advanced tab and click the Edit link for "Custom CSS". It's really well hidden, I should probably add a guide on how to find it on my site!

Thanks! I changed "title" to "caption" in the above code, and it worked! Could you please explain the difference between title and caption? How do I know what I have w/o running the above code? I import my photos from iPhoto, and I thought the photos were carrying along a "title".

thenickdude · November 10, 2013

There isn't really a difference as such. SmugMug typically shows the title (if you provide one) in larger text above the caption. You can click the wrench icon on one of your photos, then click "edit -> photo details" to see the title, caption and keywords set on the photo.

RJMugger · November 10, 2013

Lamah wrote: »

There isn't really a difference as such. SmugMug typically shows the title (if you provide one) in larger text above the caption. You can click the wrench icon on one of your photos, then click "edit -> photo details" to see the title, caption and keywords set on the photo.

I followed the instructions on http://www.sherlockphotography.org/Customisations/Lightbox-captions, and put all the code into my sandboxed site. It works very well! Thank you very much for making all that code available. It is very generous of you.

There is one thing on my Lightbox that I still would like to change. In the very bottom left corner of the Lightbox, there is a filled in grey triangle that points to the right. If I click on it, then it goes to full screen mode. I don't want people clicking on it, since no titles or captions are displayed in full screen mode. How do I prevent this triangle from appearing on the Lightbox page? Thanks for your help! Ron

thenickdude · November 11, 2013

RJMugger wrote: »

In the very bottom left corner of the Lightbox, there is a filled in grey triangle that points to the right. If I click on it, then it goes to full screen mode. I don't want people clicking on it

Yeah, I don't like that mode either. Add this to your CSS:

.sm-lightbox-ft-left {
	display: none !important;
}

thenickdude · December 8, 2013

I've now updated the customisation to improve the action of the "Image Sizes" menu. You can now choose image sizes which are larger than the screen, and it'll scroll, or smaller than the screen (though it's pointless), and they'll show small instead of just getting fuzzier. Grab the updated CSS here:

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

If you're using right-click protection, image sizes manually chosen that are smaller than the screen will still show fuzzier.

I've also fixed a problem which has recently cropped up on SmugMug with the tweak to the navigation buttons, so update that CSS from the tweaks section if you're using it. The problem with the code was that due to a SmugMug tweak, the right arrow would cover up the lightbox close button, which is now fixed.

beardedgit · December 8, 2013

Lamah wrote: »
Yeah, I don't like that mode either. Add this to your CSS:
.sm-lightbox-ft-left {
    display: none !important;
}

Hi Nick. Is there a way to keep the "play" triangle but stop it invoking full-screen, so that it can play the slideshow within the window?

thenickdude · December 8, 2013

No, sorry, as far as I know that'd require JavaScript modifications.

Always show captions in the lightbox

Comments