Upcoming Lightbox Changes

leftquark

Hello Dgrinners! We have an announcement to make that might affect those of you that customize the Lightbox experience using our Custom CSS tools.

We are in the process of rolling out a new version of our Lightbox component.
(for those unfamiliar, when you click on a photo to open it as large as possible, the window that opens with the large photo is called the "Lightbox")

This new version is built using modern tools and techniques and will allow us to deliver a better experience moving forward (and finally launch some of the feature requests many of you have had on the Lightbox).

We'll be launching the new Lightbox in pieces and will slowly roll it out to the different parts of the site. It's already live in a few places today; If you want to check it out try opening the Lightbox in Organizer. So far we've only launched it in places where the Lightbox has never inherited any of your customizations (like in the Organizer). For those who have customized their Lightbox, we'll start with the places that Lightbox is least used so you can have a chance to update your CSS before the new Lightbox is used in the more common places.

The visual differences should be minimal but it's already packing a bunch of bug fixes and small new features that were driven by your feedback. For example, a common customization to extend the caption area is now the default behavior; the caption area will extend to be much larger. The mobile experience is also completely revamped and includes some improvements that make it easier to view photos on mobile devices (like being able to pinch-to-zoom or swipe between photos).

For the heavy Custom CSS users, we've also made it easier to make changes to specific portions of the Lightbox experience by providing more specific CSS classes you can use to make changes.

We'll continue to make further improvements over the next couple of months and keep everyone in the loop as this new Lightbox becomes available in other parts of the site.

What does this mean for you?
If you have existing customizations using Custom CSS that you wrote yourself or copied from a guide, these will no longer work once this new Lightbox has been rolled out to all users. To make this an easier transition our engineers have taken the time to replicate the most common customizations translated to this new Lightbox. We'll post that CSS in the near future.

When will I / my visitors see this new Lightbox?
We will make specific announcements when the change will be imminent. But expect to hear in the coming weeks or months for updates. We are rolling this out slowly to different parts of the site, starting with those that can't be customized or altered via CSS. As soon as we've completed the engineering on all parts of the site we will flip the switch and give everyone access to it, everywhere.

leftquark

@jerryr, @denisegoldberg, @Allen, and @Hikin' Mike: I wanted to make sure you saw this post.

denisegoldberg

Thanks @leftquark.

One thing that jumped out at me is the background color in lightbox from Organizer. I'm assuming the background is black because I'm entering it from Lightbox. The background of Lightbox on my site is white (matching the site background), can't remember if that was a customization, a setting, or the normal default.

Jtring

OK, I took a look at the new lightbox and the new CSS. Looks like I'll be able to get rid of some of my customizations. You've made them standard. Nice. But there's a bug or two involving scroll bars ...

In the organizer lightbox view, try selecting a display copy size larger than the monitor so that the horizontal scroll bar is needed. For example, select an X5 on a 1920 x 1200 monitor with a usual 4x3 image. The horizontal scroll bar is there but is covered by the caption. It is inaccessible. Looks like you need to relocate the caption up a little (as the old lightbox does) so it doesn't cover the horizontal scroll bar. I'm seeing this on both Firefox 61 and Chrome 67 under Win 7. By the way, you get extra points if you move the caption differently for the two browsers since they use different width scroll bars.

Just in Firefox 61 there's also a problem with the vertical scroll bar in this scenario. With Firefox's wider scroll bars, there's partial overlap between the vertical scroll bar and the left arrow (>) and close (X) buttons. Everything is accessible enough and works. It just looks bad because of the overlap. With Chrome's smaller scroll bars, no problem. It would be nice to move the right-side controls over a bit when the scroll bar appears.

leftquark

@denisegoldberg said:
One thing that jumped out at me is the background color in lightbox from Organizer. I'm assuming the background is black because I'm entering it from Lightbox. The background of Lightbox on my site is white (matching the site background), can't remember if that was a customization, a setting, or the normal default.

The (white) background in the Lightbox probably comes from your sites Theme. If not there, then it would be custom CSS.

We started with the Organizer Lightbox because it has never incorporated customizations and was always the dark grey background color. Starting small let’s us suss out any of the things that got missed while we QA’d it ... and since the Lightbox is such an integral part of SmugMug and has so many various edge cases and features we wanted to start small and build up.

@Jtring said:
there's a bug or two involving scroll bars ...

We’ll take a look at this

Jtring

