I’m probably missing something obvious, but is it possible to have on-image navigation, but still allow the visitor to right-click-save the image in Firefox? I’m using a very simple, absolutely positioned overlay to handle the previous/next duties, but that makes it impossible to right-click and save the image in Firefox. Firefox offers to save the link, but not the image itself. In Chrome and Edge, it’s not a problem.
Your previous and next elements are completely covering the image so the context menu only applies to the anchor and not the image. Some browser will see there is an image underneath but in reality you have empty anchors so the save as image should not really appear but this is all at the whim of the browser maker I believe.
The simplest option is not to have the previous and next navigation covering the whole image and just have arrows to navigate and then only the arrow obscures the context menu of the image.
I did think that you may be able to trigger the context menu on the image dynamically but due to my limited JS knowledge was only able to do this with partial success. A lot of resources were saying however that this was impossible.
I did come up with a solution and that was to create an image and place it inside each of the next and right arrows using the image source of the displayed image. This seems to work in Firefox and Chrome to produce a full context menu. The images are added on load and then when you click the left and right button as I assume you have some scripts to change the img source each time.
It may need adjusting to suit your existing js but as a proof of concept it seems to work.
I will however move the thread to the js forum as there may well be a neater way of doing this as my JS is pretty basic.
Thanks for taking a run at it. I’ve also had the sense that a JS solution would probably be needed. In some of my pages I use a third-party “lightbox” script (i.e., one that uses a modal window to display the large image when a thumbnail is clicked), and that seems to be able to preserve on-image navigation without having Firefox fail to “see through” the navigation to the underlying image. But, like you, my JS skills are fairly basic.
It’s a small, fringe-y issue, given Chrome’s dominance. And in the software I produce, the user has the option of planting a download icon on the page, e.g., next to the image caption. That’s always accessible, no matter what browser the visitor is using.
ETA: I just pulled out my little Macbook Air, and Safari behaves like Firefox. I would not have predicted that!
In the original lightbox they detect a right click and set pointer-events to none briefly to allow the context menu of the image to show. Its mentioned here on this lightbox issues thread.
Show context menu for image on right-click
There is a div containing the navigation that spans the entire image and lives above of it. If
you right-click, you are right clicking this div and not the image. This prevents users from
saving the image or using other context menu actions with the image.
To fix this, when we detect the right mouse button is pressed down, but not yet clicked, we
set pointer-events to none on the nav div. This is so that the upcoming right-click event on
the next mouseup will bubble down to the image. Once the right-click/contextmenu event occurs
we set the pointer events back to auto for the nav div so it can capture hover and left-click
events as usual.
I think the code in the screenshot below is part of that routine:
Maybe one of the JS gurus around here could have a go at implementing something like that (although I think my appended image method is much simpler).
And before anyone else wades into it, be aware that my example is very stripped-down. In the real world, this is part of a fully-responsive page, so there’s a bunch of other stuff going on at the same time. Lots of jQuery shenanigans happening there!
