Upcoming Lightbox Changes

1235»

Comments

  • ShinryaShinrya Registered Users Posts: 197 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 Registered Users, Retired Mod Posts: 3,784 Many Grins

    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)

    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

    @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 Registered Users, Retired Mod Posts: 3,784 Many Grins

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

    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
  • ShinryaShinrya Registered Users Posts: 197 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 Registered Users, Retired Mod Posts: 3,784 Many Grins

    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.

    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
  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins

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

    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

    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 index | My Blog
  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins

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

    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
    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 index | My Blog
  • jerryrjerryr Registered Users Posts: 595 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 Registered Users Posts: 10,007 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 index | My Blog
  • LinhLinh Registered Users Posts: 68 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 Registered Users Posts: 673 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
  • leftquarkleftquark Registered Users, Retired Mod Posts: 3,784 Many Grins

    I'm pleased to announce that we've made some major updates to the new Lightbox -- in fact we went back to the drawing board and redesigned and rebuilt it to make your browsing experience even better. Head on over to the Organizer or this thread to read more.

    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
  • jmphotocraftjmphotocraft Registered Users Posts: 2,987 Major grins
    edited August 16, 2019

    I hadn't seen this thread before so I was blindsided by the new lightbox which (as far as I can tell) was rolled out last night. I came here to say bravo, and thank you! I think it's a great improvement, especially on mobile. Swipe and pinch are profoundly better. I had been wishing for that for a long time. I know the SmugMug mobile app already worked that way but I don't expect my clients to download an app to view my photos, nor do I tell them to. This makes my site work like it has finally caught up with the times! As a fellow web application developer, I am very impressed with this and with SmugMug in general. You are lucky to have such a talented team.

    -Jack

    An "accurate" reproduction of a scene and a good photograph are often two different things.
  • jmphotocraftjmphotocraft Registered Users Posts: 2,987 Major grins
    edited August 16, 2019

    @Ferguson said:

    I won't lose sleep over loss of the sizes button, but it does seem like yet another case of removing something that is useful, promising a rosey further where we won't need it and then... waiting.

    I do have a use case for the sizes button. I do some business head shots. These typically get displayed on company websites at small sizes. It was nice to be able to tell a client to choose a small size like "S" or "M", right click and save. Otherwise they might use a very large version, perhaps even original, which slows down their page.

    Also, the X4 size was 2048 pixels wide for a horizontal shot. This is the optimum size for posting on Facebook in order to minimize their otherwise heavy handed resizing and compressing.

    -Jack

    An "accurate" reproduction of a scene and a good photograph are often two different things.
Sign In or Register to comment.