Customizing the New Lightbox

1235710

Comments

  • blouieblouie Registered Users Posts: 77 Big grins

    The caption back without the "Show Photo Details" button?

    I removed the "Show Photo Details" button. How can I show the caption in the lower left of the window?

  • blouieblouie Registered Users Posts: 77 Big grins

    Also, how can I remove the "Full Screen" button?

  • Hikin' MikeHikin' Mike Registered Users Posts: 5,448 Major grins

    @blouie said:
    Also, how can I remove the "Full Screen" button?

    .sm-user-ui .sm-lightbox-v2 .sm-button.sm-button-skin-default.sm-button-nochrome[data-elem-id="lightbox_fullscreen_button"] {display: none;}

  • JSS44JSS44 Registered Users Posts: 46 Big grins

    I'm happy to see the caption back, thank you. Now I'd like to use the code provided above to move the buy button and caption and title below my image. When I do this, because my lightbox background is white, the title and caption are barely visible. How do I change the title and caption to black? Also, is there a way to change the caption font size?

  • blouieblouie Registered Users Posts: 77 Big grins
    edited August 27, 2019

    Hikin' Mike, it worked. Thanks very much.

  • blouieblouie Registered Users Posts: 77 Big grins
    edited August 27, 2019

    Captions:

    Chrome. No captions.

    Firefox. Each time I advance to a new image, the caption flashes on and then off instantaneously, in upper left corner of the image, then gone until I advance to the next image. This is obviously ridiculous. It's useless visual noise, and visitors can see that the site is not working correctly, as well as captions can't be discerned when they flash off like that.

    Edge. No captions.

    Please, SmugMug, fix this on your end, or tell me how to fix it myself.

    I'd be happy just to have it the way it was before this new Lightbox. That was: caption appears in the lower left corner of the window.

  • Hikin' MikeHikin' Mike Registered Users Posts: 5,448 Major grins

    @blouie said:
    Captions:

    Chrome. No captions.

    Firefox. Each time I advance to a new image, the caption flashes on and then off instantaneously, in upper left corner of the image, then gone until I advance to the next image. This is obviously ridiculous. It's useless visual noise, and visitors can see that the site is not working correctly, as well as captions can't be discerned when they flash off like that.

    Edge. No captions.

    Please, SmugMug, fix this on your end, or tell me how to fix it myself.

    I'd be happy just to have it the way it was before this new Lightbox. That was: caption appears in the lower left corner of the window.

    No issues with Chrome or Firefox using Win7.

  • Hikin' MikeHikin' Mike Registered Users Posts: 5,448 Major grins
    edited August 27, 2019

    @JSS44 said:
    I'm happy to see the caption back, thank you. Now I'd like to use the code provided above to move the buy button and caption and title below my image. When I do this, because my lightbox background is white, the title and caption are barely visible. How do I change the title and caption to black? Also, is there a way to change the caption font size?

    .sm-user-ui .sm-lightbox-v2-photo-title .sm-button-label p,
    .sm-user-ui .sm-lightbox-v2-photo-title .sm-button-label h2 {
      color: black;
    }
    
    .sm-user-ui .sm-lightbox-v2-photo-title .sm-button-label p {
      font-size: 30px;
    }
    
  • JtringJtring Registered Users Posts: 673 Major grins
    edited August 27, 2019

    @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?

    I've had to edit this a few hours after the original post. I had a second option in here that had some issues and I had to adjust the code on the basic option a bit. So if you saw the earlier version, please disregard.


    Since I have some of the same goals, I've been playing with this. Here's some tentative code. Since SmugMug's code is in flux, all is subject to change. And as you'll read below, there are some odd
    ins-and-outs here.

    The following suppresses captions ONLY WHEN A TITLE IS PRESENT. The code's simple, except there is one little glitch. Smugmug decided that when the title and caption are both present, it was best to remove the photo details icon. So if you start with both and apply the code below, the title, now alone, will not have an icon. But if you started with just a title, Smugmug put the icon in, so it will remain. Kind of a mixed situation. Except on mobile. There, SmugMug never displayed both caption and title together in the first place. There never was an opportunity for a mixed situation. Caption or no caption, if there's a title, you always get the title and the icon on a mobile device. It may be possible, with more work, to restore the icon when it's not present. That's still TBD and probably isn't worth doing until SmugMug's code stabilizes a bit more.

    /* Removes the caption in lightbox photo buttons line at the botton of the image
    ONLY WHEN A TITLE IS PRESENT.
    The title will remain, but on a desktop there will be no photo details icon in this case.
    There will be an icon on a mobile display.
    If you didn't start out with both a title and caption, nothing will change.
    It may be possible to restore the icon in the first case -- maybe -- but that needs research.
    2019-08-26.  Use advisedly: subject to breakage/change/side-effects as SM updates their code.*/
    .sm-lightbox-v2-photo-title-and-caption > div > p.sm-text-ellipsis {
      visibility:hidden;
    }
    

    Note that my original version here used display:none instead of visibility:hidden. The latter manages the spacing better.

    I had a second option to always suppress captions, even if they were the only thing present. Unfortunately, what I wrote removed the caption but left the scrim, the little darkening of the image, behind it. That's OK if there's also a title -- the case above -- but not OK if the caption is alone. At the moment I don't see a way around that.

    . . .

    Added August 27: In the cold, clear light of morning, the following variation seems best. The second line works the spacing issues. Still no icon though, and at the moment I don't see a way to sneak it in.

    .sm-lightbox-v2-photo-title-and-caption > div > p.sm-text-ellipsis {display:none; }
    .sm-user-ui .sm-lightbox-v2-photo-title-and-caption {height:48px;}
    
    Jim Ringland . . . . . jtringl.smugmug.com
  • JSS44JSS44 Registered Users Posts: 46 Big grins
    .sm-user-ui .sm-lightbox-v2-photo-title .sm-button-label p,
    .sm-user-ui .sm-lightbox-v2-photo-title .sm-button-label h2 {
      color: black;
    }
    
    .sm-user-ui .sm-lightbox-v2-photo-title .sm-button-label p {
      font-size: 30px;
    }
    

    Thanks very much! I see now that the background rectangle surrounding the text of the title and caption is a shade of gray, which looks like a mistake against the white background of the lightbox. Is there a way to make it transparent or match the background of the lightbox?

  • JSS44JSS44 Registered Users Posts: 46 Big grins

    I've just noticed that the captions in the lightbox are only showing for landscape oriented images. For portrait images, still no captions? Is this intentional?

  • Hikin' MikeHikin' Mike Registered Users Posts: 5,448 Major grins

    @JSS44 said:
    Thanks very much! I see now that the background rectangle surrounding the text of the title and caption is a shade of gray, which looks like a mistake against the white background of the lightbox. Is there a way to make it transparent or match the background of the lightbox?

    .sm-user-ui .sm-lightbox-v2-photo-buttons-scrim-dark {background-color: transparent;}

  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins

    @blouie said:
    Captions:

    Chrome. No captions.

    Firefox. Each time I advance to a new image, the caption flashes on and then off instantaneously, in upper left corner of the image, then gone until I advance to the next image. This is obviously ridiculous. It's useless visual noise, and visitors can see that the site is not working correctly, as well as captions can't be discerned when they flash off like that.

    Edge. No captions.

    Please, SmugMug, fix this on your end, or tell me how to fix it myself.

    I'd be happy just to have it the way it was before this new Lightbox. That was: caption appears in the lower left corner of the window.

    Can you share a link where this happens? I don't see this on your site, or anyone else's photos who have been commenting on this thread. Have you checked other folks sites (just look at their Signatures and you can jump to their photos).

    dGrin Afficionado
    Former SmugMug Product Team
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • HSWildlifeHSWildlife Registered Users Posts: 13 Big grins
    edited August 27, 2019

    @Hikin' Mike said:

    @JSS44 said:
    Thanks very much! I see now that the background rectangle surrounding the text of the title and caption is a shade of gray, which looks like a mistake against the white background of the lightbox. Is there a way to make it transparent or match the background of the lightbox?

    .sm-user-ui .sm-lightbox-v2-photo-buttons-scrim-dark {background-color: transparent;}

    Sorry, that doesn't work but this does: .sm-user-ui .sm-lightbox-v2-photo-buttons-scrim-dark { background: none;}

  • blouieblouie Registered Users Posts: 77 Big grins
    edited August 27, 2019

    leftquark, thank you for your help.

    There are two conditions I've mentioned. (1) Captions don't appear, (2) With Firefox, captions appear but only for a fraction of a second then they disappear. You are not seeing those conditions on the Lightbox on my site? Or, on what part of the Lightbox window do you see captions?

    I see no captions on the Lightbox on my site with the following:

    Windows 7 - Chrome
    Windows 10 - Chrome
    Windows 10 - Edge (also the errant reload we've talked about causes the image to render oversharpened)
    iMac - Chrome
    iMac - Safari (and also the 'X' close button is missing - another thing that needs to be fixed)
    iPhone 7plus - Safari

    With Windows 10 Firefox, the caption appears for a fraction of a second, then instantly disappears. The caption appears, for a fraction of a second only, in the upper right hand corner within the image. (My images include a white surrounding canvas.)

    Those are all that I've checked.

    For a particular example, on my website: Click '1979-1984' in the Menu. Click 'Thumbs/Captions'. You see the thumbnail images with the captions underneath (the captions are just numerals for the images in sequence order). Click on the first image (with caption '1'). Now you are in Lightbox looking at that image. There is no caption there for me on that first image or any other image in the sequence, as listed above with those systems/browsers. And this holds for the other Lightboxes on my site that I have spot checked. You see otherwise?

    I looked at other people's sites and do see captions.

  • Hikin' MikeHikin' Mike Registered Users Posts: 5,448 Major grins

    @blouie said:
    leftquark, thank you for your help.
    For a particular example, on my website: Click '1979-1984' in the Menu. Click 'Thumbs/Captions'. You see the thumbnail images with the captions underneath (the captions are just numerals for the images in sequence order). Click on the first image (with caption '1'). Now you are in Lightbox looking at that image. There is no caption there for me on that first image or any other image in the sequence, as listed above with those systems/browsers. And this holds for the other Lightboxes on my site that I have spot checked. You see otherwise?

    I looked at other people's sites and do see captions.

    What is your website? Might be helpful to add it to your signature...

  • blouieblouie Registered Users Posts: 77 Big grins

    Thanks, Hikin' Mike. I just added the URL to my profile.

  • Hikin' MikeHikin' Mike Registered Users Posts: 5,448 Major grins

    @blouie said:
    Thanks, Hikin' Mike. I just added the URL to my profile.

    Well, you have this hiding all of the buttons, including the captions and titles.

    .sm-user-ui .sm-lightbox-v2-photo-buttons {
     display:none
    }
    
  • blouieblouie Registered Users Posts: 77 Big grins

    That's what SmugMug support told me to add in order to hide the "View Photo Details" button. And it does work to hide the "View Photo Details" button, but it also hid the captions. (But it did not hide the "Full Screen" button nor the "X" button" - I added another CSS to hide the "Full Screen" button, but, of course, I am keeping the 'X' button).

    What I want on the Lightbox is exactly this, and nothing else (as it was before the new Lightbox):

    the image
    the caption (in the lower left of the window)
    'X' close button (the upper right of the window seems to be the default, and I guess that's okay)

    (And for the 'X' close button, I want to remove the hover popup that says the word "Close".)

    So, as I mentioned, what I want to do is hide the "View Photo Details" button but automatically display the captions themselves.

  • AllenAllen Registered Users Posts: 10,005 Major grins

    You are not seeing anything because you have CSS hiding everything.

    Removing your CSS and the numbers show in the caption.

    Al - Just a volunteer here having fun
    My Website index | My Blog
  • blouieblouie Registered Users Posts: 77 Big grins

    When I take off that CSS, it brings back the "View Photo Details" button, now in white, with a gray shading behind it, inside the area of my image. And to see the captions in black (now placed next to the left arrow), you have to click the "View Photo Details" button, which then shifts the image from the center of the window toward the right.

    I don't want any of that extraneous, distracting junk.

    I just want the caption, in black, in the lower left, always there, no clicking for it, no other buttons - just as it was before the new Lightbox.

  • Hikin' MikeHikin' Mike Registered Users Posts: 5,448 Major grins
    edited August 27, 2019

    @blouie said:
    I just want the caption, in black, in the lower left, always there, no clicking for it, no other buttons - just as it was before the new Lightbox.

    Try this:

    .sm-user-ui .sm-button.sm-button-skin-default.sm-button-nochrome[data-elem-id="lightbox_fullscreen_button"],
    .sm-user-ui .sm-button.sm-button-skin-default.sm-button-nochrome[data-elem-id="lightbox_details_button"] {display: none;}
    
    .sm-user-ui .sm-lightbox-v2-hideable {opacity: 1 !important;}
    
    .sm-user-ui .sm-button.sm-button-nochrome[data-elem-id="lightbox_image_title"] {
      position: fixed;
      bottom: 20px;
      left: 20px;
      cursor: default;
    }
    
    .sm-user-ui .sm-button.sm-button-nochrome[data-elem-id="lightbox_image_title"] p {color: black;}
    

    You'll have to remove some of your old code first.

  • kyllitedrekyllitedre Registered Users Posts: 24 Big grins

    @leftquark said:

    With that said, I'd love to keep getting a better understanding of your workflow such that having captions on top of the photo is crucial. How do you and your customers use those captions?

    I use caption field mostly on my sport photos, to give information about athlete's name, name of the event etc. Lots of photos from events. My clients need to immediately see filename (to be honest, right now I use Title field for filename (add them automatically in Photomechanic), since old LB didn't show filenames when captions were present) and captions (rider name, horse name, event name). Most of them view on mobile nowadays. Quick basic info was always available before both in mobile and computer and it was important for us.

  • jcharmonjcharmon Registered Users Posts: 25 Big grins
    edited August 27, 2019

    The situation is obviously going to be in flux for a while as SmugMug continues making changes in the Lightbox. I removed the CSS code suggested at the beginning of this thread so I can see what's going on currently.

    It would be very helpful if SmugMug folks could create a change log something like this: https://www.photools.com/release-notes/. The 'Product Updates' pages are too behind and not detailed enough to follow what's going on. At some future point it would be very valuable to have a stable page that listed CSS options that could be used (something like the initial list in this thread, but with more detail on how to address specific display behaviors).

    A suggestion for the left-side Details panel: It would be very helpful if there were a option to have buttons/up-down arrows to roll up/unroll the different sections there. For example, Camera Info is not something my users would normally want to see (but might on occasion); being able to hide this via a rollup would allow the map to be seen for example without having to scroll. This would be much preferable to having the behavior hard-coded because it would allow for individual, short-term needs.

    I assume the map section will be working sometime in the future?

    Lastly, why isn't there an option in this forum software to cancel a draft post?

  • JSS44JSS44 Registered Users Posts: 46 Big grins

    Is there a way to make it transparent or match the background of the lightbox?

    .sm-user-ui .sm-lightbox-v2-photo-buttons-scrim-dark {background-color: transparent;}

    Sorry, that doesn't work but this does: .sm-user-ui .sm-lightbox-v2-photo-buttons-scrim-dark { background: none;}

    Perfect, thank you.

  • W.W. WebsterW.W. Webster Registered Users Posts: 3,204 Major grins
    edited August 28, 2019

    After the Caption was added, now the Details icon appears to have been removed from the foot of the image - is that correct?

    Keeping up with this constantly moving feast is doing my head in. When will the new presentation of the Lightbox be locked down, at least for a month or two, so I can stabilise my site? I feel I'm chasing a moving target at present.

  • W.W. WebsterW.W. Webster Registered Users Posts: 3,204 Major grins

    @Jtring said:

    _I've had to edit this a few hours after the original post ....

    Added August 27: In the cold, clear light of morning, the following variation seems best. The second line works the spacing issues. Still no icon though, and at the moment I don't see a way to sneak it in.

    .sm-lightbox-v2-photo-title-and-caption > div > p.sm-text-ellipsis {display:none; }
    .sm-user-ui .sm-lightbox-v2-photo-title-and-caption {height:48px;}
    

    Thanks, Jim, I appreciate it!

  • JSS44JSS44 Registered Users Posts: 46 Big grins

    @Hikin' Mike said:

    .sm-user-ui .sm-lightbox-v2-photo-title .sm-button-label p,
    .sm-user-ui .sm-lightbox-v2-photo-title .sm-button-label h2 {
      color: black;
    }
    
    .sm-user-ui .sm-lightbox-v2-photo-title .sm-button-label p {
      font-size: 30px;
    }
    

    These changes are working great for my landscape oriented images but the title text on portrait images is staying white. Is there a way to change that? (The captions aren't showing at all on portrait images at the moment--even when I leave the title and caption to display over the image rather than below it-- but I'm hoping that will change.) I really appreciate the help.

  • Hikin' MikeHikin' Mike Registered Users Posts: 5,448 Major grins

    @JSS44 said:

    @Hikin' Mike said:

    .sm-user-ui .sm-lightbox-v2-photo-title .sm-button-label p,
    .sm-user-ui .sm-lightbox-v2-photo-title .sm-button-label h2 {
      color: black;
    }
    
    .sm-user-ui .sm-lightbox-v2-photo-title .sm-button-label p {
      font-size: 30px;
    }
    

    These changes are working great for my landscape oriented images but the title text on portrait images is staying white. Is there a way to change that? (The captions aren't showing at all on portrait images at the moment--even when I leave the title and caption to display over the image rather than below it-- but I'm hoping that will change.) I really appreciate the help.

    Try this instead:

    .sm-user-ui .sm-lightbox-v2-photo-title .sm-icon,
    .sm-user-ui .sm-lightbox-v2-photo-title .sm-button-label,
    .sm-user-ui .sm-lightbox-v2-photo-title .sm-button-label h2,
    .sm-user-ui .sm-lightbox-v2-photo-title .sm-button-label h4 {color:black}
    
  • blouieblouie Registered Users Posts: 77 Big grins

    Hi Hikin' Mike,

    That didn't work.

    In order to get captions back with that code, I had to delete the code to hide the "View Photos Details" button. So the result is that I got the caption, and it was positioned and colored perfectly, but the unwanted "View Photo Details" button comes back, and the unwanted gray shading at the bottom of my image comes back.

Sign In or Register to comment.