Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
Nic1570047698

Can I disable viewers 'dragging and dropping' my jpeg images onto their desktop?

Recommended Posts

Hi there,

Can I disable viewers 'dragging and dropping' my jpeg images onto their desktop?

I have already implemented code to disable right click (below) --->


<script src="http://ajax.googleapis.com/ajax/libs/jquery /1.3.2/jquery.min.js" type="text/javascript"></script> <script type="text/javascript" language="javascript"> $(function () { $(this).bind("contextmenu", function (e) { e.preventDefault(); }); }); </script>

Is there code that will stop users dragging and dropping images aswell or can the above code be altered? I have seen this done on other sites that use HTML.

Many thanks

Edited by Nic

Share this post


Link to post

You can probably just use the same preventDefault technique on events other than just "contextmenu":E.g. for drag:


$(this).bind("ondragstart", function(e) { e.preventDefault(); });
$(this).bind("drag", function(e) { e.preventDefault(); });

This would also disable dragging for other purposes, it's probably best to just target img tags with your event handlers, like so:

$("img").bind...

Nevertheless, someone could easily go into the HTML inspector and pull out your image out of the page. You can't prevent a developer or someone determined from snagging the image.


Developer at Thinkful.com Developed the Shutterstock Blog, and a few other SQSP sites while at Big Human. Formerly at Google.

Share this post


Link to post

@foleyatwork: that is a pretty slick option to prevent dragging images off to save, and it also appears to work at preventing 'right-click + save as'? However, it only seems to work on our full-screen images, and not on our gallery thumbnail grid images. (as seen here: http://fameparties.com/becca-katzmann-atlanta/ ) Is there a way to amend the code to prevent the 'right click + save as' on our gallery thumbnail images?

thanks!

Share this post


Link to post

Very true, to an extent. The amount of people I have had to tell how to take a screen shot vs. the amount of people I had to tell how to save an image from a website is quite different. I know we can't cover all bases, but if we can protect a few from the screenshot challenged then I am fine with that.

Share this post


Link to post

You're right, it's not supported in IE. Technically speaking, there is absolutely no possible way to prevent people from stealing the photos posted on your site. The best you can do is make it inconvenient for them. This isn't a Squarespace-specific problem, it's just how the Internet works.

The technique I posted doesn't work on gallery images because you need pointer events to increment the slides.

A watermark is the only surefire way to protect photos. Kind of lame, but it's effective.

If I have some more time I'll try and come up with a more robust solution.


Developer Evangelist at Squarespace.

Share this post


Link to post

Hey I just used this to solve the drag and drop problem but now that exact text is showing up on my site and I can't get rid of it. Help! www.kaylinngilstrap.com

Share this post


Link to post

Nope wasn't it but I figured it out. I did some other dumb thing. Thanks for posting this answer. Know there's no perfect fix but not making it super ease for people to copy images is step one.

Share this post


Link to post

I have my images in Image Blocks as I prefer this look over the galleries.

  • Add an Image Block
  • Scroll down in the options and there is a clickthrough link, add an external link (I have mine set to my blog)
  • Anytime anyone right clicks or clicks my images it directs them to my blog. If they right click and save what actually gets saved is an HTML file that when opened leads right to my blog.

Image clickthrough link

I hope this helps.

Edited by michelled

Share this post


Link to post

Is it possible to disable on mobile device as well? I was able to disable both right click and drag drop, but I found that on mobile the images can easily be downloaded. Thanks in advance.

Share this post


Link to post

Where do you implement the code to prevent right clicking?

I tried inserting it into the header in code injection and cannot seem to disable the right click function. Any help would be appreciated!

Edited by zkrahmer

Share this post


Link to post

Unfortunately this method creates an annoying conflict at the image slideshows. On Firefox at least, when someone clicks to see the next photo, a transparent blue color fills the photo and they have to press it again to see the next one or just use the arrows on the left and on the right.

Share this post


Link to post

Hello world. I found this out there. I believe its from two sources, I do not recall where exactly, but i love it! Special Thanks to those coding geniuses out there!

This cleanly disables drag and drop of images and disables the right click over all images.

Simply place this in your main CODE INJECTION under HEADER. Save it and your done!


<HTML>
 <HEAD></HEAD>
 <BODY on contextmenu="return false;" onselectstart="return false;" ondragstart="return false;">
 </BODY>
</HTML>

<script>
document.oncontextmenu = function(e){
   var target = (typeof e !="undefined")? e.target: event.srcElement
   if (target.tagName == "IMG" || (target.tagName == 'A' && target.firstChild.tagName == 'IMG'))
       return false
}
</script>

Best to you all out there, Megalo


Dedicated professional with 18 years of experience in Architectural + Interior Design and Urban Planning and with four years as an adjunct professor of Interior Design at Ringling College of Art + Design. Specializes in hospitality, entertainment, multi-family and mixed use architecture, interior design + planning. Expertise in programmatic design, conceptual design, design development, problem solving complex design scenarios, space + facility planning and urban and site development. Technical expert in BIM production, education + management, improving upon team workflow, efficiency, consistency, quality and confidence. Parametric modeling, 3D model coordination, 3D rendering and avid student of computational modeling. New to web development!

Share this post


Link to post

Before disable right-click you need to know its corn. It is used to navigate (go back/forward), reload and add to favorites. If you disable it, your visitors will suffer and likely avoid your blog.

instead of this, it is better to use disable selection of text or html :

Add the following html code to your BODY tag:Here is how your BODY tag may look once implemented:

ondragstart=”return false” onselectstart=”return false”

Thanks

Edited by OriginBuzz

Share this post


Link to post

This worked but it meant that I couldn't highlight any text on my website, if there anyway to make it so it is just specific to images rather than not being able to highlight anything on my site

Edited by hannah
Initial Revision

Share this post


Link to post

We actually made a free plugin to disable right clicking and dragging and dropping on only images, so you protect your intellectual property without compromising the user experience by disabling right clicking everywhere. You can get it at www.squareguru.com/content-protection

Share this post


Link to post

Create an account or sign in to comment

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


×
×
  • Create New...