One more. If I select an X3 on my 1920 x 1200 monitor in full-screen mode (F11) I get a vertical scroll bar in both Firefox and Chrome. Under Firefox I get a pixel or two of vertical scrolling. Under Chrome I get the bar but nothing to scroll. The X3 is 1200px high as is the screen, so I'd expect no scroll bar and no scrolling. Win 7.

Hikin' Mike

@denisegoldberg said:
Thanks @leftquark.

One thing that jumped out at me is the background color in lightbox from Organizer. I'm assuming the background is black because I'm entering it from Lightbox. The background of Lightbox on my site is white (matching the site background), can't remember if that was a customization, a setting, or the normal default.

My theme is white, but I'm using CSS to have a black background in the lightbox.

So @leftquark Once they change the lightbox, those of use that have custom Lightboxes (background, title and caption colors) need to be changed?

Lille Ulven

Thanks for the heads up, @leftquark

Allen

I see no timing thing to hide the overlay?
That large gray background bar with caption covers large portion (23%) of photo and does not collapse?
Unless I switch to another browser window I see it collapse in background.
Moving my mouse over small portion of exposed back window LB caption pops back up.

BTW, keeping the caption up while clicking arrow between photos I have to wait for caption to collapse on EVERY photo. Ridiculous!
Using keyboard arrow the caption remains collapsed between photos.
I can not find anyway to manually collapse the caption.

All this is very erratic, can not find anything consistent.

Edit: all using latest Firefox

Jtring

It looks like any mouse movement unfolds the caption. Mouse position over the arrows, full-screen button, close button, or caption keeps it up indefinitely. Only if you move the mouse off one of these and let it sit over the black frame or the image will it retract after 3 seconds. Interestingly, for videos, it retracts quite quickly and stays retracted when the mouse over the image, which makes sense because that's needed to use the video control bar. (Indeed, caption behavior with videos is better now than it was before since before captions came up "under" the video control bar.) I'm seeing the same behavior in Firefox and Chrome.

I'm with Allen though. The older arrangement of bringing up caption only when the mouse is down at the bottom of the screen was much more reasonable. I love captions, but not covering the image as the initial and essentially default behavior.

leftquark

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.

Jtring

As @Allen suggested, perhaps the most distracting things here are having captions remain indefinitely (not just the 3 seconds) when the mouse is over the right (>) or left (<) buttons, and (as @leftquark also noted) having the captions remain up as you use those buttons to click through the images. But I understand the points that it may not be obvious that one can even bring up captions in the current new lightbox if it were done wrong and that it's really good to have a way for the caption to go away completely. Perhaps a balance might be to limit the caption roll-out to when the mouse is moving over the image but not over the outside frame, and have the caption only stay indefinitely when the mouse is hovering over the caption area, not when hovering over the >, <, X, and full-screen controls. That still leaves caption coming up when clicking through images if it turns out the right or left arrows are on top of the image (as would occur with larger display sizes), but least under this suggestion it would go away in 3 seconds (and custom CSS presumably could change that time).

Edit -- I fixed some misleading/wrong wording. See the strikeout. The italics are better. And having looked at the CSS, I'm less sure custom CSS could change the delay time.

Jtring

There's no sizes button for videos.

jerryr

Hi - thanks for the information - I will take a look at a few sites to see if there is any modifications needed. I did some testing I am certain all will go well.
thanks - jerryr

erik64

I haven’t even looked at it yet, but is there going to be an option to add a border around the image with the caption centered underneath?

JSS44

I've taken a look at the new lightbox, in the organizer, and would prefer my current lightbox setup to prevail. In the new one, it appears that if the caption is showing it overlaps the photo. I strongly prefer to be able to have the caption remain showing at all times (since this is where I display prices), but not have it cover the photo. I don't remember how I got there, but that's how my lightbox currently works and would very much like to keep it that way.

camner

I think the new Lightbox is a fantastic improvement over the old one. Finally, it is not possible to miss the existence of a caption, and enough of the caption shows by default. Thank you!

leftquark

@JSS44 said:
I've taken a look at the new lightbox, in the organizer, and would prefer my current lightbox setup to prevail. In the new one, it appears that if the caption is showing it overlaps the photo. I strongly prefer to be able to have the caption remain showing at all times (since this is where I display prices), but not have it cover the photo. I don't remember how I got there, but that's how my lightbox currently works and would very much like to keep it that way.

