How can I get the background-image value of a div and apply it to the src value of an img tag onclick?

Question

I am trying to take the background image of my div (thumbnail) and apply the same value to the main image so that the image changes onclick

I thought this would work. I have small divs with the class ProductGalleryThumb and one large image with an id MainImage

$('.ProductGalleryThumb').click(function () {
    var i = $(this).css('background-image', 'url(' + $(this).attr('rel') + ')');
    $("#MainImage").html('<img src="' + i + '" />');
})

Any help much appreciated as always.

Answer 1

Try using window.getComputedStyle...

$('.ProductGalleryThumb').click(function () {

    // get computed style
    var style = this.currentStyle || window.getComputedStyle(this, false);

    // img src is inside 'url(' + ')' - slice those off
    var src = style.backgroundImage.slice(4, -1);

    $("#MainImage").html('<img src="' + src + '" />');
});

Answer 2

Your HTML should look something like this:

<div class="ProductGalleryThumb" style="background-image:url(img1.jpg)"></div>
<div class="ProductGalleryThumb" style="background-image:url(img2.jpg)"></div>
<div class="ProductGalleryThumb" style="background-image:url(img3.jpg)"></div>

<img id="MainImage" src="" alt="" />

and here is the jQuery :

$('.ProductGalleryThumb').click(function () {
    var image = $(this).css('background-image');
    // remove "url(" and ")" to get the url
    image = image.replace('url(','').replace(')','');
    $("#MainImage").attr('src',image);
});

JS Fiddle Demo