How can I change featured image when I click on swatches?

Question

Anyone can help me why my featured photo wont change when I select variant on collection page??

https://strokes-test.myshopify.com/collections/frontpage

Javascript

initColorSwatchGrid: function() { 
jQuery('.item-swatch li label').click(function(){ 
var newImage = jQuery(this).parent().find('.hidden img').attr('src');
jQuery(this).parents('.item-row').find('.featured-image').attr({ src: newImage }); 
return false;
});
}

HTML

<ul class="item-swatch color_swatch_Value">  
{% for option in product.options %}
  {% if option == 'Shades' %}
    {% assign index = forloop.index0 %}
    {% assign colorlist = '' %}
    {% assign color = '' %}
    {% for variant in product.variants %}
      {% capture color %}
        {{ variant.options[index] }}
      {% endcapture %}
      {% unless colorlist contains color %}  
      {% assign text = color | handleize %}
      <li>
       <label style="{% if text == 'white' %}border: 1px solid #cbcbcb; {% endif %}background-color: {{ color | split: ' ' | last | handle }}; background-image: url({{ text | append: '.png' | file_url }});"></label>
        {% if variant.image != null %}
        <div class="hidden">
          <img src="{{ variant.image.src | product_img_url: 'grande' }}" alt="{{ text }}"/>
        </div>
        {% endif %}
      </li>
        {% capture tempList %}
          {{ colorlist | append: color | append: ' ' }}
        {% endcapture %}
        {% assign colorlist = tempList %}
      {% endunless %}
    {% endfor %}
  {% endif %}
{% endfor %}
</ul>

Note I' also using jquery v1.8.1

Answer 1

You need to update the JS code to work properly, use it

initColorSwatchGrid: function() {
   jQuery('.item-swatch li label').click(function () {
      var newImage = jQuery(this).next().find('img').attr('src');
      jQuery(this).parents('.product-detail').prev().find('.featured-image').attr({ src: newImage });
      return false;
   });
}