The new Lightbox is going to make its way to all of SmugMug over the next few weeks but we’re rolling it out slowly so you can get it setup as you’d like prior to it being everywhere. We will provide some updated code that will prevent the caption and other tools from hiding, so you should be able to get the new Lightbox to function the same.

One of the main reasons for doing this is so that we can innovate and add functionality to do some of the things that you mentioned (like be able to display your prices). We envision a future in which you can have multiple Lightbox styles, just like you can have multiple Gallery styles, and this update is a step towards making that a reality.

leftquark

Just as a heads up, we'll be removing the "Sizes" button in the near future. Lightbox will always display the largest possible size for the window.

erik64

Why? Can’t you just make that the default behavior and leave the button alone?

leftquark

@erik64 said:
Why? Can’t you just make that the default behavior and leave the button alone?

It already does that by default but we've received a lot feedback from site owners and most especially, from your visitors, with confusion over what the button does. In many cases, Owners are using that button to do things that would be better found elsewhere (like for sharing a photo, which should be found in the Share menu). But the biggest reason is simply that nobody is using it and in order to help us innovate quicker in the future we have to remove features that nobody uses anymore.

Ferguson

I'm also a bit surprised, I know I periodically want to view "original" if the user permitted that, and scroll if needed. If there another simple path to get the original other than the sizes button? (for non-owners)

erik64

Nobody knows what to do with the share button either. The sizes button is useful for all sorts of things, why remove it? If you want to make the sizes button an option, fine, but don’t remove it entirely. Before you go screwing up one of the few things that doesn’t stink about the Lightbox, try coming up with a caption option that doesn’t involve a box covering up the image. A simple border around the image with the caption below along with the buttons would make everything so much simpler. It looks like you’re just going with a variation on an already crappy theme.

Jtring

@leftquark said:
Just as a heads up, we'll be removing the "Sizes" button in the near future. Lightbox will always display the largest possible size for the window.

I REALLY don't like that.

