Изменение фонового изображения CSS-свойство на основе выбора изображения

Question

Я работаю над тем, что я раньше не делал, и хотел узнать, знает ли кто-нибудь о существующем jsjfiddle или что-то, что я могу исследовать/пересмотреть, чтобы узнать, как это сделать.

В приведенном ниже прикрепленном изображении показано, что я пытаюсь создать. У меня есть HTML/CSS на месте, как показано здесь:

<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> 

Сейчас большое изображение является фоном свойство класса признакам художника-и моя цель состоит в том, чтобы изменить это свойство, если любой из 6 изображений на справа выбраны. Таким образом, если выбрано одно изображение, оно изменяет фоновое изображение класса css «featured-artist».

Если есть jsfiddle, который я могу изучить или учебник, пожалуйста, отправьте мой путь!

Click To See What I am trying to create

Answer 1

<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> 

Answer 2

Это должно работать: -

JQuery

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

Если вы используете отдельные изображения для эскиза и фона, вы можете установить большие пути изображения в атрибут данных на элементах img, а затем использовать их вместо src атрибутов. Как так: -

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+')'); 
});