Jump to content

Disable right-click of images using only CSS

Go to solution Solved by DustinWilliam,

Recommended Posts

  • Replies 5
  • Created
  • Last Reply

Top Posters In This Topic

On 12/1/2021 at 2:13 PM, DustinWilliam said:

Site URL: http://dustin.land

Hello all! I just wanted to know if it is at all possible to disable right-click / dragging of images usingly only CSS. Sadly I cant code inject as it is in not in my plan.

If anyone knows of a way via css only without code injection, that would be great!

Hi @DustinWilliam,

Your final purpose is not allowing right click on image to save as it, isn't it?

image.thumb.png.719d3edc11b76d4a4fd279e1778e29e0.png

This is the current state when we right click on image.

If it is your point, i can give some code that only allow user to save the whole page, not the individual image

image.thumb.png.80cd43c8738211e37d98edbc1f21f49b.png

This is my idea that user can not save the image

Hope that it makes sense

Edited by bangank36

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 1 month later...

Hi,

I used Dustin's code on my website, it worked really well to prevent people to save your images, but it has an issue on mobile with 7.0 Forte indexes: it disable arrow's clicking on carousel indexes (both right and left arrow). Do anyone have another solution to disable right click ONLY on images whitout creating any issue on mobile?

Thank you.

Link to comment
23 hours ago, g_franchini said:

Hi,

I used Dustin's code on my website, it worked really well to prevent people to save your images, but it has an issue on mobile with 7.0 Forte indexes: it disable arrow's clicking on carousel indexes (both right and left arrow). Do anyone have another solution to disable right click ONLY on images whitout creating any issue on mobile?

Thank you.

Use this new CSS

@media screen and (min-width:901px) {
img {
    pointer-events: none;
  -webkit-touch-callout: none;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
1 hour ago, tuanphan said:

Use this new CSS

@media screen and (min-width:901px) {
img {
    pointer-events: none;
  -webkit-touch-callout: none;
}
}

 

Thanks Tuan,

in the meantime I made a mix of codes found in different places and modified for my needing (because I'm scary that your last modification could anyway cause trouble with arrow clicking on biggest tablet, but I don't know if I'm saying something wrong because I don't have a tablet to verify it).

 

I used this code to block from saving images on mobile:

Quote

img {

   -webkit-touch-callout:none;

}

I found the original version of that here: https://forum.squarespace.com/topic/9449-how-can-i-override-the-browsers-right-click-settings/#comment-266794 but it has the problem that it prevents to open links (or anything else) in other panels, copying text etc.

 

While to block right click image saving on desktop devices, I used this in Advanced > Code injection > Header, that you originally posted on your website https://beaverhero.com/squarespace-disable-right-click/ and was implemented to avoid image drag as well here: https://forum.squarespace.com/topic/203953-inject-code-for-blocking-right-click-and-drag-and-save-for-images/#comment-493592 

Quote

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>

$(document).ready(function () {

  $("img").on("contextmenu",function(e){

    return false;

  });

  $("img").on("dragstart",function(e){

    return false;

  });

});

</script>

 

 

 

In this way I have the first code that avoid right click on mobile (only on images) and the second one that avoid from dragging and saving images on desktop.

 

If there is something missing or wrong that you can see, please tell me.

 

Edited by g_franchini
Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.