CODEWITHSUNDEEP
javascriptjqueryhtml
jcrossley
jcrossley

Reputation: 3

How to change the src of multiple images at once depending on selected list item

I have a selection of images (and thumbnails) of a car as part of my site. There are four different colours, and a selection list to choose a colour. I want to be able to choose a different colour on the list such that 4 of the 6 images on display change so they are of a different colour.

I have researched this and found methods that can switch images, but no matter what I do I can only change them to the same image, I can't seem to use multiple srcs. Code for the images and selection list attached:

<ul class="slides">
            <li data-thumb="images/audi/red/au.jpg" name="audi">
                <div class="thumb-image"> <img src="images/audi/red/au.jpg" data-imagezoom="true" class="img-responsive" name="audi"> </div>
            </li>
            <li data-thumb="images/audi/red/au1.jpg" name="audi1">
                 <div class="thumb-image"> <img src="images/audi/red/au1.jpg" data-imagezoom="true" class="img-responsive" name="audi1"> </div>
            </li>
            <li data-thumb="images/audi/red/au2.jpg" name="audi2">
               <div class="thumb-image"> <img src="images/audi/red/au2.jpg" data-imagezoom="true" class="img-responsive" name="audi2"> </div>
            </li> 
             <li data-thumb="images/audi/red/au3.jpg" name="audi3">
               <div class="thumb-image"> <img src="images/audi/red/au3.jpg" data-imagezoom="true" class="img-responsive" name="audi3"> </div>
            </li>
             <li data-thumb="images/audi/au4.jpg">
               <div class="thumb-image"> <img src="images/audi/au4.jpg" data-imagezoom="true" class="img-responsive"> </div>
            </li>
            <li data-thumb="images/audi/au4a.jpg">
               <div class="thumb-image"> <img src="images/audi/au4a.jpg" data-imagezoom="true" class="img-responsive"> </div>
            </li>
          </ul>
<li>Select a Colour:
    <select name="car-colour" id="car-colour">
    <option value="red">Red</option>
    <option value="white">White</option>
    <option value="black">Black</option>
    <option value="blue">Blue</option>
</select></li>

Upvotes: 0

Views: 381

Answers (4)

Landaida
Landaida

Reputation: 120

try this:

