Upcoming Lightbox Changes

1235»

Comments

  • ShinryaShinrya Peter Stewart Hong KongPosts: 134Registered Users Major grins
    edited November 27, 2018

    Your images appear perfectly tack sharp to me in the lightbox. Viewing in Chrome on a retina screen.

    With my own testing, I found that whatever Smugmug is doing with the display copies, it's doing a bad job. On my screen, anything X3 or under looks very fuzzy, so I've regrettably had to set my display copy to a size slightly larger than I'm comfortable with (iPad Retina X4), in order to get sharp copies when the browser scales the image to fill the screen. I too tried fiddling with code to get the smaller sizes to appear sharper, but it caused the jagged edges and other problems depending on the browser and resolution used.

    I'm honestly no expert with any of this, but feel this really shouldn't be something we should have to deal with. Every other photo service be it Flickr, 500px, Squarespace, Behance, Format etc that are designed to work with high resolution images, they all provide fantastic pixel perfect scaling on any screen.

  • leftquarkleftquark SmugMug Product Team Posts: 3,422Administrators, Vanilla Admin, SmugMug Product Team SmugMug Employee

    I think we're going to undo the image-rendering changes that are causing the jagged edges. It's improved the sharpness on some photos but it's feeling like overall it's creating worse images.

    Do you have a couple examples where the old Lightbox looked soft? Even better, do you have a few examples where you've also put the photos on other services so we can compare?
    (FWIW, I've looked at Flickr, and 500px and they do the exact same thing we do: load a larger image and resize it down using CSS. So I'd like to see if there's something about the display copy that's different)

    SmugMug Director of Product / dGrin Afficionado
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • JtringJtring Major grins CaliforniaPosts: 466Registered Users Major grins

    @leftquark said:
    I think we're going to undo the image-rendering changes that are causing the jagged edges. It's improved the sharpness on some photos but it's feeling like overall it's creating worse images.

    I certainly agree. But moving on, is there some other way you plan to address the sharpness loss when moving from display copies to fills?

    (I can, of course, re-introduce crisp image rendering locally via custom CSS. That comes with a downside. I then need to review the site image-by-image and insert special code to turn it off on the 2 to 10% of images where it does damage.)

    Jim Ringland . . . . . jtringl.smugmug.com
  • leftquarkleftquark SmugMug Product Team Posts: 3,422Administrators, Vanilla Admin, SmugMug Product Team SmugMug Employee

    @Shinrya said:
    Every other photo service be it Flickr, 500px, Squarespace, Behance, Format etc that are designed to work with high resolution images, they all provide fantastic pixel perfect scaling on any screen.

    If you can show us the same image on the various platforms, we can keep investigating, but so far, I don't see any of them doing anything special. They just display a display copy and let the browser handle it. Most photos look amazing in the SmugMug lightbox, so I'd like to compare the ones that don't to the other services and see if we can understand better.

    SmugMug Director of Product / dGrin Afficionado
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • ShinryaShinrya Peter Stewart Hong KongPosts: 134Registered Users Major grins
    edited December 2, 2018

    These were my findings, from viewing the various sizes on my screen (Retina 15" Macbook Pro) in Chrome. Also tested in Windows 10.

    • Setting my display copies to anything lower than X3, resulted in noticeably fuzzier images when viewed in the Lightbox, either at their native size, or set to 'fill'.
    • With display copy set to X3, there was a minimal difference in sharpness between X3 and X4 when both are set to 'fill' the screen. I assume this is the browser doing the scaling??

    To rule out the possibility this being an issue with retina screen scaling, I also viewed the lightbox with my screen resolution set to its native "2880x1800", which removes the pixel doubling. Again I noticed that X4 viewed at 100% looked pretty sharp, then moving down to X3 and smaller, the image took a dive in sharpness when viewed natively 100%.

    That being said, I have viewed my lightbox on another PC with a standard LCD monitor, and honestly couldn't tell any difference in sharpness between the sizes. So perhaps this is just a thing with browser scaling and retina type displays.

    @leftquark I took your suggestion and compared a few images against their counterparts uploaded on Flickr & 500px. I will concede that there is in-fact no difference in sharpness between there and smugmug lightbox. The only exception is if lightbox images are set to X2 or lower size, then they are definitely displaying fuzzy on my screen regardless whether viewed 100% or set to 'fill'.

  • leftquarkleftquark SmugMug Product Team Posts: 3,422Administrators, Vanilla Admin, SmugMug Product Team SmugMug Employee

    A large number of design updates and bug fixes should be going out today (or already are out). These updates are still restricted to the Lightbox when launched from within the Organizer. Your galleries are still using the old Lightbox.

    While working through these updates we haven't felt that the stability of the code was up to the standards we are comfortable with and we also have some big ideas on how we can design a much better looking and user friendly Lightbox. We had initially sought out to rebuild Lightbox (looking and acting the same) using new coding practices that would let us place the Lightbox in additional spots, like the Slideshow and Carousel, but in stepping back we can see that there's a number of user experience improvements that could be made.

    We'll be taking a brief pause to rebuild the foundation for Lightbox and introduce a much better experience. Stay tuned.

    tl;dr: We've made a number of improvements to the Lightbox in the Organizer so you could have a great experience there, but we'll be working on an even better lightbox with an estimated release date sometime around March or April.

    SmugMug Director of Product / dGrin Afficionado
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • leftquarkleftquark SmugMug Product Team Posts: 3,422Administrators, Vanilla Admin, SmugMug Product Team SmugMug Employee

    @Shinrya said:
    @leftquark I took your suggestion and compared a few images against their counterparts uploaded on Flickr & 500px. I will concede that there is in-fact no difference in sharpness between there and smugmug lightbox. The only exception is if lightbox images are set to X2 or lower size, then they are definitely displaying fuzzy on my screen regardless whether viewed 100% or set to 'fill'.

    As a result of the bug fixes above, we've removed the "added sharpness" that was creating the jaggies.

    SmugMug Director of Product / dGrin Afficionado
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • AllenAllen "tweak 'til it squeaks" St. Louis, MoPosts: 9,514Registered Users Major grins

    I just went into Organizer and the 1st photo I opened in Lightbox, I'm still counting and the overlay never did hide. Firefox 64.0

    retry
    Opened another in LB and overlay IMMEDIATELY hid. Wiggle mouse and overlay came back and now won't hid.
    Can not find any pattern of what's happening.

    It looks really bad sized full browser. Need some kind of small gap/border on all sides.

    Changed from this browser tab to tab with LB photo and overlay is gone. Any mouse movement brings back overlay.

    Overlay interferes with viewing photos when using side arrows. Overlay needs to remain hidden until mouse moves off of arrows.
    Now I have to move mouse off arrow to hid overlay. Slows down clicking thru photos.

    Looks like I'm forced into seeing the photo full browser.
    I think losing the sizes is really a bad idea. So you're telling visitors what size you think they NEED to see? BS I want to see whatever size I want to see.

    Al - Just a volunteer here having fun
    My Website | My Blog
  • leftquarkleftquark SmugMug Product Team Posts: 3,422Administrators, Vanilla Admin, SmugMug Product Team SmugMug Employee

    The elements will hide themselves after 1.5 seconds of no mouse movement. If your mouse remains over any of the elements (navigation arrows, title, caption, buttons, etc), the overlay will remain until the mouse is removed from them, since you're presumably about to click on them and you don't want to click on a missing button.
    Personally I find it a little too fast, and I'd love to see the first photo when the LB opens keep the elements opened longer than on subsequent photos when I'm trying to browse photos and then have it hide so I can see the photo.

    I'm a little confused, Allen, because what you describe sounds like you want to be able to navigate by clicking on invisible navigation arrows. Wouldn't that be weird, to click on something that wasn't there? We display the navigation arrows when your mouse is near them so you can actually click on them. You can always let the overlay be hidden and then use your keyboard arrows to navigate.

    Lightbox in all of its existence has displayed the photo full screen. We recently attempted to add a slight framing around the photo and the community overwhelmingly said "bring back full sized photos."

    SmugMug Director of Product / dGrin Afficionado
    aaron AT aaronmphotography DOT com
    Website: http://www.aaronmphotography.com
    My SmugMug CSS Customizations website: http://www.aaronmphotography.com/Customizations
  • AllenAllen "tweak 'til it squeaks" St. Louis, MoPosts: 9,514Registered Users Major grins
    edited December 19, 2018

    I think the nav arrows should remain visible when hovered but the rest of overlay hidden when you click thru photos.
    To see overlay just move mouse. Otherwise hide/show arrows with overlay.

    The browser is hardly ever the same ratio as the photos. I'm referring to the two sides that
    bump the sides. Needs a slight dark margin. The photo and browser touching interferes with the eye seeing the photo boundaries.
    BTW, I have to switch browser tabs to get overlay to hide. Then re-hover photo is show overlay. Then
    the overlay stays forever when I move mouse off browser window. Or seems like different at times.

    "said "bring back full sized photos.""
    No complaint with that but photos are many different ratios so this makes no sense unless they resize
    the browser with every size change. Two sides will have a blank area unless the browser is resized.
    All I'm saying is that any part of a photo should never touch a frame. That's why mats were invented.
    Edit: notice the current LB is correct with the photo not touching browser 4 sides. It adds a slight margin on the two sides.

    Al - Just a volunteer here having fun
    My Website | My Blog
  • jerryrjerryr Smugmug Customization Posts: 528Registered Users Major grins

    Hi all - Happy 2019!
    I am in search of some new CSS that will change just the background of the bottom area of the area of the lightbox (the area which contains the title, caption, keywords on the left AND the icons on the right). Suggestions ?

  • AllenAllen "tweak 'til it squeaks" St. Louis, MoPosts: 9,514Registered Users Major grins
    edited January 1, 2019

    Are there no photographers on here that actually realize you do not touch the frame/background/browser to the photo?
    It's very bad practice to not have some kind of mat/margin around a photo for separation.
    This is especially bad using "Fill" as default. "Fill" is the worst setting for viewing a lot of photos.
    The "Sizes" button needs to be retained.
    Example of new Organizer lightbox:

    Current LB. Notice mat/margin separation from browser.
    Notice much shorted overlay at bottom.

    Much clearer with margin all around.

    BTW
    This is what I get opening a photo in Organizer LB. The overlay never goes away without a bunch of clicking around. Latest FF
    Without clicking around, using nav arrows or keyboard the overlay remains for all photos.
    The default "Fill" looks like crap.

    Al - Just a volunteer here having fun
    My Website | My Blog
  • LinhLinh Major grins Posts: 68Registered Users Big grins

    @leftquark said:
    As @Allen and @Jtring pointed out, the caption is displayed on any mouse movement and remains displayed for 3 seconds after all mouse movement has stopped. If the mouse is positioned over the caption, the caption will display indefinitely.

    Based on your feedback we wanted to get rid of the potential for the title and caption to always cover a small portion of the photo (which the old lightbox does), and we also wanted to get rid of the wonky slide up and down effect that so many people had used customizations to get rid of. The downside was that in many situations, viewers didn't realize that a title and caption existed and could be viewed. That led us to settle on displaying the caption unless there's 3 seconds without the mouse being placed over the caption. This , then, has the downside of having the effect that Allen mentions above: moving the mouse to navigate to the next/previous photo causes the caption to always be displayed.

    Part of the process of releasing this in small pieces is so that we can gather feedback like this before we roll it out in a way that all your visitors will interact with the new lightbox. We'll continue to collect feedback on this interaction and if we get more of this feedback, we'll work with our design and user experience team to see if we can come up with additional solutions.

    So, I came to the forums to figure out how to fix this issue. I'm unclear of what is supposed to be changed though. My understanding skimming through here is ultimately, we should have the option to have the lightbox title/toolbar NOT overlay the image, correct? Right now, it still overlays with mouse movement, which is a problem since 99% of family use the mouse to move to the next image (also not sure how it looks on mobile off hand). I can hide it completely, but I still want options available to folks. Is this option still coming as I don't see it in the Organizer lightbox view.

    vote on the following smugmug feedback:
    CSS Block To Flow Down To Children Folders/Pages/Galleries
    [URL="http://feedback.smugmug.com/forums/17723-smugmug/suggestions/1104583-a-bulk-
    gallery-download-button-for-my-visitors"]bulk download option for clients[/URL]
  • JtringJtring Major grins CaliforniaPosts: 466Registered Users Major grins

    @jerryr said:
    Hi all - Happy 2019!
    I am in search of some new CSS that will change just the background of the bottom area of the area of the lightbox (the area which contains the title, caption, keywords on the left AND the icons on the right). Suggestions ?

    For the new lightbox, at least as it stands now, the code below will do the job. Updates may be needed with the next iteration of SM's code development.
    .sm-lightbox-v2 .sm-lightbox-v2-ui-bottom {background-color:green;}

    You probably would have launched a new Dgrin thread if you wanted the code for the existing lightbox, but just in case that's what you're after, try the snippet below. Same idea. The class structure is klutzier in the old lightbox.
    .sm-user-ui .sm-lightbox .sm-lightbox-panel-grid .sm-lightbox-panel {background-color:purple}.

    Jim Ringland . . . . . jtringl.smugmug.com
  • jerryrjerryr Smugmug Customization Posts: 528Registered Users Major grins
1235»
Sign In or Register to comment.