CODEWITHSUNDEEP
jquery
Stefan Perju
Stefan Perju

Reputation: 298

Change background on image click

I have a list of images and I want to change the background of a div when i click of one of the images. I have something like this but it doesn't work:

The jQuery:

$('.container-inner').find('img').click(function(){
            var $url = $(this).attr('src');

                console.log($url);
        $('.container-outer').css({'background-image': $url});

 });

The HTML:

<div class="container-outer">
   <div class="container-inner">
    <a href="#"><img src="http://d1c739w2xm33i4.cloudfront.net/2.2/top_image.jpg"></a>
      <a href="#"><img src="http://a.tgcdn.net/images/products/additional/large/e718_broke_something.jpg"/></a>
      <a href="#"><img src="http://d1c739w2xm33i4.cloudfront.net/2.2/top_image.jpg"></a>
       <a href="#"><img src="http://inspiretrends.com/wp-content/uploads/2013/07/InteractiveSVG.jpg"/></a>
       <a href="#"><img src="http://images5.fanpop.com/image/photos/30800000/-Random-random-30843841-1920-1080.jpg"/></a>
        <a href="#"><img src="http://inspiretrends.com/wp-content/uploads/2013/07/InteractiveSVG.jpg"/></a>
         <a href="#"><img src="http://inspiretrends.com/wp-content/uploads/2013/07/InteractiveSVG.jpg"/></a>

   </div>
</div>

Any ideas?

Upvotes: 0

Views: 688

Answers (2)

Bwaxxlo
Bwaxxlo

Reputation: 1880

You should change your last line to:

$('.container-outer').css("background-image", "url(" +$url+ ")");

Also, log $url to see what it returns. Then compare that to the way background-image is set.

Upvotes: 0

adeneo
adeneo

Reputation: 318342

You're missing the url(link here) part of the CSS:

$('.container-inner').find('img').click(function(){
    $('.container-outer').css('background-image', 'url('+this.src+')');
});

FIDDLE

Upvotes: 5

Related Questions