2014-01-08 65 views
1

我發現此腳本HERE將透明圖像覆蓋在我想「保護」我的網站上的照片上。在有超鏈接的圖片上,我希望能夠給他們一個特殊的課程並讓他們可以訪問。'疊加透明圖像'jQuery在添加新類時中斷

這裏是原始腳本:

<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://static.squarespace.com/static/51c351f0e4b0c89ff2b61cb8/t/52cc3905e4b0167d33cd524e/1389115653884/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> 

我被告知要改變這一行:

$('img').live('mouseenter touchstart', function(e) { 

要這樣:

$('img').not('.FreeMe').live('mouseenter touchstart', function(e) { 

...並給我的圖像想要點擊「.FreeMe」類。

當我沒有改變的情況下運行腳本時,透明疊加效果很好。一旦我改變了那行代碼並添加了特殊類,所有的圖像都可以再次訪問並且腳本不再起作用。

HERE是指向我一直在處理的頁面的鏈接。屏幕底部的攝影師信息是我想要添加超鏈接的圖像。

我一直在尋找高和低,爲了使這項工作,但無法找到解決問題的辦法。我對Javascript和jQuery非常陌生,但在CSS和HTML中足夠了解它是危險的。

我很感謝你們所有人都能提供的幫助。

+0

小心,如果你打算更新jQuery的:在jQuery 1.7,的'.live()'方法已經過時了。使用'.on()'附加事件處理程序。 – Bigood

+0

謝謝Bigood,瞭解相關信息! – ESGD

回答

0

您應該使用.on() method而不是.live(),因爲.live()方法不能像其他jQuery方法那樣鏈接(參數相同)。


報價jQuery's doc on .live()

使用.live()方法,不再推薦,因爲後來 版本的jQuery的報價不具有其 缺點更好的方法。尤其是,使用 時會出現以下問題.live():

•鏈接方法不受支持。例如,$(「a」).find( 「.offsite,.external」).live(...);如預期的那樣無效並且不起作用 。

另外,正如評論中所說,從jQuery 1.7開始,.live()方法已被棄用。

您的看working demo with adorable kittens here.

+0

謝謝你幫助我更新jQuery,使其符合最新標準......以及可愛小貓的演示。 我已經更新了我提供的更新版本的代碼,但如果向其添加'$('img')。not('。FreeMe')',它仍然無法正常工作。 – ESGD

+0

經過更多的研究和朋友的幫助,我們發現我錯過了一組}};在腳本的末尾。然後,我可以提供我想從腳本中排除的圖像.protectionOverlay – ESGD

+0

@ESGD哦,沒錯,我沒有注意到當我將代碼添加到JSFiddle時...抱歉,我錯過了它!儘管如此,你仍然必須使用'.on()'。 – Bigood