Change slider image in Click

Question

in my page i have a thumnails list of images and a background image, basically what im attempting to do is when one of the thumbnails images are clicked the background image changes. But for i cant figure out why its not change the image.

When the thumbnail image is clicked the background image gets faded but it doesnt replace the image for the new one. Above i leave my code:

thumb-img id the Thumbnails id and #banner is the wrapper of the background imagem.

Example: http://jsfiddle.net/q6h50ejq/6/

$('#thumb-img').click(function(){
                $this = $(this);
                $image = $this.attr('full');
                $("#banner").hide().html('<img class="item_image"  src="img/newImage.jpg">').fadeIn(300);  

                });

           });

Answer 1

Here is the completed results with commented explanation.

JSFiddle

The trick is not to replace the html , but replace the src .

//use a class rather than an ID to bind the click event
$('.thumb-img').click(function () {
    //gets the source of the thumbnail
    var source = $(this).attr('src');
    $("#banner").fadeOut(function () {
        //fades banner out and upon completion changes source image and fades in.
        $(this).attr("src", source);
        $(this).fadeIn();
    });
});