【问题标题】:How to disable right click on lightbox images?如何禁用右键单击灯箱图像?
【发布时间】:2012-02-09 10:14:19
【问题描述】:

我正在使用 Drupal6 lightbox2 模块 我已经禁用右键单击我网站中的图像。 但是我的客户要求我也禁用灯箱图像中的右键单击。 他告诉我不要给图像加水印。 我尝试将脚本添加到灯箱 js 文件,但它不起作用。

我将 oncontextmenu="return false" 添加到灯箱 js 文件中的图像标签,但是 它禁用了整个站点的右键单击。

那么有人可以帮我吗?

提前致谢。

【问题讨论】:

  • 总是发布你的代码 =) 如果你发布你的代码会更容易帮助你。
  • @Alex。我在 page.tpl 文件中使用了这个脚本。
  • @Alex.I'm using this script in my page.tpl file.
  • 我在 body 标签中加入了这个。。这适用于我网站中的图片,但不适用于灯箱图片。

标签: javascript jquery drupal-6 lightbox


【解决方案1】:

抱歉,我知道您不喜欢这个答案,但您需要教育您的客户,而不是仅仅做这些事情。告诉他,为用户提供良好的体验比伪保护图像更重要。此外,确实没有办法您可以阻止用户保存网页中的图像。这就是它应该的方式。

【讨论】:

  • @Rudolph。我已经告诉我的客户,但他只是想禁用右键单击灯箱图像..也会再试一次。
【解决方案2】:

假设所有图像都有一个特定的类,你可以这样做:

$('.lightbox_images').bind("contextmenu", function(e) {
    return false;
});

http://jsfiddle.net/2GmLf/

编辑 看看这个使用Colorbox 的例子。 我使用 Firebug 来识别插件在图像中应用的类,在这种情况下是 cboxPhoto

还将bind 更改为live

http://jsfiddle.net/2GmLf/2/

【讨论】:

  • @Alex。我的灯箱图像 div id 是 lightboxImage。因此我在灯箱 js 文件中使用了此代码。右键单击未禁用。 $('#lightboxImage').bind("contextmenu", function(e) { return false; });
  • @Alex.当我使用此代码时,图像未显示在灯箱中,而是在 nes 选项卡中打开。我做错了什么????$('#lightboxImage').live ("contextmenu", function(e) { console.log(e); return false; });
  • 好的。你用的是什么灯箱插件?灯箱的代码在哪里? (编辑您的问题,不要在 cmets 上发布)。
【解决方案3】:
(function($){
    $(document).on('contextmenu', 'img', function() {
        return false;
    })
})(jQuery);

当灯箱弹出打开时,这会禁用右键单击图像

【讨论】:

    【解决方案4】:

    试试

     $('img').live("contextmenu",function(e){
        return false;
    });
    

    这是一个有效的小提琴:http://jsfiddle.net/NRW2H/;

    【讨论】:

    • @Frank。但它不起作用。是的,图像是动态加载的。
    • @Frank.在灯箱模块 js 文件中使用此代码,导致在新选项卡中打开图像,而不是在灯箱中显示。 $('img').live("contextmenu",function(e){ return false; });
    【解决方案5】:

    试试这个...

    在您的 img 标签内部灯箱中添加此属性。 oncontextmenu="return false"

    像这样:

    <div> // lightbox container
    // others div's
    <img src="..." "alt="..." oncontextmenu="return false" >
    

    希望对你有帮助

    最好的问候。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2012-07-19
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2014-12-22
      • 2019-04-17
      • 1970-01-01
      相关资源
      最近更新 更多