Streaming live at 10am (PST)

Disable Lightbox Right click?


#1

Hi Guys,

Is there any known way to disable “right click” on the lightbox element in webflow?
It’s nice that you can hit next with the left click but right click should do nothing


#3

I am also really keen to know the answer to this as my clients are largely artists and protecting their work from being downloaded / saved is super important.


#4

@Jessica_Gatt while I do not know how to disable right click (although I do have some vague ideas involving this technique), you can prevent images from being right-clickable by not having them as images - but as backgrounds.

I almost never use image divs for this very reason. I just create a regular div and set the background to the relevant image. Mind you, this only prevents amateur “Save As” robberies… Anyone with the slightest bit of web dev knowledge can download the image source from the browser’s developer tools.

I’ve seen some sites go out of their way to avoid even that (using Flash and the like), but it risks breaking the site for a lot of users and, considering how you could simply screenshot the images, it’s not really worth the trouble.

Copyright laws and watermarks are your only real weapons in this, I’m afraid.

I hope this was useful, feel free to shoot me a DM if you need help with specific cases.


#5

Thanks so much @Moscangelo that’s good advice. I’ve layered a transparent div over the top of my images on the page so they are now fine it’s the image that appears in the lightbox that is the problem…


#6

Happy to help!

Shouldn’t that be solved with the background image trick? If not, I can give you specific directions if you share your site’s read-only link; go here if you don’t know how to do that.

At any rate, I would suggest against overlaying transparent divs over important elements, since that prevents Editors from changing the image just as much as it prevents users from downloading it. Background images, however, can be still accessed by Editors while remaining inaccessible to amateur users.


#7

To disable right click on normal and lightbox images, add this code to the footer:

 <script>
 $('img').bind('contextmenu', function(e) {return false;});
 $(document).on('contextmenu', 'img', function() {return false;})
 </script>

(first line disables it on all images, second line disables it on lightbox)


#8

Hey Lewis,

That seemed to do the trick!! Thankyou so much!! :slight_smile:


#9

@lewis You really only need this, does the same as the first

<script>
$(document).on('contextmenu', 'img', function() { return false; });
</script>