當燈箱被觸發時更改圖像

Question

我正在使用colorbox來顯示燈箱。燈箱是透明的，當燈箱被觸發時需要將圖像換成另一幅圖像。我該怎麼做呢？

下面是HTML：

<p><a class="message" href="/messages4u/2011/images/november/thanksgiving 
    -message.png"><img width="620" alt="Thanksgiving" src="/messages4u/2011/ 
    images/november/thanksgiving.jpg" style="width: 620px;" class="center" /> 
</a></p> 

這裏是我使用的調用彩盒腳本：

var $j = jQuery.noConflict(); 
$j(document).ready(function() { 
$j("a.message").colorbox({opacity:.40}); 
}); 

我真正需要做的是把圖像中的HTML代碼和變化該圖像到另一個圖像。

此外，當燈箱關閉它恢復到原始圖像。

Answer 1

colorbox有一些可用於執行操作的回調方法。看看這裏的文檔：http://jacklmoore.com/colorbox/

例子（未測試）：

$j("a.message").colorbox({ 
    opacity:.40, 
    onOpen: function() { 
    var imageElement = $("a.message img"); 
    imageElement.prop("data-src", imageElement.prop("src")); // store old src into data-src 
    imageElement.prop("src", "new_image.jpg"); 
    }, 
    onClosed: function() { 
    var imageElement = $("a.message img"); 
    imageElement.prop("src", imageElement.prop("data-src")); 
    } 
}); 

注意，由於1.6版本jQuery的prop()支持。如果您使用舊版本，請將prop替換爲attr