change image within backstretch element

Question

Currently I am trying to implement the ability to change the image with my backstretch. Backstretch is binded to a block level element like so,

$("#background-image.slideshow").backstretch(backgroundImages, {fade: 750,duration: 4000});

What I am then wanting to do be able to click a link get the href and add a new backstretch image however what happens at the moment is a new backstretch instance is created, here is my click code,

$("#thumb-gallery a").click(function(e) {
// Prevent the click from actually following the href
e.preventDefault();
// Backstretch
$.backstretch( $(this).attr("href") );
});

Where I am going wrong? All I want to be able to do is change the backstretched image in #background-image.slideshow

Answer 1

You can just replace the image source in the backstretch generated div:

$('#backstretch img').attr('src','your_image_url');