Question

I am using colorbox to display a lightbox. The lightbox is transparent and the image needs to be swapped for another image when the lightbox is triggered. How do I do this?

Here is the 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>

Here is the script I am using to call Colorbox:

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

All I really need to do is take the image in the HTML code and change that image to another image.

Also when the lightbox closes it reverts back to the original image.

Answer 1

colorbox has some callback methods you could use to perform your actions. Take a look at the docs here: http://jacklmoore.com/colorbox/

example (not tested):

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

note that jQuery’s prop() is supported since version 1.6. If you use an older version, please replace prop for attr