How to only show title in Lightbox, like it used to be?

Rolfvp

The new changes announced in this thread gives me major problems:

http://www.dgrin.com/showthread.php?t=245841

I have a lot of info in my captions. Can someone please help me with a CSS code that will change my lightbox to only show title. Caption should only show when hovering...like it was before.

-Rolfvp

psenior1

this is spoiling my lightbox images too, captions are covering half of the images. It's bad enough with the captions appearing on hover everywhere, not this. It would be great if someone can come up with some code to hide the lightbox captions.

Allen

I added this to my "all galleries" CSS to limit the height of the caption to only the first line. This will probably
work for the title also as it is the first line. Also hide KW's.

.sm-lightbox-info .sm-lightbox-keywords {display:none;}
.sm-lightbox-info {max-height: 18px;}
.sm-user-owner .sm-lightbox-info {max-height: 100%;}

psenior1

perfect thanks Allen, lightbox-info is where I was going wrong. I've added the code below and my lightbox images are looking clean again

/* hide lightbox captions and keywords*/

.sm-lightbox-keywords {display:none;}
.sm-lightbox-caption {display:none;}
.sm-lightbox-info {display:none;}

Rolfvp

Thanks for youre help...but this wont help me. I need lightbox to behave like before: only title by default. When hovering the caption should show up.

I been working for months on my site and the hole concept is based on always showing title and only caption on hovering. The site is not public yet and present framed (!) artwork with pencil drawings of an danish illustrator . The site was supposed to be released this week...so now i am in deep trouble.

I must say that i am surprised that SmugMug make such a big change without warning. It is presented as :

"-- we now show more of the info by default (instead of just the title)"

IMO "default" meens that you should also have the possibility to choose other settings.

Any help is very much appreciated

thenickdude

IMO, the new Lightbox design makes multi-line captions unusable by completely covering our photos. Not a fan at all...

Try adding this CSS to a CSS content block on your "entire site" in the customiser to restore some of the old appearance:

.sm-lightbox-basic .yui3-widget-ft .sm-lightbox-ft-center {
  max-height: 37px; /* Tune me to adjust how high the caption is without hovering */
  margin-right: 240px; /* This allows space to make sure caption doesn't overlap image buttons */

  max-width: 640px; /* Like the old version, don't fill the entire window width */
}

.sm-user-ui .sm-lightbox-basic .sm-lightbox-ft-center .sm-lightbox-info {
  margin-right: 0;
}

It's not quite as good as it was previously (e.g. when the pop-up collapses, it doesn't get return to showing the title at the top).

Or you might prefer to go for a more radical redesign like my modification to use the page scrollbar to read the caption instead of a small pop-up area (the caption does not cover the photo at all):

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

Rolfvp

Thanks Lamah
I am a big fan of all youre customizations and i have been using many of them experiment to find the best way presenting the artwork info in the captions.

I have been preparing +400 pictures of framed paintings and drawings so that they would be presented correctly in lightbox, e.g. adding extra white space under each photo to make space for the lightbox info, and to make shure my frame would not be covered by the infobox

The titel should always show and caption only on mouse hovering in the info area. That is how it has been for the last months while i have been preparing this site.

Now smugmug has changed everything :cry

Until this horrible change in the lightbox info, my infotext worked like this:

Titel:
Nr. 0747, name of drawing
Caption:
• prize kr 600
• Frame size: 25x19 cm
• Print type: Epson UltraChrome K3 digital print
• paper: Hahnemühle Bamboo 290 g/m²

The site is not public yet and not open for search robots. The site is going to present artwork of one of the most wellknown and beloved illustrators i scandinavia.

http://galleriibspangolsen.smugmug.com/Gallerier/Kunsttryk/Børbebogs-illustrationer/

Someone, please tell me that the new default settings can be changed so lightbox worked like before. Otherwise it dosent make sens to call it "default", with no other options to choose!!

thenickdude

When they say "show more of the info by default" they mean "show more of the info even before you hover the mouse over it", they don't mean that there is a setting for it. Add the CSS I suggested in my previous post to tune it instead.

Rolfvp

Add the CSS I suggested in my previous post to tune it instead.

yeah thanks again, i have tried to use and tweek your CSS code but with no succes...i will have to try some more :-)

thenickdude

Is it installed at the moment? I can't see any CSS widgets with that code in it on your gallery you linked.

Rolfvp

No, for now every CSS code is removed...blank

Rolfvp

Try adding this CSS to a CSS content block on your "entire site" in the customiser to restore some of the old appearance:

Code:
.sm-lightbox-basic .yui3-widget-ft .sm-lightbox-ft-center {
max-height: 37px; /* Tune me to adjust how high the caption is without hovering */
margin-right: 240px; /* This allows space to make sure caption doesn't overlap image buttons */

max-width: 640px; /* Like the old version, don't fill the entire window width */
}

.sm-user-ui .sm-lightbox-basic .sm-lightbox-ft-center .sm-lightbox-info {
margin-right: 0;
}
It's not quite as good as it was previously (e.g. when the pop-up collapses, it doesn't get return to showing the title at the top).

@Lamah: I have now added your CSS code without any tweeks

thenickdude

You need to add it to a CSS content block rather than to your skin's CSS.

Rolfvp

Done, that was better!! With some tweeks maybe perfect...

leftquark

Thanks for the code lamah!

For curiosity sake: is there a reason why it has to be added to a CSS content block? I tried in my theme's skin and it obviously didn't work as you noted above. Is it because it doesn't use "!important" and something in SmugMug's code overrides it if you put it in the theme skin?

thenickdude

Yeah the issue is one of precedence - the rule for the collapsed state is the same precedence level as SmugMug's one. If you include it as part of your skin, your CSS code gets loaded *before* SmugMug's, so the SmugMug rule overrides it. If you include it in a CSS widget, it gets loaded *after* SmugMugs, so it correctly overrides SM's code instead.

The reason why the precedence was so delicate is that making the rule for the collapsed state a higher precedence than SmugMug's causes it to also override SmugMug's ":hover" state, so the mouse hover never works. But (I realised this morning) there's a much easier way to fix that, which is to duplicate SM's :hover rule too, and make them both higher precedence than SM's:

.sm-user-ui .sm-lightbox-basic .yui3-widget-ft .sm-lightbox-ft-center {
  max-height: 37px; /* Tune me to adjust how high the caption is without hovering */
  margin-right: 240px; /* This allows space to make sure caption doesn't overlap image buttons */

  max-width: 640px; /* Like the old version, don't fill the entire window width */
}
.sm-user-ui .sm-lightbox-basic .yui3-widget-ft .sm-lightbox-ft-center:hover {
  max-height:240px; /* Tune the expanded height */
}

.sm-user-ui .sm-lightbox-basic .sm-lightbox-ft-center .sm-lightbox-info {
  margin-right: 0;
}

That version should work either in a CSS content block or in the theme.