Customizing the New Lightbox

Hikin' Mike

@blouie said:
As mentioned, my objective is to show captions but not show the Photo Details button. And I've tried the above mentioned code. However, probably other code is interfering. So here is the code I have now that perhaps is the interfering code:

Remove all 3 and use this:

/* Removes "Shadow" */
.sm-user-ui .sm-lightbox-v2-photo-buttons-scrim-dark {background: transparent;}

/* Displays Captions All of the Time */
.sm-user-ui .sm-lightbox-v2[data-hide-ui] .sm-lightbox-v2-hideable {opacity: 1;}

/* Removes Icons */
.sm-user-ui .sm-lightbox-v2-photo-title .sm-icon,
.sm-user-ui .sm-button.sm-button-skin-default.sm-button-nochrome[data-elem-id="lightbox_details_button"],
.sm-user-ui .sm-button.sm-button-skin-default.sm-button-nochrome[data-elem-id="lightbox_fullscreen_button"] {display: none;}

/* Changes Caption Color */
.sm-user-ui .sm-button.sm-button-nochrome[data-elem-id="lightbox_image_title"] p {color: black;}

leftquark

@camner said:
That's wonderful! BUT, if "Shop View" is only available to Pro and Portfolio level users, then those of use on the Power plan are going to be SOL, right? Obviously that's a business decision for SM to make, but since Shop View is intended to help Pro and Portfolio level users drive their selling-prints business (and presumably those that use SM primarily as a sales platform are less likely to have captions, let alone prefer to have captions always showing), might SM consider making the option to show captions by default NOT be limited to those with higher level plans?

Absolutely. This setting wouldn't be something we'd gate on specific plans. One way I could invision it being built is that certain options within that setting (like Shop View) wouldn't be shown if the plan didn't support it. For example, for Power/Basic accounts, the options could be "Details, Share, Comments" while Portfolio/Pro would have an additional "Shop" option.

camner

@leftquark said:

@camner said:
That's wonderful! BUT, if "Shop View" is only available to Pro and Portfolio level users, then those of use on the Power plan are going to be SOL, right? Obviously that's a business decision for SM to make, but since Shop View is intended to help Pro and Portfolio level users drive their selling-prints business (and presumably those that use SM primarily as a sales platform are less likely to have captions, let alone prefer to have captions always showing), might SM consider making the option to show captions by default NOT be limited to those with higher level plans?

Absolutely. This setting wouldn't be something we'd gate on specific plans. One way I could invision it being built is that certain options within that setting (like Shop View) wouldn't be shown if the plan didn't support it. For example, for Power/Basic accounts, the options could be "Details, Share, Comments" while Portfolio/Pro would have an additional "Shop" option.

Wonderful to hear! Thanks.

blouie

@Hikin' Mike said:

@blouie said:
As mentioned, my objective is to show captions but not show the Photo Details button. And I've tried the above mentioned code. However, probably other code is interfering. So here is the code I have now that perhaps is the interfering code:

Remove all 3 and use this:

```
/* Removes "Shadow" */
.sm-user-ui .sm-lightbox-v2-photo-buttons-scrim-dark {background: transparent;}

/* Displays Captions All of the Time */
.sm-user-ui .sm-lightbox-v2[data-hide-ui] .sm-lightbox-v2-hideable {opacity: 1;}

/* Removes Icons */
.sm-user-ui .sm-lightbox-v2-photo-title .sm-icon,
.sm-user-ui .sm-button.sm-button-skin-default.sm-button-nochrome[data-elem-id="lightbox_details_button"],
.sm-user-ui .sm-button.sm-button-skin-default.sm-button-nochrome[data-elem-id="lightbox_fullscreen_button"] {display: none;}

/* Changes Caption Color */
.sm-user-ui .sm-button.sm-button-nochrome[data-elem-id="lightbox_image_title"] p {color: black;}

Doesn't work. It still displays the Photo Details button. It works in the sense that clicking the Photo Details button then reveals the caption and the captions display, without having to again click Photo Details, throughout the clicking forward. But all I want is no Photo Details button and just the caption.

I guess I give up. All I wanted was to have it the way it was before the new Lightbox: just the image, the caption, the left and right arrows, and the X close button.

The Mechanic

@blouie It sounds like this is getting a bit confusing. The following links should help to address each thing you want to change one at a time:

Remove Lightbox Left Sidebar Nav:
https://smugocity.com/customization-toolbox/smugmug-lightbox-v2/remove-side-nav-bar/

Remove View Details When No Title/Caption Present:
https://smugocity.com/customization-toolbox/smugmug-lightbox-v2/remove-view-details/

Make The Caption Always On Without Mouse Movement:
https://smugocity.com/customization-toolbox/smugmug-lightbox-v2/static-title-caption-lightbox/

This should help you address these changes one at a time.

Paul (France)

Dear Smugmug and Dgrin-community, I like very much the lightbox lay-out AFTER you click on the "photo details"-symbol (or the cut-off caption): the photo at right, with title, captions and keywords left of the photo. I would like to get that lay-out immediately after my visitors click on a thumbnail in my gallery view. How can I skip the standard lightbox and directly go to the view with the photo details? Thanks for your suggestions, Paul.

camner

@Paul (France):
At the present time what you want is not possible. The SmugMug team has said that they intend to implement this at some point in the future.

Paul (France)

Isn't the only thing that is needed some code that says: "click on the photo details symbol"? Can somebody write the code for that command?

Allen

.> @Paul (France) said:

Isn't the only thing that is needed some code that says: "click on the photo details symbol"? Can somebody write the code for that command?

Not sure what you're referring to but.

Like this? Upper left corner.
https://www.photosbyat.com/Birds/Missouri-Bird-Photos-A-G/i-Mrg8Z6F/A

camner

@Allen
Can you share the CSS that you used to produce this effect?

(BTW, on my iPad only the first two lines appear...the third line (“on/off”) is missing)

Allen

@camner said:
@Allen
Can you share the CSS that you used to produce this effect?

(BTW, on my iPad only the first two lines appear...the third line (“on/off”) is missing)

Might try removing "& CAPTION" but line breaks aren't allowed and might not wrap right.
Maybe "PHOTO INFO On/Off" would wrap better.

or for only two lines (might also play with height for 3 lines)
content:" INFO On/Off";
font-size:90%;

 .sm-user-ui .sm-page-gallery-keyword .sm-lightbox-v2 .sm-lightbox-v2-navbar-primary li:nth-child(3) .sm-button-square:after {
  content:" INFO & CAPTION On/Off";
  font-size:75%;
  background:#222;
  color:#ff0
 }

RonvanderPlas

Does anyone know the code to get the title/caption displayed on mobile landscape?

Currently you have to click on the details button which opens an overlay that covers the whole image. The portrait display does show the title/caption fine. I would like to have that in landscape mode too.

Paul (France)

@Allen Yes, Allen, that is an acceptable solution. Thanks for the CSS-code. I have no idea where I should put that code. I have no experience with CSS. Can you explain to me where I should put it? And explain it like to a child ;-) Thanks!