JS/HTML Image changer with dynamic img src

Question

Essentially I'm adding some JS to a site that allows the same set of buttons to load images(colour options) based on the ONLY image found within an ID. WIP to illustrate: http://www.twistfurniture.co/collections/product-test/

So what I've done thus far:

<div id="switchgallery">
<img src="/wp-content/uploads/Chair.jpg" id="switchimage">
</div>

<p>        
<input id="Button1" type="button" value="Show black" onclick="ShowBlack()"/>
&nbsp;&nbsp; 
<input id="Button2" type="button" value="Show red" onclick="ShowRed()"/>
</p>

JS

function ShowBlack() 
{document.getElementById("switchimage").src = "/wp-content/uploads/Chair_Black.jpg";}

function ShowRed() 
{document.getElementById("switchimage").src = "/wp-content/uploads/Chair_Red.jpg";}

Now this works but if I have lots of colours and lots of products it'll take ages and require coding each time a new product is adding (productname=Chair in the above example).

What I'd like to accomplish is the following.

function ShowBlack() 
{document.getElementById("switchimage").src = "***Dynamically generate the SRC of the image based on the ID of switchimage and and add _Black before the file extension =(/wp-content/uploads/Chair_Black.jpg)***";}

That way I can add lots of products and so long as they have the correct ID and the buttons are on the page I will get an easy method to switch their colour (assuming I have uploaded the appropriately named files in the right directory ;D)

Like I mentioned this is a work in progress and I will continue to fiddle until either I solve this myself or you guys flip over the ICT Hero card.

I've learned a lot by reading these forums, but now need direct assistance! Many thanks in advance

Answer 1

What you need is to setup a function with a parameter color :

function showImage(color) {
    document.getElementById("switchimage").src = "/wp-content/uploads/Chair_"+color+".jpg";
}

this color can easily be a parameter of the button that you load with a function like that

function showImage() {
{
     var color = jQuery(this).attr("color");
     document.getElementById("switchimage").src = "/wp-content/uploads/Chair_"+color+".jpg";
}

with button definition like

<input id="Button1" type="button" value="Show black" onclick="showImage()" color="black"/>

Answer 2

This should work:

function ShowBlack() 
{
  source = document.getElementById("switchimage").src;
  if (source.lastIndexOf("_") != -1){
    source = source.substring(0,source.lastIndexOf("_"));
  }else{
    source = source.substring(0,source.lastIndexOf("."));
  }
  source += "_Black.jpg"
  console.log(source);
  document.getElementById("switchimage").src = source;
}

function ShowRed() 
{
  source = document.getElementById("switchimage").src;
  if (source.lastIndexOf("_") != -1){
    source = source.substring(0,source.lastIndexOf("_"));
  }
  else{
    source = source.substring(0,source.lastIndexOf("."));
  }
  source += "_Red.jpg"
  document.getElementById("switchimage").src = source;
}

Here is a fiddle : http://jsfiddle.net/TQhJk/1/

Answer 3

You have a couple options:

1. Use data. You can use the data attribute to store which color to load.

   <button data-color="Red">Red</button>

   jsfiddle: http://jsfiddle.net/PThwj/

2. Use arguments

   <button onlick="loadImage('black');">Black</button>

   jsfiddle: http://jsfiddle.net/gt6BS/1/

The load image function looks like this:

function loadImage(color) {
    document.querySelector("#image").innerHTML = 
        "/wp-content/uploads/Chair_" + color;
    // Change source of image here by using img.src
}

To bind events dynamically (if you use option 1) do this:

var buttons = document.querySelectorAll(".chair-button");
for (var i = 0; i < buttons.length; ++i) {
    buttons[i].addEventListener("click", loadImageEvent);
}

Now you can add <button> s and specify a data-color and the rest will take care of itself.

Answer 4

Since your site is a Word Press site, I would recommend using one of the many plugins available, like this .

While I will be the first to want to use my own custom code, Word Press plugins are the best way to work within Word Press. While it may seem straight forward, there are a lot of things to consider. For example, how to determine what the product is and what images are available for said product. Javascript is a client side library and won't give you the best solution for something like a product catalog unless you have full control over the site.