Make it easier to close large images


(Iszi) #1

When very large images are expanded, the only way to close them is to find the relatively tiny “close” text in the bottom-right hand corner. For images like the ones in this How-To Geek topic, that can mean a lot of scrolling and you have to know that what you’re looking for is in the bottom-right (instead of the more conventional top-right).

Would it be possible to add an unobtrusive close button that follows the viewer, or provide some other easy means of exiting large images?


(Régis Hanol) #2

Pressing the Esc key should close it :wink:


(Iszi) #3

Thanks for the reminder. There will have to be something else for touch screens though.


(Jeff Atwood) #4

The UI here (and by here I mean, for large images that the user clicks on to expand) needs to be a lot better.

Certainly we can draw inspiration from the zillions of different lightbox plugins for image viewing out there?


(Gweebz) #5

To make it even worse, you can’t just scroll to the bottom of the page to find the close link. The image is just an overlay overtop of the topic and, if the topic is very long, scrolling down goes to the bottom of the topic, not the image. So I am always (accidentally) scrolling all the way down or pressing Ctrl + PageDown and then I have to scroll back up until I find the bottom of the image.

BTW… how do I make the “Ctrl” and “PageDown” look like a keyboard key like in @zogstrip’s reply?


(Régis Hanol) #6

You have to surround it with <KBD> and </KBD> :wink:


No styling for &lt;kbd&gt; elements
(Iszi) #7

@codinghorror Is there an update on this? Someone else mentioned it on HTG recently.


(Régis Hanol) #8

I’m working on it. Should be done by soonish :wink:


(Régis Hanol) #9

Just replaced the previous lightbox plugin with the awesome magnific popup. It should also fix most of the issues reported here.


(Iszi) #10

So, a click on the image brings up a fit-to-window version of the image now, and another click dismisses it. That’s great, but now I don’t see a way to view the whole image at full resolution without using in-browser features.


(Jeff Atwood) #11

I think that’s pretty low priority, since how can you even view the image at “Full” resolution when your browser window can’t possibly contain it?

I could easily support a visual overlay on the enlarged image that gives you “download” and “view raw” commands as well as some metadata about the image – size, dimensions, etc.


(Iszi) #12

The same way you used to - by showing it at 100% size, with the browser handling scroll bars for navigation.

I think I like where that’s headed, but it sounds like it will still take the user away from the page/window/tab containing the topic. This nearly defeats the point of having the enlarged image show on that same page.

The new way of viewing images is a great “preview” option. However, for extra-large images, an additional “zoom in” would be preferable over having to download or open the image on a separate page/tab/window/program. The trick is to allow this full-size viewing while maintaining a readily available yet unobtrusive option to close it and return to the thread.

DeviantART handles this reasonably, I think. One click zooms the image into a fit-to-width size, another zooms it to full size, and a third returns to the regular view. All the while, you can use the browser’s scrolling functions to move around and see parts of the image that overflow the screen.

Something similar to this could probably work for Discourse.

  • First click on the image opens it up similarly to how it is now - it fills nearly the whole browser window except for some room for a border that includes an easily-recognized close button.
  • Second click:
  • Clicking on the close button or on the border - anywhere except on the image itself - exits the image view and returns the user to the normal topic display.
  • Clicking on the image itself zooms the image to 100% size if it wasn’t already there. The browser’s built-in scroll functions allow the user to move their view around.
  • Third click returns to the fit-to-window view, from which the user may return to the regular topic view via clicking anywhere except on the image itself.

Additions to the fit-to-window view that show metadata and allow downloading of the image would also be very useful, and I’d like to see them added on top of this. But I also believe handling zoom functionality as suggested above would help to keep the focus on the discussion while still enabling users to easily see images in their full detail.


(Dmitry Semenov) #14

Hi guys,

I’m an author of Magnific Popup script that you’re currently using and accidentally stumbled on your discussion.

The “extra-zoom” behavior that @Iszi suggest can be implemented pretty easily, here is an example on CodePen.

As well as, the “Download” or “View raw” link, as @codinghorror suggests - “View raw” link under image


(Régis Hanol) #15

Thanks for that awesome library :smile:

Seems like your “extra-zoom” example isn’t working. Does it require a specific browser? I tried on latest Chrome and FF (running on Linux).


(Régis Hanol) #16

For the record, thanks to @dimsemenov, I just added a download link in the lightbox :wink:


(Régis Hanol) #17

@Iszi just added the click-to-zoom behavior to the lightbox :wink:


(Régis Hanol) #18

This topic was automatically closed after 1 day. New replies are no longer allowed.