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有一些可用于执行操作的回调方法。在这里查看文档：{{3}}

示例（未测试）：

$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

触发灯箱时更改图像

1 个答案: