Support » Everything else WordPress » how to disable right click on a photo?

  • johnromerro

    (@johnromerro)


    Hello,

    I have photography website and I want to disable or prevent my images from opening in ”New Window” by ”Right Click”. I have seen on some other photographers websites that if you RIGHT CLICK their photos a pop up message box appears saying ” this image is copyright, date & owners name. I would like to do the same or anything similar for my own website. Any help would be greatly appreciated.

    Regards, John

Viewing 6 replies - 1 through 6 (of 6 total)
  • $(document).ready(function() {
      $('body img').on('dragstart', function(e) {
        return false; 
      });
      $('body').on('contextmenu', 'img', function(e){ 
        e.preventDefault();
        //return false; /* this returns nothing */
        alert('no');
      });
     });

    Might not be the best example but it “works.”

    The first part says any image inside the body tag disable drag. That way a user can’t just drag an image to a new tab and save it. The second part is the no right click part. Keep in mind though, this is just javascript so someone could turn it off. Also, if someone knows how to just view source, they can see the URL of the image. Preventing that can be trickier since there’s more involved.

    https://wordpress.org/plugins/prevent-direct-access/
    That plugin reads like it can handle all of this if you want to give that a go.

    Thread Starter johnromerro

    (@johnromerro)

    hey tugbucket,

    Thank you for your reply. I am using a plugin that has (apparently) disabled right click on my images and if users right click a message box pops up stating ”the image is copyrighted”.

    However, now i am facing another issue. The images on the front home page when mouse hover, displaying long URL (on bottom left) including image file name at the end etc. Is there any code to hide that? people say ”This is just how browsers work”.

    I am wondering why is it happening only to images on the main/homepage gallery images only? (They were posted as the post as the theme requires) But the Gallery page images are totally fine. Also, if you check the following website the images there are not showing any URL when hover over? sanzlena.com/#

    Can you help?

    Regards,

    – 

     

    @johnromerro On your site, the images are inside a link tag and what you are seeing is the URL of that link. On the page you posted, it’s an image tag in a gallery so not <a> tag thus no URL to display.

    Thread Starter johnromerro

    (@johnromerro)

    @tugbucket Any possibility to remove that link tag? or any way not to see that url link?

    @johnromerro You can’t really prevent the URL from showing without changing the HTML structure of the gallery. As I don’t know what gallery that is and how you go about adding item to it, I can’t really tell you a way to do it without possibly breaking functionality.

    Locally I can change some things but again, I’m not sure how your gallery is being built.

    If you edit the HTML to make your links:

    <a class="popup-image" ... </a>

    into buttons:

    <button class="popup-image" ... </button>

    then adding some CSS:

    button.popup-image { border:none; outline:none; background:transparent; padding:0; cursor: pointer; }

    The URL will not show and the functionality stays the same.

    @johnromerro
    I made a simple child theme for your parent theme. Applied the needed button css and swapped the <a> tags for <buttons>. It might be all you need, it might not. But, it’s a start,

    https://drive.google.com/file/d/1-CfXpKzHaMnNrpRkvHGcUfh2Azjm6jmt/view?usp=share_link

    You could also write the theme developers and ask them to make these changes in the parent them instead.

Viewing 6 replies - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.