Изменить изображение SRC внутри слайдера JQuery с помощью переключателей

Question

Итак, в основном я пытаюсь создать "конфигуратор цвета транспортного средства" внутри слайдера изображений jquery. Я хочу, чтобы люди могли нажимать на стильную радиокнопку и соответственно вносить изменения в эти конкретные слайды. Это мой код ниже, но я не могу изменить изображения...

HTML

<div data-iview:image="features/design/design_5.1.jpg" id="config">
            <div class="iview-caption design5" data-transition="fade">
                <h1>Colour</h1><h2>the town...</h2>
                <p>Blah blah fish paste</p>
                <span>
                 <input type="radio" name="config" value='design_5.1.jpg' />
                 <input type="radio" name="config" value='design_5.2.jpg' />
                 <input type="radio" name="config" value='design_5.3.jpg' />
                 <input type="radio" name="config" value='design_5.4.jpg' />
                 <input type="radio" name="config" value='design_5.5.jpg' />
                 <input type="radio" name="config" value='design_5.6.jpg' />
                 <input type="radio" name="config" value='design_5.7.jpg' />
                 <input type="radio" name="config" value='design_5.8.jpg' />
                </span>
            </div>
</div>

Jquery

imgFldr = 'features/design/'; 

$("input[type='radio']").click(function() {   
  $('#config').attr('data-iview', imgFldr+this.value);
});

Answer 1

Вы пропускаете ': изображение', и код такой

$(function(){
var imgFldr = 'features/design/'; 
$("input[type='radio']").click(function() {   
$('#config').attr('data-iview:image', imgFldr+this.value);
});})

Answer 2

Тот data-iview:image переводится в фоновое свойство css во время выполнения, поэтому изменение его динамически не влияет на слайдер

Answer 3

Мне удалось найти другое решение, основанное на следующем:

    //The color picker div    
<div class="picker" data-bkgnd="/content/images/someimg.jpg"></div>

//The container for your product image
<div class="productDisplay"></div>

<script type="text/javascript">


 $(document).ready(function(){
   $(".picker").click(function(){       
       //Load background string from data of clicked element
       var bVal = $(this).attr('data-bkgnd');
       //Set display's background to retrieved background string
       $(".productDisplay").hide().css({'background-image': "url(" + bVal + ")"}).show();
   });
 });

</script>

Спасибо за всю помощь, хотя!