You can find a quick one-liner on how to disable the browser context menu anywhere, but I just wanted to make sure you know about the options.

Disabling the context menu entirely can be a nuisance for many users, as they may depend on it to create a bookmark, navigate back/forward or refresh the page.

If you primary purpose is protecting images from a quick "Save As", the jQuery example below demonstrates how to disable the context menu on images only.

$('img').bind("contextmenu",function(e){ return false; });

If you wish to "protect" the entire page, you might consider use a jQuery context menu, which does not include Image saving capabilities:

http://plugins.jquery.com/project/jqueryContextMenu

http://www.trendskitchens.co.nz/jquery/contextmenu/

 

Of course, you're never really protected using this method – the user can always disable JavaScript, or print the page.  The best level of protection is probably a watermark.

Tags:

2 Comments

  1. I neglected any dynamically loaded images in the method above. If you have images being loaded via lightbox or other dynamic method, they won't be subject to the method above, as they will be loaded after the jQuery has been executed.

    You'll need to recall this method after any dynamically loaded images are displayed.

    One way to do this is to use your lightbox plugin's onComplete method. Using Colorbox as an example:

    $('a').colorbox({onComplete: function() { $('img').bind('contextmenu',function(e){ return false; }); } });

Leave a Reply

Your email address will not be published. Required fields are marked *