Nic1570047698 Posted March 31, 2013 Share Posted March 31, 2013 (edited) 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 January 9, 2015 by Nic CameraWala, Ari and nobutan 3 Link to comment
olex Posted June 21, 2013 Share Posted June 21, 2013 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. Hunteq 1 Developer at Thinkful.com Developed the Shutterstock Blog, and a few other SQSP sites while at Big Human. Formerly at Google. Link to comment
foleyatwork Posted June 21, 2013 Share Posted June 21, 2013 Try this in custom CSS. img { pointer-events: none; } Meeeee 1 Developer Evangelist at Squarespace. Link to comment
Guest Posted June 21, 2013 Share Posted June 21, 2013 @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! Link to comment
neeklamy Posted June 21, 2013 Share Posted June 21, 2013 Apparently it's not supported in Internet Explorer. The name is an Anglicised form of the Greek Korvetti — I like to think there’s a little bit of the ancient Hellenic drive in me. Link to comment
mcgarveybarlow Posted June 21, 2013 Share Posted June 21, 2013 Just as easy to hit shift-command-control-4 (mac) and capture the image. You can't stop people from taking an image if they want it. Link to comment
Guest Posted June 21, 2013 Share Posted June 21, 2013 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. Link to comment
foleyatwork Posted June 21, 2013 Share Posted June 21, 2013 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. Link to comment
Guest Posted July 8, 2013 Share Posted July 8, 2013 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 Link to comment
foleyatwork Posted July 8, 2013 Share Posted July 8, 2013 My guess is you added it to code injection. Login, click on the wrench, then find the code injection tab and delete the code. This is supposed to go in custom CSS. Instructions here: http://help.squarespace.com/customer/portal/articles/438114-making-style-changes#css-editor--optional- Developer Evangelist at Squarespace. Link to comment
Guest Posted July 8, 2013 Share Posted July 8, 2013 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. Link to comment
Guest Posted June 2, 2014 Share Posted June 2, 2014 (edited) 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. I hope this helps. Edited June 2, 2014 by Guest Link to comment
marthayjuarez Posted June 27, 2014 Share Posted June 27, 2014 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. Link to comment
Helloojello Posted July 20, 2014 Share Posted July 20, 2014 (edited) You might need to put the code in the header under code injection section: No right-click script. Edited July 20, 2014 by Helloojello Independent Photographer Link to comment
zkrahmer Posted August 1, 2014 Share Posted August 1, 2014 (edited) 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 August 1, 2014 by zkrahmer Link to comment
Panos Posted October 16, 2014 Share Posted October 16, 2014 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. Link to comment
neeklamy Posted October 16, 2014 Share Posted October 16, 2014 You’re worrying about the wrong thing…Bugging out: How rampant online piracy squashed one insect photographerMost copyright holders are individuals; most infringers are businesses. The name is an Anglicised form of the Greek Korvetti — I like to think there’s a little bit of the ancient Hellenic drive in me. Link to comment
neeklamy Posted October 16, 2014 Share Posted October 16, 2014 You’re worrying about the wrong thing…Bugging out: How rampant online piracy squashed one insect photographerMost copyright holders are individuals; most infringers are businesses. The name is an Anglicised form of the Greek Korvetti — I like to think there’s a little bit of the ancient Hellenic drive in me. Link to comment
neeklamy Posted October 16, 2014 Share Posted October 16, 2014 You’re worrying about the wrong thing…Bugging out: How rampant online piracy squashed one insect photographerMost copyright holders are individuals; most infringers are businesses. The name is an Anglicised form of the Greek Korvetti — I like to think there’s a little bit of the ancient Hellenic drive in me. Link to comment
Guest Posted March 22, 2015 Share Posted March 22, 2015 This worked for me. Header or footer box should work the same.. <BODY onselectstart="return false;" ondragstart="return false;"> Link to comment
Megalomaniac Posted September 3, 2015 Share Posted September 3, 2015 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 rebecadourado 1 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! Link to comment
OriginBuzz Posted January 15, 2016 Share Posted January 15, 2016 (edited) 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 January 15, 2016 by OriginBuzz Link to comment
namdevmatrimonyin Posted March 10, 2016 Share Posted March 10, 2016 (edited) img { -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; -webkit-user-drag: none; user-drag: none; -webkit-touch-callout: none; } I used it on my website at http://www.namdevmatrimony.in/It's works like a magic!!! :) Edited March 10, 2016 by namdevmatrimonyin Initial Revision Link to comment
hannah1570048197 Posted May 27, 2016 Share Posted May 27, 2016 (edited) 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 May 27, 2016 by hannah Initial Revision Link to comment
emmykane1570048207 Posted July 13, 2016 Share Posted July 13, 2016 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 Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment