Customizing the New Lightbox

13567

Comments

  • JtringJtring Major grins CaliforniaPosts: 512Registered Users Major grins

    @leftquark said:

    @Jtring said:
    5. Then there is the question of how to close the information panel. It may not be terribly obvious to a casual visitor. In the test version, the info screen icon on the navbar at the left was highlighted when the info screen was active. That provided a cue that that button was linked to the display. Today it's not highlighted other than by the not-terribly-obvious 3px wide bar next to it. I've used custom CSS to restore the highlighting and double the width of that bar. I'd still encourage SM to restore the highlighting they had earlier.

    Hmm, it should still show the accent color next to whichever item in the sidebar is selected. Clicking the button will close the sidebar. Also clicking on the photo will also close the sidebar.

    The accent color bar is there. The problem is that on a high resolution screen, a 3px wide bar is pretty thin. It can really disappear in Firefox if you have a sidebar with bookmarks. It's more visible when it butts right up to the end of the screen. I just changed the number of pixels, but something like .3vw would be more responsive across various screen sizes.

    How to close the sidebar was one of the bigger usability items that we came across as we tested this. We’re eager to hear peoples thoughts and to then continue to iterate. Most of the folks we tested the new LB with found clicking on the photo on their own but we’re curious to see how this holds up now that it’s out in the wild.

    I didn't even try to click the image as a way of getting rid of the information panel. It never came to mind. That must say something about my odd mind, but I'm not sure what.

    Jim Ringland . . . . . jtringl.smugmug.com
  • JtringJtring Major grins CaliforniaPosts: 512Registered Users Major grins

    @W.W. Webster said:
    Here's a simple request, I think. How can I move the title button from the left to the centre, as it presently overwrites my white watermark with a confusing result.

    Thanks in advance for a solution to this.

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

    Jim Ringland . . . . . jtringl.smugmug.com
  • Lille UlvenLille Ulven Lille Ulven ScandinaviaPosts: 525Registered Users Major grins

    For those of you, who do not want the details button and the title text displayed over your photos, while the button stays in the sidebar, this should do the trick:

    .sm-button.sm-button-nochrome.sm-button-size-large.sm-button-skin-none.sm-lightbox-v2-photo-title.sm-lightbox-v2-hide-landscape.sm-flex-justify-start {
        display: none;
    }
    
    http://www.lilleulven.com - The Photos of my travels
    http://blog.lilleulven.com - The Stories of my travels
  • JSS44JSS44 Big grins Posts: 46Registered Users Big grins

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

    I think that could work.

  • AllenAllen "tweak 'til it squeaks" St. Louis, MoPosts: 9,678Registered Users Major grins
    edited August 17, 2019

    Just realized that the "Edit Photo Details" is a huge button. This is only seen when logged in.
    I'm sure anyone logged in knows what it is and it can be minimized and placed somewhere to not interfere with the photo info stack view.
    Maybe icon when "logged in" in left nav stack?

    I use Web Dev to toggle it on and off when customizing to examine info stack view of visitors.

    Al - Just a volunteer here having fun
    My Website | My Blog
  • Lille UlvenLille Ulven Lille Ulven ScandinaviaPosts: 525Registered Users Major grins

    @Allen it is only visible when you are logged in, not when your visitors are logged in (at least on my site). But you can toggle the size with this code:

    .sm-button.sm-button-size-large.sm-button-skin-default.sm-image-metadata-edit-button.sm-button-full-width {
        width: 20px;
        font-size: 10px;
    }
    
    http://www.lilleulven.com - The Photos of my travels
    http://blog.lilleulven.com - The Stories of my travels
  • AllenAllen "tweak 'til it squeaks" St. Louis, MoPosts: 9,678Registered Users Major grins
    edited August 17, 2019

    Anyone get that feeling when all of a sudden you realize you can't think of what to customize next? :D

    Al - Just a volunteer here having fun
    My Website | My Blog
  • JtringJtring Major grins CaliforniaPosts: 512Registered Users Major grins

    @leftquark said:

    @Jtring said:
    6. Finally, a two small points regarding the information display. In the camera information section, it really seems ISO should be next to aperture and exposure time (shutter speed) since the three link to determine overall exposure. It seems out of order in its current position.

    In the next few weeks we’re planning on slimming down the # of items displayed by default in the “Camera Info” section (essentially the standard information like camera, lens, ISO/Aperture/Shutter Speed, Copyright info, and Date Taken). We’ll improve the grouping of items too.

    Add focal length and I'd think you had the perfect basic list.

    Jim Ringland . . . . . jtringl.smugmug.com
  • polarispolaris Posts: 9Registered Users Big grins
    Hello everyone

    Does anyone here know how to hide or remove of everything in a lightbox like "view photo details" "full screen" "forward/backward arrow" except for the photo? I want to like the classic one. Any help would be appreciated. Thank you.
  • BigRedBigRed Major grins Central MarylandPosts: 275Registered Users Major grins
    edited September 11, 2019

    Just sharing... To achieve a classic Lightbox image view with no text or tools/buttons except for navigation (R/L arrows & close X), this seems to work for me:

    /* NEW LIGHTBOX 2019: HIDE ALL ACTION BUTTONS AT LEFT  */  
    .sm-user-ui .sm-lightbox-v2-navbar-primary .sm-button {
      display: none;
    }
    
    /* NEW LIGHTBOX 2019: TURN OFF ALL BOTTOM BUTTONS */
    .sm-user-ui .sm-lightbox-v2-photo-buttons {
        display:none;
    }
    
    http://www.janicebrowne.com - Janice Browne Nature Art & Photography
  • radialMeltradialMelt CanadaPosts: 2Registered Users Beginner grinner
    > @BranislavMilic said:
    > I totally disagree with SmugMug’s decision to remove the persistent display of the title, of the description, and of the keywords under the photo in the Lightbox. Please bring back the appearance as it was before the update. Thank you.

    Agreed. I am no pro user, but when I share my galleries with family, etc, the persistent captions below the picture is very important.
  • Hikin' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaPosts: 4,478Registered Users Major grins

    Since my site is white, but prefer a dark background in my Lightbox, I tried the code posted above. Works great but it has some "holes". When you click on some of the other features, the original background still shows. Rather post the code here (It may change), I thought I'd add it to my Customization page: https://gallery.imagesinthebackcountry.com/Smugmug-customization/Change-Background-Color-in-SmugMug-Lightbox

  • Case1Case1 Big grins Czech RepublicPosts: 17Registered Users Big grins
    edited August 18, 2019

    I think it's not a very good idea to group photo title/caption into a single "section" with various camera metadata and all that stuff. I really don't see any reason for that. Ideally, I want the title and caption to always be displayed, because that's what they're for, while the camera metadata should by default be disabled, because that's really not something a person viewing the photo should generally be interested in (but the viewer should obviously still be able to view these if interested in it).

    Turning these into all or nothing doesn't really make any sense to me. Especially given that the camera metadata takes a lot of space.

    My ideal configuration would be title, caption and possibly keywords (I personally don't think keywords are something that has to be shown to the visitor, but I understand some people want them to be seen for easier navigation) shown by default under the photo (with an option to turn them off or make them only appear on mouseover or something like that), and camera metadata shown separately in a sidebar or overlay box by clicking a button if the viewer wants to see that. That's a layout that makes the most sense to me for a photo gallery.

  • polarispolaris Posts: 9Registered Users Big grins
    edited August 18, 2019
    > @BigRed said:
    > Just sharing... To achieve a classic Lightbox image view with no text info or tools/buttons (just navigation), this seems to work for me:
    >
    > /* NEW LIGHTBOX 2019: HIDE ALL ACTION BUTTONS AT LEFT */ .sm-user-ui .sm-lightbox-v2-navbar-primary .sm-button { display: none;}/* NEW LIGHTBOX 2019: TURN OFF ALL BOTTOM BUTTONS */.sm-user-ui .sm-lightbox-v2-photo-buttons { display:none;}

    Thanks for sharing. It worked when I inserted CSS content to a single gallery. When I entered your code into the custom CSS theme, then it does not work. I have no idea why?

    Do you also know how to resize the photo in a lightbox?
  • Hikin' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaPosts: 4,478Registered Users Major grins
    edited August 18, 2019

    @polaris said:
    I have no idea why?

    Without seeing your site, who knows. I'm going to guess you put it in the wrong section or a typo. I tried it and it works. This is where it goes: https://gallery.imagesinthebackcountry.com/Smugmug-customization/Adding-CSS-to-your-SmugMug-Website

  • BranislavMilicBranislavMilic BrusselsPosts: 2Registered Users Beginner grinner
    > @Case1 said:

    > My ideal configuration would be title, caption and possibly keywords (I personally don't think keywords are something that has to be shown to the visitor, but I understand some people want them to be seen for easier navigation) shown by default under the photo (with an option to turn them off or make them only appear on mouseover or something like that), and camera metadata shown separately in a sidebar or overlay box by clicking a button if the viewer wants to see that. That's a layout that makes the most sense to me for a photo gallery.

    PLEASE BRING BACK THE PREVIOUS APPEARANCE

    PHOTO
    Title
    Description
    Keywords

    Thank you
  • Erick LErick L Major grins Posts: 355Registered Users Major grins

    Warning: As always, use at your own risk. These can break at any time should we make improvements to the Lightbox in the future.

    You should put that on the Smugmug homepage. Who the hell thought that putting crap over the photos would be an improvement?

  • polarispolaris Posts: 9Registered Users Big grins

    @Hikin' Mike said:

    @polaris said:
    I have no idea why?

    Without seeing your site, who knows. I'm going to guess you put it in the wrong section or a typo. I tried it and it works. This is where it goes: https://gallery.imagesinthebackcountry.com/Smugmug-customization/Adding-CSS-to-your-SmugMug-Website

    Thank you, Mike! I found the problem :)

    Do you know how to resize the photo in Lightbox? I don't want the photo shows fullscreen on the browser. I am looking for the CSS code that could set the padding or margin in a lightbox. If you could give me the code, I appreciated :-).

    I wish SmugMug has the option to disable the Lightbox, but it seems no way.

  • Hikin' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaPosts: 4,478Registered Users Major grins

    @polaris said:
    Do you know how to resize the photo in Lightbox? I don't want the photo shows fullscreen on the browser. I am looking for the CSS code that could set the padding or margin in a lightbox. If you could give me the code, I appreciated :-).

    Why not just limit the size displayed? Go to your Gallery Settings > Photo Protection > Maximum Display Size.

  • coro085coro085 Major grins Brianza, ItalyPosts: 76Registered Users Big grins

    This new New Lightbox it seems complicated.
    Now the mouse icon will turn into a magnifying glass while your mouse is over the photo
    and get a picture not in size and quality as in the old version "Size and then Original"
    Example:
    https://www.romeocolombo.com/Recent-Photos/i-233G8MH/A
    Good magnifying glass while your mouse is over the photo if then I see bigger and in the quality loaded.
    Greetings
    https://www.romeocolombo.com/

  • TechuserTechuser Posts: 1Registered Users Beginner grinner
    Since it made a big change it should already allow customization options instead of requiring to write css to make this useable again, like how we get choices for bottom/under info when customizing galleries.
    For users that limit the resolution and have a bottom watermark it got completely cluttered with info over the photo, not to mention the buy button covering the corner.

    I'm using the code now someone posted to put it under the photo again, but then the title and "view photo details" looks almost invisible with galleries that have a white background, bit weird too that the info is aligned to the corner of the page instead of closer to the image.
  • polarispolaris Posts: 9Registered Users Big grins
    edited August 19, 2019

    @Hikin' Mike, said:

    @polaris said:
    Do you know how to resize the photo in Lightbox? I don't want the photo shows fullscreen on the browser. I am looking for the CSS code that could set the padding or margin in a lightbox. If you could give me the code, I appreciated :-).

    Why not just limit the size displayed? Go to your Gallery Settings > Photo Protection > Maximum Display Size.

    Thanks, Mike. But I want the image displayed smaller in Lightbox, not the image quality via Poto Protection as you suggested. Please see the photos attached.

  • Hikin' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaPosts: 4,478Registered Users Major grins

    @coro085 said:
    This new New Lightbox it seems complicated.
    Now the mouse icon will turn into a magnifying glass while your mouse is over the photo
    and get a picture not in size and quality as in the old version "Size and then Original"
    Example:
    https://www.romeocolombo.com/Recent-Photos/i-233G8MH/A
    Good magnifying glass while your mouse is over the photo if then I see bigger and in the quality loaded.
    Greetings
    https://www.romeocolombo.com/

    I noticed that too. I hope this is a bug. I don't want to zoom past the Gallery Settings Maximum Display Size.

  • AllenAllen "tweak 'til it squeaks" St. Louis, MoPosts: 9,678Registered Users Major grins

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

    Al - Just a volunteer here having fun
    My Website | My Blog
  • Hikin' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaPosts: 4,478Registered Users Major grins

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

    No. I just changed it to medium (600 x 400) and logged out. It zooms to the screen, way past maximum photo size.

  • Djm3006Djm3006 Major grins Steamboat Springs, ColoradoPosts: 176Registered Users Major grins

    I like the new Lightbox and the mods you can do, But for me the Title/caption/Keywords/Metadata can all be seen in Gallery view and the Lightbox is for the potential customer to have a closer look at the photo they would have already seen info before going into Lightbox view

  • polarispolaris Posts: 9Registered Users Big grins

    Hello everyone

    Does anyone know how to change the background color or hide backward or forward arrow in the lightbox? Please see the attached photo that what I need. Thank you very much.

  • camnercamner Beginner grinner Posts: 62Registered Users Big grins

    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/

  • dedricramseyphotodedricramseyphoto Posts: 8Registered Users Big grins
    edited August 20, 2019

    Edit: Disregard, the code I mentioned before still works. But for those who previously relabeled your lightbox buy button, the new code looks like this:

    /*Change the BUY PHOTO button label in Lightbox v2*/
    .sm-lightbox-buy-button:after {
    content: ' Whatever you want it to say here';
    }
    

    However, still trying to figure out how to change '.sm-com-lb-sidebar-title' and the label on the Buy Multiple Photos button. In my galleries, ideally those should say 'Buy This Print' and 'Buy Multiple Prints'.

Sign In or Register to comment.