$(document).ready(()=>{
    $('#car-colour').change(function () {
        let newColor = this[this.selectedIndex].value;
        $('img').attr('src', (index, src)=>{
          return src.replace(/red|white|black|blue/gi, newColor);
        })
        $('li[data-thumb*=images]').attr('data-thumb', (index, src)=>{
          return src.replace(/red|white|black|blue/gi, newColor);
        })
    })
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="slides">
            <li data-thumb="images/audi/red/au.jpg" name="audi">
                <div class="thumb-image"> <img src="images/audi/red/au.jpg" data-imagezoom="true" class="img-responsive" name="audi"> </div>
            </li>
            <li data-thumb="images/audi/red/au1.jpg" name="audi1">
                 <div class="thumb-image"> <img src="images/audi/red/au1.jpg" data-imagezoom="true" class="img-responsive" name="audi1"> </div>
            </li>
            <li data-thumb="images/audi/red/au2.jpg" name="audi2">
               <div class="thumb-image"> <img src="images/audi/red/au2.jpg" data-imagezoom="true" class="img-responsive" name="audi2"> </div>
            </li> 
             <li data-thumb="images/audi/red/au3.jpg" name="audi3">
               <div class="thumb-image"> <img src="images/audi/red/au3.jpg" data-imagezoom="true" class="img-responsive" name="audi3"> </div>
            </li>
             <li data-thumb="images/audi/au4.jpg">
               <div class="thumb-image"> <img src="images/audi/au4.jpg" data-imagezoom="true" class="img-responsive"> </div>
            </li>
            <li data-thumb="images/audi/au4a.jpg">
               <div class="thumb-image"> <img src="images/audi/au4a.jpg" data-imagezoom="true" class="img-responsive"> </div>
            </li>
          </ul>
<li>Select a Colour:
    <select name="car-colour" id="car-colour">
    <option value="red">Red</option>
    <option value="white">White</option>
    <option value="black">Black</option>
    <option value="blue">Blue</option>
</select></li>

Upvotes: 0

Jyothi Babu Araja
Jyothi Babu Araja

Reputation: 10282

As you said that you maintain proper directory structure for colors. This might work for you.

$("#car-colour").change(function(){
  var color = $(this).val().trim();
  $("li").each(function(index){
    if(index > 3) return;
    var arr = $(this).attr('data-thumb').trim().split('/');
    arr.splice(2,1, color);
    var newImgSrc = arr.join('/');
    $(this).attr('data-thumb', newImgSrc);
    $(this).find('img').attr('src', newImgSrc);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="slides">
  <li data-thumb="images/audi/red/au.jpg" name="audi">
    <div class="thumb-image">
      <img src="images/audi/red/au.jpg" data-imagezoom="true" class="img-responsive" name="audi">
    </div>
  </li>
  <li data-thumb="images/audi/red/au1.jpg" name="audi1">
    <div class="thumb-image">
      <img src="images/audi/red/au1.jpg" data-imagezoom="true" class="img-responsive" name="audi1">
    </div>
  </li>
  <li data-thumb="images/audi/red/au2.jpg" name="audi2">
    <div class="thumb-image">
      <img src="images/audi/red/au2.jpg" data-imagezoom="true" class="img-responsive" name="audi2">
    </div>
  </li>
  <li data-thumb="images/audi/red/au3.jpg" name="audi3">
    <div class="thumb-image">
      <img src="images/audi/red/au3.jpg" data-imagezoom="true" class="img-responsive" name="audi3">
    </div>
  </li>
  <li data-thumb="images/audi/au4.jpg">
    <div class="thumb-image">
      <img src="images/audi/au4.jpg" data-imagezoom="true" class="img-responsive">
    </div>
  </li>
  <li data-thumb="images/audi/au4a.jpg">
    <div class="thumb-image">
      <img src="images/audi/au4a.jpg" data-imagezoom="true" class="img-responsive">
    </div>
  </li>
</ul>
<li>Select a Colour:
  <select name="car-colour" id="car-colour">
    <option value="red">Red</option>
    <option value="white">White</option>
    <option value="black">Black</option>
    <option value="blue">Blue</option>
  </select>
</li>

Upvotes: 0

sinisake
sinisake

Reputation: 11318

If you will keep you URL structure as is, you can do something like this:

$( "#car-colour" ).change(function() {
self=$(this);
targets=$('.slides li').each(function() {
if($(this).index()<4) {

dthumb=$(this).data('thumb').split('/');

dthumb[2]=self.val();
final=dthumb.join('/');
$(this).attr('data-thumb',final);
$(this).find('img').attr('src',final);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="slides">
            <li data-thumb="images/audi/red/au.jpg" name="audi">
                <div class="thumb-image"> <img src="images/audi/red/au.jpg" data-imagezoom="true" class="img-responsive" name="audi"> </div>
            </li>
            <li data-thumb="images/audi/red/au1.jpg" name="audi1">
                 <div class="thumb-image"> <img src="images/audi/red/au1.jpg" data-imagezoom="true" class="img-responsive" name="audi1"> </div>
            </li>
            <li data-thumb="images/audi/red/au2.jpg" name="audi2">
               <div class="thumb-image"> <img src="images/audi/red/au2.jpg" data-imagezoom="true" class="img-responsive" name="audi2"> </div>
            </li> 
             <li data-thumb="images/audi/red/au3.jpg" name="audi3">
               <div class="thumb-image"> <img src="images/audi/red/au3.jpg" data-imagezoom="true" class="img-responsive" name="audi3"> </div>
            </li>
             <li data-thumb="images/audi/au4.jpg">
               <div class="thumb-image"> <img src="images/audi/au4.jpg" data-imagezoom="true" class="img-responsive"> </div>
            </li>
            <li data-thumb="images/audi/au4a.jpg">
               <div class="thumb-image"> <img src="images/audi/au4a.jpg" data-imagezoom="true" class="img-responsive"> </div>
            </li>
          </ul>
<li>Select a Colour:
    <select name="car-colour" id="car-colour">
    <option value="red">Red</option>
    <option value="white">White</option>
    <option value="black">Black</option>
    <option value="blue">Blue</option>
      </select></li>

Please check generated HTML. If your images folder will have color names, this should work.

Upvotes: 1

Sayuri Mizuguchi
Sayuri Mizuguchi

Reputation: 5330

Download jQuery and Add jQuery in your folder and add the code in your html:

<script src="jquery-3.1.1.js"></script>

You can use jQuery for it and use one function .attr, but first, give a unique ID for all option value and you can put all images in one class: Give a unique ID for all: 

 <li>Select a Colour:
        <select id="picID">
        <option value="red" selected>Red</option>
        <option value="white">White</option>
        <option value="black">Black</option>
        <option value="blue">Blue</option>
        </select></li>

and add all images in one class (you can use local images to): 

  var picList = [
"images/1.jpg",
"images/2.jpg",
"images/3.jpg",
 ];

and after:

$('#car-colour').change(function () {
    var val = parseInt($('#picID').val());
    $('img').attr("src",picList[val]);
});

Reference here.

Upvotes: 0

Related Questions