javascript - 触发灯箱时更改图像

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>

这是我用来调用 Colorbox 的脚本:

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"));
  }
});

请注意，jQuery 的 prop() 从 1.6 版本开始受支持。如果您使用旧版本，请将 prop 替换为 attr