Disable right click on image lightbox

dev
1

I know it’s easy to get around, but I’m working with a group of professional photographers that don’t want their images to be easily downloaded and they are demanding that right click be disabled for images. Any ideas of how to achieve this?

1 Like
2

A common non-tech-savvy approach. You could use JavaScript to disable right-click. But IMHO you would do better to explain to them why doing so would be futile.

i.e. there are two ways to protect content

  • don’t put it online (always works without fail)
  • take legal action (too often cost prohibitive for most)
3

I completely understand that, but if there is a way to do it just to please them it would be much easier.

I have found this script to disable right click globally, but it would be so much nicer to have it only on the lightbox or just images

<script type="text/javascript">
function click (e) {
  if (!e)
    e = window.event;
  if ((e.type && e.type == "contextmenu") || (e.button && e.button == 2) || (e.which && e.which == 3)) {
    if (window.opera)
      window.alert("");
    return false;
  }
}
if (document.layers)
  document.captureEvents(Event.MOUSEDOWN);
document.onmousedown = click;
document.oncontextmenu = click;
</script>
1 Like
4

You could do it with some CSS, but I generally don’t think it’s going to save anyone much angst. If I want to steal your image without paying for it I either

  1. Know how to circumvent a block
  2. Have zero value to you regardless

If you must:

.cooked img {
    pointer-events: none;
}

.image-source-link {
  display: none;
}

This will prevent right clicks on images in posts. You can still right click, but it passes through the element to the background (so no image options). Lightboxes and other things (voting, for example) still work. .image-source-link is the download option in lighboxes.

I think you could also make it so users have to use a class when they upload images, and have the style above only apply when that class is added. For example, they could use a data-theme attribute to post

<div data-theme-image="block">
 <img src=""/>
</div>

And you’d add this to your CSS

[data-theme-image="block"] img {
    pointer-events: none;
}
4 Likes
5

Thanks Kris, turning off the pointer events is not ideal since I still want the pointers, just no right click.

I found this script which works brilliantly on the smaller image in the post, but not the lightbox. Any ideas on how to modify this to make it work in the lightbox as well?

<script type="text/javascript">
    $(document).ready(function(){
      $("img").bind("contextmenu",function(e){
        return false;
      });
    });
  </script>
6

It seems as though this should work to target the lightboxed image, but it does not. Any ideas why?

$(document).ready(function(){
  $(".mfp-img").bind("contextmenu",function(e){
    return false;
  });
});
7

Sorry, lost track of this and just noticed your marketplace post

Does this work for you when added to /head?

<script type="text/discourse-plugin" version="0.8">

const TopicRoute = require("discourse/routes/topic").default;

TopicRoute.reopen({
	activate: function() {
		this._super();
		Em.run.next(function() {
		    $('body').on('contextmenu', '.cooked img, .mfp-img', function(e){ return false; });
		});
	}
});
</script>
10 Likes
8

Thanks Kris, it works on the thumbnail, but not the lightboxed image

1 Like
9

Ah right, I forgot a class for the lightbox too — I updated the code above.

1 Like
10

You’re my hero, thank you Kris!

3 Likes
11

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.