# Disable right click on image lightbox

**URL:** https://meta.discourse.org/t/disable-right-click-on-image-lightbox/95771
**Category:** Development
**Created:** [August 27, 2018, 7:31pm UTC](https://meta.discourse.org/t/disable-right-click-on-image-lightbox/95771 "2018-08-27T19:31:47Z")
**Posts on this page:** 12
**Page:** 1

<div class="post-metadata">

### Author: ![davidkingham](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/davidkingham/32/119528_2.png) [@davidkingham](https://meta.discourse.org/u/davidkingham)
#### Post date: [August 27, 2018, 7:31pm UTC](https://meta.discourse.org/t/disable-right-click-on-image-lightbox/95771/1 "2018-08-27T19:31:47Z")

</div>

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?

---

<div class="post-metadata">

### Author: ![Mittineague](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mittineague/32/114259_2.png) [@Mittineague](https://meta.discourse.org/u/Mittineague)
#### Post date: [August 27, 2018, 8:12pm UTC](https://meta.discourse.org/t/disable-right-click-on-image-lightbox/95771/2 "2018-08-27T20:12:03Z")

</div>

> [@davidkingham](#):
>
> demanding that right click be disabled for images

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)

---

<div class="post-metadata">

### Author: ![davidkingham](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/davidkingham/32/119528_2.png) [@davidkingham](https://meta.discourse.org/u/davidkingham)
#### Post date: [August 27, 2018, 8:26pm UTC](https://meta.discourse.org/t/disable-right-click-on-image-lightbox/95771/3 "2018-08-27T20:26:10Z")

</div>

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>

```

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [August 27, 2018, 8:27pm UTC](https://meta.discourse.org/t/disable-right-click-on-image-lightbox/95771/4 "2018-08-27T20:27:41Z")

</div>

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:

```CSS
.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

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

```

And you’d add this to your CSS

```CSS
[data-theme-image="block"] img {
    pointer-events: none;
}

```

---

<div class="post-metadata">

### Author: ![davidkingham](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/davidkingham/32/119528_2.png) [@davidkingham](https://meta.discourse.org/u/davidkingham)
#### Post date: [August 27, 2018, 8:59pm UTC](https://meta.discourse.org/t/disable-right-click-on-image-lightbox/95771/5 "2018-08-27T20:59:40Z")

</div>

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?

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

```

---

<div class="post-metadata">

### Author: ![davidkingham](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/davidkingham/32/119528_2.png) [@davidkingham](https://meta.discourse.org/u/davidkingham)
#### Post date: [August 28, 2018, 1:35pm UTC](https://meta.discourse.org/t/disable-right-click-on-image-lightbox/95771/6 "2018-08-28T13:35:44Z")

</div>

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;
  });
});

```

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [September 5, 2018, 12:59am UTC](https://meta.discourse.org/t/disable-right-click-on-image-lightbox/95771/7 "2018-09-05T00:59:16Z")

</div>

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

Does this work for you when added to /head?

```JS
<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>

```

---

<div class="post-metadata">

### Author: ![davidkingham](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/davidkingham/32/119528_2.png) [@davidkingham](https://meta.discourse.org/u/davidkingham)
#### Post date: [September 5, 2018, 1:08am UTC](https://meta.discourse.org/t/disable-right-click-on-image-lightbox/95771/8 "2018-09-05T01:08:18Z")

</div>

> [@awesomerobot](#):
>
> Does this work for you when added to /head?

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

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [September 5, 2018, 1:14am UTC](https://meta.discourse.org/t/disable-right-click-on-image-lightbox/95771/9 "2018-09-05T01:14:39Z")

</div>

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

---

<div class="post-metadata">

### Author: ![davidkingham](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/davidkingham/32/119528_2.png) [@davidkingham](https://meta.discourse.org/u/davidkingham)
#### Post date: [September 5, 2018, 1:39am UTC](https://meta.discourse.org/t/disable-right-click-on-image-lightbox/95771/10 "2018-09-05T01:39:38Z")

</div>

> [@awesomerobot](#):
>
> \<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\>

You’re my hero, thank you Kris!

---

<div class="post-metadata">

### Author: ![system](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/system/32/443519_2.png) [@system](https://meta.discourse.org/u/system)
#### Post date: [October 5, 2018, 1:51am UTC](https://meta.discourse.org/t/disable-right-click-on-image-lightbox/95771/11 "2018-10-05T01:51:11Z")

</div>

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

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [January 23, 2024, 4:15pm UTC](https://meta.discourse.org/t/disable-right-click-on-image-lightbox/95771/12 "2024-01-23T16:15:43Z")

</div>