Always show captions in the lightbox

thenickdude

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

DJM595

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

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

thenickdude

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

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

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

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

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

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

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

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

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

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

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

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

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