Disable image download for mobile versions

Hi

There is a script that prevents the image download. That is, the right click is not possible. I found this in the Help Center and added it, it works fine. This only works for desktop versions. Unfortunately, however, you can still save the images with the iPhone. Do you guys have an idea or script on how to stop this as well?

I am a bit surprised that this is not a standard feature on Squarespace. Other CMS's have this by default in a plugin.

I know there is no complete protection and many options like compressed file, watermark, copyright and more. But I would like additionally that the download is not possible.

Thanks a lot for help and inputs.

@Ren7 You can add the following JS to the page. This should prevent right clicking on desktop and mobile. If don't want to target all images on the page, update the img string value in the document.querySelectorAll() method to a CSS selector with a higher specificity. 

(function(){
  // Loop through all images on the page adding necessary styles and 
  // event listener to prevent images from opening the context menu.
  document.querySelectorAll('img').forEach(img => {
    img.style.webkitUserSelect = 'none';
    img.style.webkitTouchCallout = 'none';
    img.addEventListener('contextmenu', evt => {
      evt.preventDefault();
      return false;
    });
  });
})()

Make sure you add the JS code between <script> tags e.g.

<script>
  // Add JS code here
</script>

Hi 

First of all a big thank you. I have put the code in the header. Unfortunately it doesn't work and I get on the website the message below displayed. Sorry to bother you again, maybe you have an idea? kind regards

(function(){ // Loop through all images on the page adding necessary styles and // event listener to prevent images from opening the context menu. document.querySelectorAll('img').forEach(img => { img.style.webkitUserSelect = 'none'; img.style.webkitTouchCallout = 'none'; img.addEventListener('contextmenu', evt => { evt.preventDefault(); return false; }); }); })()

Sorry now I understand, forgot to put the whole code to add between script. All worked. A big thank you!

@Ren7 @jpeter I still can't get this to work, I have never used JavaScript so I am completely clueless when looking at the code. I have copy and pasted the message about and made sure the put the script tags either side but it isn't working. Any ideas why, do I need to change anything on it or should it just be a case of copy and pasting. I will paste what I have done below. Thanks

<script>
  (function(){
  // Loop through all images on the page adding necessary styles and 
  // event listener to prevent images from opening the context menu.
  document.querySelectorAll('img').forEach(img => {
    img.style.webkitUserSelect = 'none';
    img.style.webkitTouchCallout = 'none';
    img.addEventListener('contextmenu', evt => {
      evt.preventDefault();
      return false;
    });
  });
})()
</script>

still doesnt work, ppl can can still right click on images