Can't Touch This
posted Sep 02, 2020 8:59pm
Every so often I get asked to protect photos from being copied from someone's site.
If you already use the popular jQuery script library, there is a plugin here by Jaspreet Chahal that will get most of the job done for you. I did notice that it seems to have issues within a slideshow gallery so I found some additional code to handle that.
The original code was found here. I did need to modify it slightly to work with the current version of jQuery and protect the whole slideshow. Here's my final code:
// Here we are getting all images and turning off the context menu.
// return false is the same as calling .preventDefault() and .stopPropagation()
$('img, #slideshow').on("contextmenu",function(e){
return false;
});
// Here we disable default behaviors for mousedown which include the drag options.
$('img, #slideshow').on("mousedown",function(e){
return false;
});
There are two main things to note. The first is that the original script uses the .bind event which jQuery now (1.7 or later) recommends using .on instead. Secondly, you'll see along with referencing the 'img' tag so that all photos are included, I've added the CSS ID of the my slideshow's containing element ('#slideshow'). This protects the whole slideshow instead of trying to recognise each photo as it appears, and instead applies to the slideshow as a whole.
You can omit the plugin and just use the script above, but using them together will additionally protect your text, if that is a consideration.