Customizing the New Lightbox

leftquark

@Allen said:
I believe that logged in it zooms up to Original. Not logged in it only zooms to max display size.

Lets hop on over to the new thread to discuss this further (we're going to make some improvements): https://dgrin.com/discussion/265445/new-lightbox-zoom-past-maximum-photo-size

@camner said:
While I have my own strong feelings of what SM should and should not do in terms of how the Lightbox appears, we should all keep in mind this, from my favorite cartoonist: https://xkcd.com/1172/

LOVE THIS!

pilotdave

Deleted... adapting.

danieltoader

> @leftquark said:
> There was a request for adding some padding to the top/bottom of the photo. Here's the CSS. You should be able to use this.... change the "80px" to whatever amount of padding you want ... times 2. So this adds 40px to the top/bottom.
>
> /* Add 40px of space above and below lightbox content */@media screen and (min-width: 961px) { .sm-user-ui .sm-lightbox-v2-content { height: calc(100% - 80px); align-self: center; }}

Instead of pixels is there any issues if I add % ?

Like this:

@media screen and (min-width: 961px) { .sm-user-ui .sm-lightbox-v2-content { height: calc(100% - 16%); align-self: center; }}

Goughy

I have been using one of the excellent customizations provided by @Leftquark in the first post of this thread but have found an inconsistency.

I am using “5. Make the image full width (navbars will overlap the photo)” to extend the image to the full extent of the screen. It’s all good until the controls timeout.

The forward and back arrows disappear as expected. However, although the “Close”, “Fullscreen”, “Play Slideshow” and “Photo Details” text disappears, the background boxes for these items persist in the top corners of the image.

I tried cheating by setting the alpha for the navbar backgrounds to 0.0. Of course, this makes the background boxes disappear, but permanently and not just after the controls timeout. As well as removing the emphasis for the controls, it also spoils the layout when the Photo Details are selected and is inconsistent with the navigation arrows.

Can anyone provide any css that will remove the boxes shown in the screenshot after the controls timeout?

Thanks,

Richard

rjwilner

@leftquark said:

@JSS44 said:
I use the caption to display pricing information and it is important for people to be able to see it without having to look for it. The more times someone has to click and the longer it takes to find information, the more likely they are to just give up and leave. This may not be true for event photographers, where people are already highly motivated to buy prints. But I sell prints to casual shoppers who are browsing and looking for wall decor. If somebody could provide some code to accomplish this it sounds like there may be several of us who would find it helpful. (Apologies if this gets posted twice, but the comment I just posted seems to have disappeared.)

When a viewer clicks the “Buy” button the sidebar opens into the commerce mode.

What if the commerce mode was already active when the Lightbox opens. Would you still need the captions to describe all buying options?

Captions need to be displayed for reasons other than commerce options. I have one gallery that I think of as a 'photo essay' and each image in the gallery has a caption that describes the 'story' of that image (in the caption). I am planning to have more galleries defined in that manner as time moves forward.

I have the gallery of thumbnails set up to display no info (no Title, Caption, EXIF, etc). And the 'thumbnails' are just large enough to allow the visitor to get a good feel for the image, but the intent is for visitors to open those they find particularly interesting in the Lightbox...where the title/caption info needs to appear. And though my preference would be to have such info appear below the image, I can live with it appearing in a 'sidebar' as it does currently......***IF*** it appears by default and doesn't require the visitor to click a 'hamburger' they may well not even be aware is a clickable option.

If you want to see this in action, it can be found at.... https://www.rjwilner.photography/Projects/Personali-Trees/

dedricramseyphoto

@leftquark said:

@JSS44 said:
I use the caption to display pricing information and it is important for people to be able to see it without having to look for it. The more times someone has to click and the longer it takes to find information, the more likely they are to just give up and leave. This may not be true for event photographers, where people are already highly motivated to buy prints. But I sell prints to casual shoppers who are browsing and looking for wall decor. If somebody could provide some code to accomplish this it sounds like there may be several of us who would find it helpful. (Apologies if this gets posted twice, but the comment I just posted seems to have disappeared.)

When a viewer clicks the “Buy” button the sidebar opens into the commerce mode.

What if the commerce mode was already active when the Lightbox opens. Would you still need the captions to describe all buying options?

That would be a nice option. Also, it would be nice if the "Buy this Photo' and 'Buy Multiple Photos' text could be edited via CSS.

rjwilner

Re: the suggested CSS mod '7. Move the image buttons to the top:'

This one is bizarre on my site.
- If I am logged into my site and viewing via the MS Edge browser, the buttons fail to work at all. None of them.
- If I am not logged into the site and viewing via Firefox, then they do.

rjwilner

Re: the suggested CSS mode '4. Render the sidebar as a (non draggable) overlay on desktop & tablet landscape viewports.'

Much like my post re: #7 above...
- If I am logged into my site and viewing via MS Edge, this pretty much doesn't work. I.e., when I click the 'hamburger', the Title overlaying the image itself disappears, but the sidebar overlay never appears.
- If I am not logged into the site and viewing via Firefox, then it works as expected.

W.W. Webster

@Jtring said:>
I think this in your site CSS will do the trick: .sm-lightbox-v2-photo-buttons {justify-content:center}

Thanks Jim, that worked a treat!

camner

@Lille Ulven said:

@camner to give your title that darker background color you could try to use this:

.sm-lightbox-v2-photo-title {
background-color: black !important; /*chose whatever color and transparency setting would work for you here*/
}

Thanks very much for this; this definitely is an improvement.

The problem with changing the opacity is that it affects both the black background color AND the text of the Title. I would like to be able to change the opacity of the background but keep the opacity of the text at 1.

camner

In the new Lightbox is there a way through custom CSS to have (image) Titles show during a Lightbox slideshow?

leftquark

@camner said:
In the new Lightbox is there a way through custom CSS to have (image) Titles show during a Lightbox slideshow?

We'll be making an update so that Slideshows set to have Title/Caption to ON will display the title and up to 1 line of the caption.

Lille Ulven

@camner instead of
.sm-lightbox-v2-photo-title {
background-color: black !important; /chose whatever color and transparency setting would work for you here/
}

Use

.sm-user-ui .sm-lightbox-v2-photo-title {
background-color: rgba(0,0,0,0.7); /*chose whatever color and transparency setting would work for you here*/
}

That should only affect the background color opacity and not the text’s

Hikin' Mike

@Lille Ulven said:
Use

.sm-lightbox-v2-photo-title {
background-color: black !important; /chose whatever color and transparency setting would work for you here/
}

That should only affect the background color opacity and not the text’s

See this: https://dgrin.com/discussion/265465/putting-a-background-behind-the-new-lightbox-title-and-making-the-buy-button-less-obtrusive#latest

Also, you really shouldn't need to add !important on 99% of the custom CSS.

Lille Ulven

I guess, I need to remember to put that .sm-user-ui class in front of everything instead

Got to give that a try some day when I have some time to fill left

Hikin' Mike

@Lille Ulven said:
Got to give that a try some day when I have some time to fill left

Unfortunately, I have TOO much free time...lol!

Lille Ulven

I am willing to take some of your free time off you, @Hikin' Mike

Teaching my coworkers that all annual vacation that they don't use is transferred to me hasn't worked out yet...somehow they just don't obey that rule and I cannot understand why

camner

@Lille Ulven said:
@camner instead of
.sm-lightbox-v2-photo-title {
background-color: black !important; /chose whatever color and transparency setting would work for you here/
}

Use

.sm-lightbox-v2-photo-title {
background-color: black !important; /chose whatever color and transparency setting would work for you here/
}

That should only affect the background color opacity and not the text’s

Unless I’m missing something, the CSS you suggested is exactly the same as the CSS you said to replace.

camner

@Hikin' Mike said:

Also, you really shouldn't need to add !important on 99% of the custom CSS.

I tried removing the !important and adding .sm-user-ui in front, but it didn’t work. The background didn’t appear. (And I have moved all my custom CSS to where you and @leftquark suggested, to the Advanced tab of the Theme editing location.)

Lille Ulven

Unless I’m missing something, the CSS you suggested is exactly the same as the CSS you said to replace.

>

Sorry fixed it
Typing on my Ipad was not the best idea I ever had... (I seem to have overwritten my own changes with the initial code block instead of formatting...)

So the correct one is:
.sm-user-ui .sm-lightbox-v2-photo-title {
background-color: rgba(0,0,0,0.7); /chose whatever color and transparency setting would work for you here/
}

blouie

Sorry, if some of this has already been answered.

I want my Lightbox to look and behave exactly as it did before the recent changes. I have no use for any of the changes: they are superfluous, distracting, and degrade the simplicity and ease of my site.

(1) I went to the discussion about the zoom cursor. I'm waiting there to see what is finally the agreed upon CSS for disabling the zoom cursor.

(2) I got the CSS from support to turn off "View Photo Details". But now my captions are missing. I want my captions in the lower left of Lightbox, exactly they way they were before. What is the CSS to restore the captions?

(3) What is the CSS to remove the Fullscreen button?

(4) What is the CSS to remove the 'Close' hover popup over the X close button. I just want the X button; I don't want any hover popups.

In sum, all I want on my Lightbox is exactly what I had before:

• the image
• the caption, on the lower left
• the X close button, on the upper right

Thank you.

Djm3006

Has anyone changed the shopping cart order options yet in the new lightbox as the old CSS don't work anymore
/Change order of shopping options/
.sm-user-ui .sm-addtocart-product-list {
display: flex;
flex-direction: column;
}

.sm-user-ui .sm-addtocart-product-list .sm-catalog-category-wall-art {order: 1;}
.sm-user-ui .sm-addtocart-product-list .sm-catalog-category-paper-prints {order: 3;}
.sm-user-ui .sm-addtocart-product-list .sm-catalog-category-downloads {order: 2;}
.sm-user-ui .sm-addtocart-product-list .sm-catalog-category-keepsakes {order: 4;}

Thanks
Dave

Hikin' Mike

@Djm3006 said:
Has anyone changed the shopping cart order options yet in the new lightbox as the old CSS don't work anymore
Thanks
Dave

Just change the order number to re-order to suit:

/**
* Reorder Shopping Cart List
************************************************/
.sm-user-ui .sm-com-lb-category-list {
    display: flex;
    flex-direction: column;
}

    li:nth-of-type(1) {order: 1;} /* paper */ 
    li:nth-of-type(2) {order: 2;} /* fine art */ 
    li:nth-of-type(3) {order: 3;} /* wall art */ 
    li:nth-of-type(4) {order: 4;} /* desk art */
    li:nth-of-type(5) {order: 5;} /* keepsake */
    li:nth-of-type(6) {order: 6;} /* phone case */

leftquark

@Hikin' Mike said:
Just change the order number to re-order to suit:

/**
* Reorder Shopping Cart List
************************************************/
.sm-user-ui .sm-com-lb-category-list {
  display: flex;
  flex-direction: column;
}

  li:nth-of-type(1) {order: 1;} /* paper */ 
  li:nth-of-type(2) {order: 2;} /* fine art */ 
  li:nth-of-type(3) {order: 3;} /* wall art */ 
  li:nth-of-type(4) {order: 4;} /* desk art */
  li:nth-of-type(5) {order: 5;} /* keepsake */
  li:nth-of-type(6) {order: 6;} /* phone case */

One note of caution (and why I think @Djm3006 might have some more robust CSS...): we're constantly looking to optimize the shopping cart to help Pro photographers sell more, so it's very possible that those categories will change or be re-ordered. Targeting nth-of-type() will need to be updated if we make any improvements to the cart categories.

Shinrya

Thanks for the code Mike! Will add this in later so can move downloads to the bottom of the list.

Further to this, does anyone know of a way to replace the stock photos that are used? And one better, remove the second line of text below descriptions i.e. "prints that fix common frame sizes"?

Hikin' Mike

@leftquark said:

@Hikin' Mike said:
Just change the order number to re-order to suit:

/**
* Reorder Shopping Cart List
************************************************/
.sm-user-ui .sm-com-lb-category-list {
    display: flex;
    flex-direction: column;
}

    li:nth-of-type(1) {order: 1;} /* paper */ 
    li:nth-of-type(2) {order: 2;} /* fine art */ 
    li:nth-of-type(3) {order: 3;} /* wall art */ 
    li:nth-of-type(4) {order: 4;} /* desk art */
    li:nth-of-type(5) {order: 5;} /* keepsake */
    li:nth-of-type(6) {order: 6;} /* phone case */

One note of caution (and why I think @Djm3006 might have some more robust CSS...): we're constantly looking to optimize the shopping cart to help Pro photographers sell more, so it's very possible that those categories will change or be re-ordered. Targeting nth-of-type() will need to be updated if we make any improvements to the cart categories.

I admit, I didn't like the nth-of-type(), but I could make the data-elem-id work.

Hikin' Mike

@Shinrya said:
Further to this, does anyone know of a way to replace the stock photos that are used? And one better, remove the second line of text below descriptions i.e. "prints that fix common frame sizes"?

Until SM adds specific selectors for each category/item, there is no way that I can see to customize the images.

Djm3006

Thanks Mike > @Hikin' Mike said:

@Djm3006 said:
Has anyone changed the shopping cart order options yet in the new lightbox as the old CSS don't work anymore
Thanks
Dave

Just change the order number to re-order to suit:

/**
* Reorder Shopping Cart List
************************************************/
.sm-user-ui .sm-com-lb-category-list {
  display: flex;
  flex-direction: column;
}

  li:nth-of-type(1) {order: 1;} /* paper */ 
  li:nth-of-type(2) {order: 2;} /* fine art */ 
  li:nth-of-type(3) {order: 3;} /* wall art */ 
  li:nth-of-type(4) {order: 4;} /* desk art */
  li:nth-of-type(5) {order: 5;} /* keepsake */
  li:nth-of-type(6) {order: 6;} /* phone case */

W.W. Webster

Did I miss something earlier, or has there been a change in the last few days to include the caption as well as the title briefly at the foot of the Lightbox image?

What code can I add to suppress the caption, i.e. just show the title?

leftquark

@W.W. Webster said:
Did I miss something earlier, or has there been a change in the last few days to include the caption as well as the title briefly at the foot of the Lightbox image?

What code can I add to suppress the caption, i.e. just show the title?

We added the caption back this afternoon based on feedback from many of you (and others outside of DGrin).