CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Michael J Froseth
Michael J Froseth

Reputation: 35

Changing Background Image CSS Property Based on image selection

I am working on something I have not done before and wanted to see if anyone knows of existing jsjfiddle or something I can research/review to learn how to accomplish this.

The below image attachment shows what I am trying to create. I have the HTML/CSS in place as seen here:

<div 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="../html/img/ER 1 (original).png" class="img-responsive" /></div>
      <div class="col-lg-4 artist-photo"> <img src="../html/img/ER 1 (original).png" class="img-responsive" /> </div>
      <div class="col-lg-4 artist-photo"> <img src="../html/img/CG 7 (original).png" class="img-responsive" /> </div>
    </div>
    <div class="row">
      <div class="col-lg-4 artist-photo"> <img src="../html/img/ER 4 (original).png" class="img-responsive" /> </div>
      <div class="col-lg-4 artist-photo"> <img src="../html/img/ER 2 (original).png" class="img-responsive" /> </div>
      <div class="col-lg-4 artist-photo"> <img src="../html/img/other artists_F.png" class="img-responsive" /> </div>
    </div>
  </div>
</div>

Right now the large image is a background property of the featured-artist class and my goal is to change that property if any of the 6 images on the right are selected. So if one image is selected, it changes the background image of the "featured-artist" css class.

If there is a jsfiddle that I can study or a tutorial, please send my way!

Click To See What I am trying to create

Upvotes: 1

Views: 74

Answers (2)

Sean Mishra
Sean Mishra

Reputation: 309

This should work:-

jQuery

$('.artist-bio img').on('click',function(){
    var imgSrc = $(this).attr('src');
    $('.featured-artist').css('background-image','url('+imgSrc+')');
});

If you are using separate images for thumbnail and background, you can set the large image paths to a data attribute on the img elements and then use that instead of their src attributes. Like so:-

HTML

<img data-src="path/to/large/img" src="path/to/thumbnail" alt="" />

jQuery

$('.artist-bio img').on('click',function(){
    var imgSrc = $(this).data('src');
    $('.featured-artist').css('background-image','url('+imgSrc+')');
});

Upvotes: 1

Naveed Ramzan
Naveed Ramzan

Reputation: 3593

<script>
$(document).ready(function(){
    $('img').click(function(){
        var src = $(this).attr('src');
        if(src == '../html/img/ER 4 (original).png'){
            $('.featured-artist').css('background-color','red');
        }else if(src == '../html/img/ER 2 (original).png'){
            $('.featured-artist').css('background-color','black');
        }
        // and so on
    });
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

Upvotes: 0

Related Questions