Inconsistent image lightbox behavior with multiple images

Contribute UX

AI-generated summary

The discussion revolves around the inconsistent behavior of the lightbox feature in Discourse when dealing with multiple images. davidkingham points out that clicking an image in a lightbox with multiple images navigates to the next image instead of displaying it in full resolution.

davidkingham and others agree that the behavior should be consistent, allowing users to click the image to view it in full resolution, while using the right arrow to navigate to the next image. However, pfaffman notes that having a slideshow of all images is often more desirable.

sam suggests removing the “giganti-image” feature, which allows users to view an image in full resolution by clicking it, citing confusion and inconsistency. However, Steven, jomaxro, and bartv argue that this feature is useful, especially for specific use cases such as viewing detailed images or comics.

codinghorror proposes adding an explicit “full size” link for images in the footer, allowing users to view the image in full resolution without relying on the secret click-to-expand feature. This idea is well-received by the community, and Johani confirms that it will be implemented in version 2.2.

The discussion also touches on the idea of adding a play slideshow button to the lightbox, allowing users to choose when to automatically change the image, and the implementation of a “zoom” button with its own class for easier customization.

The feature has since been implemented, with nbianca merging the relevant PR.

1

When you have one image in a post you click the image once to lightbox it, then you click it again to see it full resolution. But, when you have multiple images in the same post you click one of the images to lightbox, then when you click it again it goes to the next image rather than going to the full resolution zoomed in mode.

I feel the behavior should be the same as a single image so when you click the image in a lightbox it goes to full resolution, and if you want to go to the next image you click the right arrow rather than the image.

Some large images for an example:

DSCF1680
DSCF16801500×842 175 KB

DSCF7274
DSCF72741500×1000 176 KB

4 Likes
2

I think that most people feel that having a slideshow of all of the images is much more desirable.

1 Like
3

I still think there should be a slideshow, but clicking the image should be consistent of making the image larger rather than going to the next image.

4

I am not sure we even need to keep this “giganti-image” click to see super enormous image that requires scrolling thing. It is confusing. I agree it is inconsistent to get “giganti-image” for single images and “see next” for multi images.

Personally I think we should imply nuke “giganti-image” and have click do nothing I guess unless you have multiple images.

@Johani / @zogstrip what are your thoughts here.

:arrow_down: giganti-image demo (make browser small, click then click):

DSCF1680
DSCF16801500×842 175 KB

4 Likes
5

I have two examples where the zoom is welcome:

  • news article, we use this quite a lot on a sports forum
  • I have a client that scans a lot of old comics

We could download the image and zoom so if it is nuked I’ll be ok with this, but I think it’s still a good feature, especially on mobile.

Maybe make the slideshow the priority for more consistency but add a :mag_right: button if we want to zoom

6

I don’t think that’s necessary, it might be better to have an explicit “full size” link for the image in the footer (alongside “download”, which is a similar option), rather than this secret click to expand, which ceases to work in slideshow mode.

And for the record, @davidkingham, “download” is 95% the same thing as what you want, so you already have a workaround in slideshow mode. Try it.

3 Likes
7

Another example where zoom is important is extremely tall images. I like the idea of a dedicated “zoom” button, download it fine, but sometimes it’s nice to just stay in the browser and not need another app to open.

8

Yeah, an extra link next to “download” seems like this simplest solution here.

7 Likes
9

I agree, having the same action do two different things is confusing. I :heart: the full size link idea :+1:

@Johani can you take it?

5 Likes
10

+1 for keeping this mode; it’s relevant in our 3D graphics community where people often upload 4k+ images. The extra link sounds like a great solution.

1 Like
12

We use this regularly to evaluate the details of larger images when critiquing them, I would hate to lose this feature.

I know this is very similar, but we have public sections of our site that have the download button turned off and private paid areas with it turned on. I know it’s a very specific use case and the reasons are ridiculous but it’s working well for us to give people a false sense of security.

I like the idea of having a zoom button, my only request is that it has its own class in the mfp-bottom-bar so I can hide everything except the zoom button, I don’t want the title/size/download visible. Along the same lines, it would be great if all of them had their own class, right now I am changing the text to be transparent to hide the title and size.

4 Likes
13

PR welcome to add these classes :wink:

1 Like
14

@johani do you think this will be a 2.2 thing or a 2.3 thing? Let me know the difficulty and risk.

2 Likes
15

This can go in 2.2. It’s very low risk (though it does add a couple of new translation strings)

I have something working and will check it in early next week.

5 Likes
16

Any chance this could be looked at again Joe? Thank you :slight_smile:

17

I’m curious, what IS the breakpoint for uploaded image dimension to trigger the Lightbox feature?

3 Likes
18

Look in your site settings under max image width and max image height.

3 Likes
19

Ah, thanks. I was searching for “lightbox” earlier when chatting about this with @cobyalmond and didn’t find it.

3 Likes
20

I had already comented on this, in a request for improvements to the lightbox.

I agree, current behaviour is confusing, when you click in the center of an image it should be magnified as when there is just one image, when you click to the right or the left it should change the image showed.

Blockquote

1 Like
21

Having slideshows will be a great improvement, if it is optional.

You not allways want to automatically change the image.
Many times you want to show it one by one and get the time to see them and compare them.

Having a play slideshow button in the lightbox would be great.

Blockquote

1 Like