How to disable right-clicking and dragging of images

You can both disable right-clicking and dragging of images on your client facing pages. Right-clicking can be configured with a Back office setting. Dragging can be disabled by adding script – both are explained below.

Disabling right-clicks

If you want to prevent the right-click function on your website images (or click-and-hold on a Mac), go to Site configuration in Back office. Then click on General settings in the side bar. Open the section General settings. At the top of this section you can choose any of the following options in the dropdown box:

• A) Don’t disable right-click on images
• B) Disable right-click on images except comps
• C) Disable right-click on images except comps and previews

Disabling right-click on all images will also disable right-clicking on comping images. Option B however allows your users to save comping images from the browser context-menu that appears when you right-click (or click-and-hold on a Mac).

To completely disable right-clicking on all website images, you can add script to the client object in the code editor. There are many ways to achieve this, here’s an example:

$("body").on("contextmenu",function(e){
     return false;
});

Disabling dragging of images

To prevent images to be dragged from your website, you can add script. There are many solutions that you can find it you Google it. Below is a simple example:

$("img").mousedown(function(e){
     e.preventDefault()
});

Note that this disables dragging of all images. You can also add script that will only affect certain pages or certain types of images. For example, the thumbnail images on the search results page are inside a HTML div with the id searchresults. To disable dragging of only images in that div, you can use:

$("#searchresults img").mousedown(function(e){
     e.preventDefault()
});

The paragraph below explains where to add this script.

Where to add the script

Recommended reading: Using the Code editor, Using Javascript in your pages.

In the code editor, load the file Client script. If the template is still empty then click on Load example and load the default skeleton.

The client object will look something like the code below (note that it may more functions than just the init() function). The script to disable dragging and right-clicking is added inside the init() function.

var client = {
     init: function() {
          var o=this;

          // this will disable dragging of all images
          $("img").mousedown(function(e){
               e.preventDefault()
          });

          // this will disable right-click on all images
          $("body").on("contextmenu",function(e){
               return false;
          });
    }
};