Upcoming Lightbox improvements (2019 edition)

1468910

Comments

  • AllenAllen Registered Users Posts: 10,007 Major grins

    @sarasphotos said:
    ...
    c) Is / will there be a css hack to turn off the line "from galleryxxx" in a smart gallery? I seem to remember there used to be such a thing and for years I had this text turned off.
    ...

    Thanks for mentioning this.
    Logged off I now see the "from galleryxxx" in a smart gallery lightbox but not in a gallery photos.
    This is absolute great for my passworded family photos because now they can find the source of the photo.
    I agree, perhaps a toggle in gallery "Gallery Settings".

    Al - Just a volunteer here having fun
    My Website index | My Blog
  • FergusonFerguson Registered Users Posts: 1,339 Major grins

    Just a comment on the law of unintended consequences....

    I bet I have 200 galleries if not more where I have written instructions like "Click on an image to full screen, then on the bottom right there will be a down arrow to download a full resolution copy of the image".

    Sigh....I can live with that. I probably should have known better now in the day of responsive web pages to presume a location.

    I still am extremely annoyed that just because Leftquark writes book-length captions ( :) ) the rest of us can't see them in lightbox now. That's what options are for!

  • hadronhadron Registered Users Posts: 95 Big grins

    99% of my captions are a single line or shorter.
    Get rid of the "VIEW PHOTO DETAILS" icon on top of the photo!
    When having the SHOW PHOTO DETAILS option turned OFF, the sidebar is way to wide. It shrinks the photos unacceptably. Make the sidebar have the width and let the caption go to more multiple lines.
    All of these changes are bizzare. Who is giving your developers instructions to make these changes??

  • VerulamVerulam Registered Users Posts: 13 Big grins

    How can we go back to the old lightbox where we can have a slideshow with captions.

  • VerulamVerulam Registered Users Posts: 13 Big grins

    If the caption field is empty please remove the words “no details available for this photo”

  • RonvanderPlasRonvanderPlas Registered Users Posts: 22 Big grins

    What's the use of showing a message that no details are available if there's no title.

  • RonvanderPlasRonvanderPlas Registered Users Posts: 22 Big grins

    Yeh, both have the same idea. It happens when the previous photo has details and you swipe to the next.

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

    @sarasphotos said:
    a) I'm pretty dismayed that there is no map - when is it expected to arrive? (or have I just not found it?)

    We didn't want to hold up the massive improvements just for the map but we expect to have the map back within the next week or so (and potentially by early next week).

    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
  • AllenAllen Registered Users Posts: 10,007 Major grins

    @leftquark said:

    @sarasphotos said:
    a) I'm pretty dismayed that there is no map - when is it expected to arrive? (or have I just not found it?)

    We didn't want to hold up the massive improvements just for the map but we expect to have the map back within the next week or so (and potentially by early next week).

    Any improvements planned? Maybe mouse wheel zoom?

    Al - Just a volunteer here having fun
    My Website index | My Blog
  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins

    @Verulam said:
    If the caption field is empty please remove the words “no details available for this photo”

    @RonvanderPlas said:
    It happens when the previous photo has details and you swipe to the next.

    As Ron pointed out, viewers can browse multiple photos once the Lightbox has been opened by clicking next or preview. Some photos in a gallery may have details and some don't and it would be weird if the sidebar closed for photos that didn't, then re-opened for photos that did, so the sidebar stays open with information about their being no details available. If the sidebar was closed and there's no details available, the "Photo Details" button is disabled so they can't launch into a place where it says "No Details Available" -- they should only get to that if they opened the sidebar from a different photo that did have details.

    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
  • VerulamVerulam Registered Users Posts: 13 Big grins

    OK I can see now that I can keep my simple captions below the photos but I need to change the appearance from SmugMug or Collage to Slideshow which will involve some work but not too much. I get that the detailed photo info is for fuller captions, exif and other metadata.

  • hadronhadron Registered Users Posts: 95 Big grins

    If someone has figured out how to make the Font Size larger for the Captions in the Sidebar, please let me know, and include the CSS if that is necessary to do this.
    Much appreciated for my old eyes...

  • AllenAllen Registered Users Posts: 10,007 Major grins

    @hadron said:
    If someone has figured out how to make the Font Size larger for the Captions in the Sidebar, please let me know, and include the CSS if that is necessary to do this.
    Much appreciated for my old eyes...

    .sm-user-ui .sm-lightbox-v2 .sm-image-metadata-caption {
        color: #ddd;
        font-size: 14px;     <<< size
        line-height:1.33em;
        text-align:center;
        background: #333;
        padding: 10px 0;
        border: 4px ridge #aaa; 
     /* border: 4px double yellow; */
        border-radius: 12px;}
    
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • hadronhadron Registered Users Posts: 95 Big grins

    Thanks much Allen, and it works for me.
    I have seen some of you other CSS in this thread. Do you have public access to your site?
    I would love to see what else you have done in your SIDEBAR.

  • AllenAllen Registered Users Posts: 10,007 Major grins

    @hadron said:
    Thanks much Allen, and it works for me.
    I have seen some of you other CSS in this thread. Do you have public access to your site?
    I would love to see what else you have done in your SIDEBAR.

    You're welcome.
    Here's a sample. I still need to customize the Firefox scroll bar.
    https://www.photosbyat.com/Birds/Missouri-Bird-Photos-A-G/i-m7qqRb4/A

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

    What will happen to the SM app for Android?
    It still shows the captions at the bottom of the photo.

  • hadronhadron Registered Users Posts: 95 Big grins

    @Jtring said:

    .
    .
    .

    /* Narrow the spacing on the detailed image information, closer to what it was before the
    most recent change.  This removes the need for scrolling in most cases.*/
    .sm-lightbox-v2-sidebar-content .sm-imageinfo-container .sm-imageinfo-label, 
    .sm-lightbox-v2-sidebar-content .sm-imageinfo-container .sm-imageinfo-value {
        padding-bottom: 3px;
    }
    

    Looking carefully at the photo in this post, there appears a < to the left of the Photo Details section in the side bar.
    Is this a way to hide the Photo Details? If so, could you please post the CSS for this.

  • AllenAllen Registered Users Posts: 10,007 Major grins

    Those are the left and right nav arrows.

    Al - Just a volunteer here having fun
    My Website index | My Blog
  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins
    edited August 16, 2019

    @hadron said:
    What will happen to the SM app for Android?
    It still shows the captions at the bottom of the photo.

    For now they’ll stay with their current design, though we are looking to have consistent design across the platforms. I can imagine a day in which the iOS app, Android app, and web platforms all share a similar design. We’ll let the new design on the web settle and be iterated on before we implement any changes on the apps though

    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
  • JtringJtring Registered Users Posts: 673 Major grins
    edited August 17, 2019

    @hadron said:

    Is this a way to hide the Photo Details? If so, could you please post the CSS for this.

    What do you want to hide? All the content in the sidebar, just part of it, the "VIEW PHOTO DETAILS" message that show on top of the image when you close the sidebar, or something else?

    Jim Ringland . . . . . jtringl.smugmug.com
  • hadronhadron Registered Users Posts: 95 Big grins

    @Jtring said:

    @hadron said:

    Is this a way to hide the Photo Details? If so, could you please post the CSS for this.

    What do you want to hide? All the content in the sidebar, just part of it, the "VIEW PHOTO DETAILS" message that show on top of the image when you close the sidebar, or something else?

    All of my users want to always see Captions but never the Photo details, but as site admin I would like to see Photo Details as needed on a per photos basis. I have tried to turn off Photo Details in the Bulk Gallery Settings, but also prevents the site supervisor from seeing the Photo Details.

    In the old Lightbox, I turned off the Info button for my guests, but as the site admin I always had access to the photo info. That is what I want to replicate in the new Lightbox.

  • hadronhadron Registered Users Posts: 95 Big grins

    @Allen said:

    Here's a sample. I still need to customize the Firefox scroll bar.
    https://www.photosbyat.com/Birds/Missouri-Bird-Photos-A-G/i-m7qqRb4/A

    You and I have very similar likes in the Ligthbox UI. I especially like that you got rid of the Photo Info Icon and replaced it with INFO & CAPTION ON/OFF, you got rid of the Icon View Photo Details which overlays the bottom left on the photo, and the RETURN TO GALLERY button.

    If you don't mind sharing the CSS on these mods, I would greatly appreciate this.

    I have asked Jtring to see if I can also get rid of the Photo Details for my users/guests, but keep it for the site admin. Like the old lightbox info button. Maybe you have an idea on how to do that...

  • AllenAllen Registered Users Posts: 10,007 Major grins
    edited August 17, 2019

    @hadron said:

    @Allen said:

    Here's a sample. I still need to customize the Firefox scroll bar.
    https://www.photosbyat.com/Birds/Missouri-Bird-Photos-A-G/i-m7qqRb4/A

    You and I have very similar likes in the Ligthbox UI. I especially like that you got rid of the Photo Info Icon and replaced it with INFO & CAPTION ON/OFF, you got rid of the Icon View Photo Details which overlays the bottom left on the photo, and the RETURN TO GALLERY button.

    If you don't mind sharing the CSS on these mods, I would greatly appreciate this.

    I have asked Jtring to see if I can also get rid of the Photo Details for my users/guests, but keep it for the site admin. Like the old lightbox info button. Maybe you have an idea on how to do that...

    Sent you message with my current lighbox CSS.

    The download button is only active on my family galleries.

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

    @Allen said:

    Sent you message with my current lighbox CSS.

    The download button is only active on my family galleries.

    Got it, and many thanks. I will try to understand all of your CSS, and with it, I will probably able to customize it somewhat...

  • JtringJtring Registered Users Posts: 673 Major grins

    @hadron said:

    Is this a way to hide the Photo Details? If so, could you please post the CSS for this.

    @Jtring said:
    What do you want to hide? All the content in the sidebar, just part of it, the "VIEW PHOTO DETAILS" message that show on top of the image when you close the sidebar, or something else?

    All of my users want to always see Captions but never the Photo details, but as site admin I would like to see Photo Details as needed on a per photos basis. I have tried to turn off Photo Details in the Bulk Gallery Settings, but also prevents the site supervisor from seeing the Photo Details.

    In the old Lightbox, I turned off the Info button for my guests, but as the site admin I always had access to the photo info. That is what I want to replicate in the new Lightbox.

    I don't see a way to do that completely, but I can offer a part-way solution. It is possible to hide the photo details for visitors but always have them for yourself when logged in. What's gone, as far as I know, is a way to have them pop up only on demand when logged in. In any case, try this. It's a variation of the code I posted for hiding the SHOW MORE button to visitors. One caveat: I've tried this on a desktop, but I haven't checked to see if this does anything unpleasant on the mobile display. I'm still feeling my way around the new lightbox coding.

    /*Removes the CAMERA INFO header and the following information table
    and Show More [camera info] button.  Restores these when logged in as owner. */
    .sm-lightbox-v2 .sm-lightbox-v2-sidebar-content > h5,
    .sm-lightbox-v2 .sm-lightbox-v2-sidebar-content > .sm-imageinfo-container {
        display:none;
    }
    .sm-user-loggedin.sm-user-owner .sm-lightbox-v2-sidebar-content > h5 {
        display:flex;
    }
    .sm-user-loggedin.sm-user-owner .sm-lightbox-v2-sidebar-content > .sm-imageinfo-container {
        display:inline-block;
    }
    
    Jim Ringland . . . . . jtringl.smugmug.com
  • hadronhadron Registered Users Posts: 95 Big grins

    @Allen said:

    Sent you message with my current lighbox CSS.

    I know the CSS you emailed works on your site, but after pasting it into my CSS, some things are not working.
    Hence a few questions (Please take your time answering. None of this is urgent):

    1.. If an "x" is at the beginning of a CSS line, does that mean to ignore that line?
    2. The Info & Camera On/Off button displays, but acts like the PLAY Slideshow button, and
    3. the Photo Details button still shows below the Info & Camera On/Off button.
    4. When I click on the Info & Camera O/Off button, it hides all buttons below it, and also hides the BUY and the View Photo details button.
    5. Your lightbox does not show the Play Slide show button. Is that disabled via Gallery Settings options?

    I wonder if these problems are due to my Gallery Settings.

  • hadronhadron Registered Users Posts: 95 Big grins

    @Jtring said:

    /*Removes the CAMERA INFO header and the following information table
    and Show More [camera info] button.  Restores these when logged in as owner. */
    .sm-lightbox-v2 .sm-lightbox-v2-sidebar-content > h5,
    .sm-lightbox-v2 .sm-lightbox-v2-sidebar-content > .sm-imageinfo-container {
        display:none;
    }
    .sm-user-loggedin.sm-user-owner .sm-lightbox-v2-sidebar-content > h5 {
        display:flex;
    }
    .sm-user-loggedin.sm-user-owner .sm-lightbox-v2-sidebar-content > .sm-imageinfo-container {
        display:inline-block;
    }
    

    This works great on the desktop. Mobile is another story, even without your CSS. I had disabled Photo Details in the gallery setting.. Once I did that, when I clicked on photo details on a mobile photo, the photo disappears and only the caption shows on a new mobile screen. Then you have to close the caption screen, go to the next photo, and repeat. This is crazy.

    Thanks much for your CSS. It does the job for me.

  • BigRedBigRed Registered Users Posts: 288 Major grins

    I'm happy with the Lightbox changes. I find that the scaling and the navigation look great, and I was able to easily customize the layout I wanted. I appreciated the advance notice, and the opportunity to experiment with CSS before go-live.

    I think my satisfaction is primarily because my personal objective for the Lightbox is simply an optimized view of a single image, with clear and easy navigation. No distractions. Classic. As Smugmug itself puts it: "the window that displays your photo within SmugMug." All of the image data that I choose to display to my visitors -- and all of the tools I need as editor -- are located in the Gallery view (primarily Smugmug style) plus its Info popup.

    Just reflecting on this... As with all substantial changes to Smugmug, there are many different opinions because there are so many different ways that people have chosen to personalize SM's functionality. And in this particular case, I daresay the Lightbox has actually become more important for displaying/editing image info as the collage gallery styles have become more popular -- ultimately flipping/mixing the purposes of the gallery and Lightbox views???

    http://www.janicebrowne.com - Janice Browne Nature Art & Photography
  • hadronhadron Registered Users Posts: 95 Big grins

    Is there any way (with CSS) to get rid of (not show) the View Photo Details button which overlays the bottom left of the photo?

  • steamphotossteamphotos Registered Users Posts: 24 Big grins

    @hadron said:
    Is there any way (with CSS) to get rid of (not show) the View Photo Details button which overlays the bottom left of the photo?

    This will remove the icon button but the image title will still be clickable:

    .sm-user-ui .sm-lightbox-v2-photo-buttons .sm-icon-Details {
      display: none;
    }
    
Sign In or Register to comment.