Customizing the New Lightbox

1234568»

Comments

  • Hikin' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaRegistered Users Posts: 5,243 Major grins
    edited January 21, 2020

    @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;}
    
  • leftquarkleftquark Former SmugMug Product Team Registered Users, Retired Mod Posts: 3,775 Many Grins

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

    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
  • camnercamner Beginner grinner Registered Users Posts: 95 Big grins

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

  • blouieblouie Austin, TexasRegistered Users Posts: 39 Big grins
    edited January 26, 2020

    @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 MechanicThe Mechanic NOT A Support Hero Registered Users Posts: 197 Major grins
    edited February 20, 2020

    @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)Paul (France) Big grins Registered Users Posts: 30 Big grins

    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.

  • camnercamner Beginner grinner Registered Users Posts: 95 Big grins

    @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)Paul (France) Big grins Registered Users Posts: 30 Big grins

    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?

  • AllenAllen "tweak 'til it squeaks" St. Louis, MoRegistered Users Posts: 9,925 Major grins

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

    Al - Just a volunteer here having fun
    My Website index | My Blog
  • camnercamner Beginner grinner Registered Users Posts: 95 Big grins

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

  • AllenAllen "tweak 'til it squeaks" St. Louis, MoRegistered Users Posts: 9,925 Major grins
    edited February 27, 2020

    @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
     }
    
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • RonvanderPlasRonvanderPlas NederlandsRegistered Users Posts: 18 Big grins

    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)Paul (France) Big grins Registered Users Posts: 30 Big grins

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

  • LaurieWinterNZLaurieWinterNZ New ZealandRegistered Users Posts: 6 Big grins

    @leftquark I would like to add my support to those wanting the Title, Caption and other details to stay permanently visible on the left hand side in lightbox.
    As I am planning on using Collage Landscape layout, this is the only way I can get all of that information to show nicely for each photo. Most of my customers are a little older, and may not realise to click on the caption or the hamburgers to see more.

    I appreciate the various codes I have found reading through these posts but this is the one thing I would really, really like. The option to turn that on and off would satisfy both sides of the coin.

    For me, the reasoning is that I want to include purchasing information in my caption. I live in New Zealand and SmugMug does not have a printer here. It's totally not economical for me as a hobby photographer to ship from other areas of the world, and thus I can not use SmugMug's buy functionality.

  • Davidw25Davidw25 Columbus, OHRegistered Users Posts: 8 Big grins
    I am working on building my first site. One of the things I am really struggling with is that in the Lightbox view and Galleries, there is text that comes over the image which I really do not prefer. I don't mind it, actually kind of like it when it is the title of the gallery that shows up upon hover, or goes away when you hover, but when someone is just viewing the images, I don't want any text over the image. So I have been exploring a bit for the last 24 hours and have found a few things that get close but it isn't really what I want. Here is a link to a gallery - https://www.davidwallacephotography.com/Galleries/Details/

    The way it looks on the gallery page is fine, but when I go to the lightbox there are a few things I don't like.
    1st, the "ombre" effect...I just want the text on the background.
    2nd, I would like the text to be dark, like the buttons on the left
    3rd, I would be happy if I could change the subtext to a slightly lighter color.

    Here is the code I have, it is on the Whole Site level in the the Theme CSS section:

    /*Changing font size and color of TITLE*/
    .sm-lightbox-title {
    font-size: 30px !important; /*This code will change the font size of TITLE*/
    color: #222222 !important; /*This code will change the font color of TITLE*/
    }

    /*Changing the font size and color of CAPTION*/
    .sm-lightbox-caption {
    font-size: 24px !important; /*This code will change the font size of CAPTION*/
    color: #3a3a3a !important; /*This code will change the font color of CAPTION*/
    }

    /*
    8. Render title and buy button below image on desktop
    & tablet landscape viewports.
    */
    @media screen and (min-width: 961px) {
    .sm-user-ui .sm-lightbox-v2-content {
    height: calc(100% - 72px);
    }

    .sm-user-ui .sm-lightbox-v2-photo-buttons {
    padding: 0;
    bottom: -60px;
    }

    .sm-user-ui .sm-lightbox-v2-photo-buttons-scrim {
    background: none;
    }

    /* Make the folder images slightly transparent when the mouse hovers over it */
    .sm-user-ui .sm-tiles .sm-tile-content:hover {
    opacity: 0.85;
    /* Have the transparency fade in */
    -webkit-transition: all 0.15s ease-in;
    -moz-transition: all 0.15s ease-in;
    transition: all 0.15 ease-in;
    }

    /* Fade out the transparency. This code can be removed if you do not want it to fade */
    .sm-user-ui .sm-tiles .sm-tile-content {
    -webkit-transition: all 0.15s ease-in;
    -moz-transition: all 0.15s ease-in;
    transition: all 0.15 ease-in;
    }
  • JoMelJoMel GermanyRegistered Users Posts: 10 Big grins
    I need some help with round corners in the new lightbox.

    I used this code to round the corners:

    .sm-user-ui .sm-lightbox-v2-photo {
    border-radius:20px;
    }

    It mostly works good, but not on all photos. Some photos have alle 4 corners rounded but there are some where only the the upper corners were rounded and one or sometimes both corners at the bottom are still angular.
    Why is this so and how can I fix this?
  • AllenAllen "tweak 'til it squeaks" St. Louis, MoRegistered Users Posts: 9,925 Major grins
    edited April 12, 2021

    It's the background of the lightbox caption showing its square corners.
    Add the radius to this, the caption box with background, to match the photo corner radius.

    .sm-lightbox-v2-photo-buttons-scrim-dark {
        border-radius: 20px
    }
    
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • JoMelJoMel GermanyRegistered Users Posts: 10 Big grins
    Perfect, now it`s looking good on all images.

    Thanks
  • blouieblouie Austin, TexasRegistered Users Posts: 39 Big grins
    edited April 23, 2021

    In Lightbox, how can I change the 'X' button to a button with the standard Internet icon of a grid indicating "goes to thumbnails'. Also, how to change the text of the popup from 'Close' to 'Thumbnails'.

    Also, none of the suggestions mentioned above work to have persistent captions without having to first click the 'Photo Details' button. I want to not have the 'Photo Details' button at all; just the captions to appear automatically immediately when opening Lightbox. On both desktop and mobile. (With mobile now, the 'Photo Details' button doesn't even appear unless you hold the phone horizontally.) Also, not to have the appearance of the caption shift the image to the right in the window.

  • blouieblouie Austin, TexasRegistered Users Posts: 39 Big grins

    Also, how to get rid of the purple bar to the left of the 'Photo Details' button when the 'Photo Details' button has been clicked on?

Sign In or Register to comment.