在Fancybox框架內自動覆蓋真實圖像的透明gif

Question

我發現這個jQuery解決方案可以自動覆蓋真實圖像上的透明gif。

http://www.dwuser.com/education/content/stop-the-thieves-strategies-to-protect-your-images/

（ 「欺瞞下載」）

它工作正常，在我的WordPress網站（訴3.5.1）用的fancybox插件（訴1.3.4）。

但現在與圖像有關的所有我的鏈接都不見了...

是否有任何解決方案，以保持與圖像有關的活動鏈接？

我也試圖覆蓋GIF屬性只對的fancybox框架內的圖像，但沒有成功......

>>編輯發佈關聯CODE < <

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<script type="text/javascript"> 
$(function() { 
    var pixelSource = 'http://upload.wikimedia.org/wikipedia/commons/c/ce/Transparent.gif'; 
    var useOnAllImages = true; 
    // Preload the pixel 
    var preload = new Image(); 
    preload.src = pixelSource; 
    $('img').live('mouseenter touchstart', function(e) { 
     // Only execute if this is not an overlay or skipped 
     var img = $(this); 
     if (img.hasClass('protectionOverlay')) return; 
     if (!useOnAllImages && !img.hasClass('protectMe')) return; 
     // Get the real image's position, add an overlay 
     var pos = img.offset(); 
     var overlay = $('<img class="protectionOverlay" src="' + pixelSource + '" width="' + img.width() + '" height="' + img.height() + '" />').css({position: 'absolute', zIndex: 9999999, left: pos.left, top: pos.top}).appendTo('body').bind('mouseleave', function() { 
      setTimeout(function(){ overlay.remove(); }, 0, $(this)); 
     }); 
     if ('ontouchstart' in window) $(document).one('touchend', function(){ setTimeout(function(){ overlay.remove(); }, 0, overlay); }); 
    }); 
}); 
</script> 

感謝和對不起我的英文不好。 d。

Answer 1

在您的圖像上放置水印一個選項？ 當你在圖像上放置一個gif時，你可以用鼠標右鍵來保存圖像。 但用Firefox你可以右鍵點擊任何地方並選擇'查看頁面信息'，然後從那裏的標籤媒體，你仍然可以下載圖像。

PS： 或者JS禁用的人也可以下載圖像。

Answer 2

試試這個：{要知道，任何JavaScript的保護是無用的，經驗豐富的developpers}

$(function() { 
    var pixelSource = 'http://upload.wikimedia.org/wikipedia/commons/c/ce/Transparent.gif'; 
    var useOnAllImages = true; 
    // Preload the pixel 
    var preload = new Image(); 
    preload.src = pixelSource; 
    //live is deprecated, use 'on' instead 
    $(document).on('mouseenter touchstart','img', function(e) { 
     // Only execute if this is not an overlay or skipped 
     var img = $(this); 
     if (img.hasClass('protectionOverlay')) return; 
     if (!useOnAllImages && !img.hasClass('protectMe')) return; 
     // Get the real image's position, add an overlay 
     var pos = img.offset(); 
     var overlay = $('<img class="protectionOverlay" src="' + pixelSource + '" width="' + img.width() + '" height="' + img.height() + '" />').css({position: 'absolute', zIndex: 9999999, left: pos.left, top: pos.top}).appendTo('body').bind('mouseleave', function() { 
      setTimeout(function(){ overlay.remove(); }, 0, $(this)); 
     }).click(function(){ 
      if(img.parent('a').length)//assuming your image is embeded in a link tag 
       window.location.replace(img.parent('a').attr('href')); 
     }); 
     if ('ontouchstart' in window) $(document).one('touchend', function(){ setTimeout(function(){ overlay.remove(); }, 0, overlay); }); 
    }); 
});