jquery - Removing part of an image src -

using jquery, i've created simple lightbox loads image upon clicking thumbnail.

i'm trying lightbox work storing thumbnail src variable load main gallery image. variable however, needs '/thumbs' part of src removing find larger gallery image.

i've followed numerous answers given variants of question, none of attempts emulate results seem work.

i've gotten far this:

$("#attractions-dave li a").live("click", function showattraction(e){   var example = $(this).children('img').attr('src', $(this).children('img').attr('src').replace('/thumbs',''));        }); 

for reference, associated html is:

<ul id="attractions-dave">  <li>   <a href="../attractions/attractions.php">    <img src="../images/photos/bouncy-castles/thumbs/happyclown.jpg" alt="happy clown castle" />   </a>  </li> </ul> 

once have got variable, using set background image, using following code:

$('#example').css('background-image', 'url(' + example + ')'); 

as of now, code doesn't add background css element.

i'm not receiving errors code, it's clear variable (the amended thumbnail src) isn't being recognised.

if can see i'm going wrong, appreciated.

example in code jquery object. need do:

var example = $(this).children('img').attr('src').replace('/thumbs','');