In a Dgrin post last year, I noted the sharpness of the display copies may differ from the full screen size version, depending on the algorithm used by the browser for the degree of expansion involved. See also this 2015 Dgrin post; it's not just me. Perhaps the worst example I know of today is in Firefox, which under Win 7, reserves two lines of pixels or so for the roll-up task bar. So on my 1920 x 1200 monitor, Firefox shrinks an X3 by a very small amount. You'd think that would make no difference, but I think here Firefox dispenses with all the niceties and just uses a bi-linear algorithm to do the size reduction -- no bi-cubic and certainly no Lanczos -- which definitely does damage. (Chrome, at the moment, doesn't do this.) In most other cases, including some in Chrome, the sharpness loss is less extreme, but a close look will still reveal a difference between full screen and a display copy. And, of course, sometimes it's not noticeable. The bad cases change as the browsers diddle their scaling algorithms to trade speed and quality. In any case, by pulling the sizes button, you've relinquished control of image quality to the algorithms in the browser ... which you have no control over. That's can't be a good idea.

There are times when it is desirable to zoom in: either to show an original, as Ferguson noted, or just a display copy bigger than the screen. Indeed, I've got captions in a few places where I encourage the viewer to do just that to pick out a detail or two.

It's also nice to show an extra wide but vertically short panorama at a display size that brings up a horizontal scroll bar but doesn't fill the page vertically.

For videos, this definitely does not work. If I post a FHD video and a user doesn't have the bandwidth to support it, the right answer is to shrink the window, not to show, say, a 360p resolution copy in a 1920 x 1080 window ... and not to try to pump out the 1080p copy with an interminable number of stops and starts. The news here is extra disappointing since the sizes button was a little bit unreliable before the last video player upgrade (mainly when making more than one size change while the video was running) and with the last player upgrade, you finally have a bullet-proof selector.

PLEASE PLEASE PLEASE rethink this. At the very least, allow some video resizing and insert a gallery option to always default to a display copy for still photos.

Allen

I photograph a lot of family albums and photograph each page. In lightbox you can be zoom up and scroll around to see all the small photos on the page. This saves huge time by page and not doing each photo. Plus this preserves all the comments written between photos. Loosing the size option would be a disaster. Zooming up in lightbox gives a great view of every photo.
Example:

Allen

BTW, it would be nice if a larger then window size is displayed that we could grab the screen with the mouse and scroll around.

Shinrya

Just to chime in, personally I would be happy to see the "sizes" button removed from the lightbox. I think it's a valid point that many visitors simply won't know what the icon does and it's just one more element of clutter in the lightbox. That being said, if many other SM users are seeing a use for it, then why not make it optional like with the "share" button?

leftquark

These are all great desires and uses for how you or your visitors will view your photos. It's very easy to focus on a feature instead of focusing on the desired outcome and that's something we've been really honing in on as part of our design process. We don't want to build a feature, we want to build an interface to get you to the thing you want to do and accomplish.

Many of the use cases of "Sizes" listed in this thread are examples of why the Sizes button shouldn't be there. It's a workaround because you couldn't do the thing you really wanted to do. It's not the ideal solution to accomplish your task. For example, Sizes is a really bad way to "Zoom" in on a photo (clicking on the button, waiting for a new photo to load, having to figure out how to scroll around, etc is not great). A specific "Zoom" feature would be a much better way, built specifically to make it easy to figure out how much and where to zoom on the photo.

As passionate photographers ourselves, you know we don't just cut features without fully thinking it through. Heck, I got my job here by pushing the boundaries on what SmugMug can do. When only 1 or 2 people are using a feature, it tells us that feature isn't very good. Our customers and your visitors are telling us that Sizes isn't useful to them. It's time to retire it so we can focus on adding features that you do want to use (like potentially a "zoom" feature).

@Shinrya said:
That being said, if many other SM users are seeing a use for it, then why not make it optional like with the "share" button?

If many SM users were using it, we would definitely keep it around as it was, or find ways to improve it. Unfortunately SM users and their visitors were telling us the opposite.

Shinrya

I like the idea of a zoom feature. I was thinking a while back about a way to have images displayed at a reasonable size like X2 (i.e. to minimise image theft) but to also have a kind of magnify option so people can zoom in and see fine details on the full size image. A bit like how the magnifier works on the Mac OS Preview app with a photo. If you could pull off something similar to that, I think that would be awesome! Anyway...just a thought to add to what I imagine is a VERY long list of feature requests from your users

Jtring

@leftquark said:

... Many of the use cases of "Sizes" listed in this thread are examples of why the Sizes button shouldn't be there. It's a workaround because you couldn't do the thing you really wanted to do. It's not the ideal solution to accomplish your task. For example, Sizes is a really bad way to "Zoom" in on a photo (clicking on the button, waiting for a new photo to load, having to figure out how to scroll around, etc is not great). A specific "Zoom" feature would be a much better way, built specifically to make it easy to figure out how much and where to zoom on the photo .... It's time to retire it [sizes] so we can focus on adding features that you do want to use (like potentially a "zoom" feature).

I fully agree using the sizes is a workaround for not having a zoom function (and for viewing panoramas for that matter). Provide a zoom and an in-lightbox panaroma viewer and I'd be delighted. But the order seems wrong to make the argument you did. If the functionality has value, as you suggest it does, don't remove a workaround that provides some of that value until you have have the improved functionality at hand.

I get it that you want to pull the sizes functionality because it's little used, you want to ease your help desk load, and you can limit the pesky ancillary development things like getting the scrollbars and other positioning things right for all the possible browser and display combinations. I'd note you could avoid the support problem pretty well by making the sizes button optional with the default to have it off. No escaping the last though, so I suspect this is more a development issue. You're a small company and you can do what you can do. That's your call. I'm just disappointed since, especially because for the sharpness issue, I make a significant use of it.

Ferguson

@leftquark said:
Many of the use cases of "Sizes" listed in this thread are examples of why the Sizes button shouldn't be there. It's a workaround because you couldn't do the thing you really wanted to do. It's not the ideal solution to accomplish your task. For example, Sizes is a really bad way to "Zoom" in on a photo (clicking on the button, waiting for a new photo to load, having to figure out how to scroll around, etc is not great). A specific "Zoom" feature would be a much better way, built specifically to make it easy to figure out how much and where to zoom on the photo.

Bear in mind from whence some of us come... we've watched features removed, being promised "so we can build it better", but no "better" is ever forthcoming.

As a simple example, I'm still waiting for the smugmug android app to get the automation features back you removed in the name of code consistency with apple. Meanwhile you've shoveled in lots of other junk, now promoting it as a photo backup tool (yet it isn't in so many ways), but I still can't automatically sync, I have to manually do it.

I know you mean well, but the track record of smugmug back-filling functionality later after you remove it is not reassuring.

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.