Change CSS Background Image Via jQuery Not working

Question

I am working with the following code and cannot seem to figure out why it is not working. My goal is to change the background image of the .featured-artist class based on the click of one of the 6 images on the right.

FULL HTML

<!DOCTYPE html>
<html>
<head>
<title>PP - TEST</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- Bootstrap core CSS -->
<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" media="screen">

<!-- Load FontAwesome Icons -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

<!-- Posted Prints CSS -->
<link href="../html/css/posted-prints.css" rel="stylesheet" media="screen">

<!-- Load Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">

<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
      <script src="http://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.js"></script>
      <script src="http://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.js"></script>
    <![endif]-->
</head>
<body>
<div id="artist" class="container-fluid featured-artist">
  <div class="col-lg-3 artist-bio pull-right">
    <h4>JOHN DOE</h4>
    <h6><em>Artist Bio</em></h6>
    <hr>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p class="artist-link text-right"><em><a href="#">View all work from this artist</a></em></p>
    <div class="row">
      <div class="col-lg-4 artist-photo"> <img src="http://michaelfroseth.com/clients/postedprints/html/img/ER 1 (original).png" class="img-responsive" /> </div>
      <div class="col-lg-4 artist-photo"> <img src="http://michaelfroseth.com/clients/postedprints/html/img/ER 1 (original).png" class="img-responsive" /> </div>
      <div class="col-lg-4 artist-photo"> <img src="http://michaelfroseth.com/clients/postedprints/html/img/CG 7 (original).png" class="img-responsive" /> </div>
    </div>
    <div class="row">
      <div class="col-lg-4 artist-photo"> <img src="http://michaelfroseth.com/clients/postedprints/html/img/ER 4 (original).png" class="img-responsive" /> </div>
      <div class="col-lg-4 artist-photo"> <img src="http://michaelfroseth.com/clients/postedprints/html/img/ER 2 (original).png" class="img-responsive" /> </div>
      <div class="col-lg-4 artist-photo"> <img src="http://michaelfroseth.com/clients/postedprints/html/img/other artists_F.png" class="img-responsive" /> </div>
    </div>
  </div>
</div>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
<!-- Include all compiled plugins (below), or include individual files as needed --> 
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.min.js"></script> 
<script>
    $('.artist-photo img').click(function(){
  var images = $('.artist-photo img').attr('src');
    $('.featured-artist').css('background-image','url('+images+')');
});
</script> 
<script>
    $('a').click(function(){
    $('html, body').animate({
        scrollTop: $( $(this).attr('href') ).offset().top
    }, 500);
    return false;
});
</script>
</body>
</html>

JQUERY

<script>
    $('.artist-photo img').click(function(){
  var images = $('.artist-photo img').attr('src');
    $('.featured-artist').css('background-image','url('+images+')');
});
</script>

CSS

.featured-artist {
    background-image: url('http://michaelfroseth.com/clients/postedprints/html/img/ER 8 (original) copy.png');
    margin-left: 0px;
    margin-right: 0px;
    padding-left: 0px;
    padding-right: 0px;
}

Does anyone have a working jsfiddle that uses a similar function that I can study?

You would likely get a lot more help if you provided your own JSFiddle of the problem instead of your actual site. Links to external sites like yours are bad because future readers will come here and presumably see your fixed website with no frame of reference to what your original problem was thus aging this question into uselessness. — leigero
– leigero, Commented Jan 4, 2017 at 18:26
I apologize. I am fairly new to stackoverflow so am not certain of the process. Will know to do this myself now prior to askign a question. — Michael J Froseth
– Michael J Froseth, Commented Jan 4, 2017 at 18:51

Tim Barnett · Accepted Answer · 2017-01-04 18:30:04Z

5

I see 2 problems with your script;

You're assigning multiple values to your images variable
You're missing quotes around your background-image url

Try this

<script>
$(".artist-photo img").click(function(){
var images = $(this).attr('src');
$(".featured-artist").css("background-image","url('"+images+"')");
});
</script>

answered Jan 4, 2017 at 18:30

Tim Barnett

1,0125 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Xandrios93 Over a year ago

you was faster :D

Michael J Froseth Over a year ago

Thank you so much. Just so I understand, because my variable was targeting the specific class, is that why it was pulling multiple values? And with this, it's actually targeting whatever I clicked? Is that right?

Tim Barnett Over a year ago

$('.artist-photo img') That is equal to several elements in your markup and you only want the one you clicked.

Matt Dawdy Over a year ago

I can't thank you for this answer enough. I would have found the issue after probably an hour or so, but this helped me prove something to my conceited team lead in 2 minutes. Damn I needed a win today. Thank you.

Collectives™ on Stack Overflow

Change CSS Background Image Via jQuery Not working

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related