title: carousFredSel update image container
body: <p>What I need to have happen is when the product thumbnail is clicked the main image is updated but i can not seem to figure it out. The weird part about this is after the page has loaded, resizing the browser page seems to fire the script to re-initialize and thus updates the main image when a thumbnail is clicked. </p>
  
  <p>Demo link here <a href="http://www.venaproducts.com/dev/product/fosmon-hybo-duoc-case-for-amazon-fire-phone/" rel="nofollow">http://www.venaproducts.com/dev/product/fosmon-hybo-duoc-case-for-amazon-fire-phone/</a></p>
  
  <p>Please help. I've combed through the documentation here but I must be missing something. <a href="http://docs.dev7studios.com/jquery-plugins/caroufredsel-advanced" rel="nofollow">http://docs.dev7studios.com/jquery-plugins/caroufredsel-advanced</a> </p>
  
  <pre><code>        &lt;script type="text/javascript"&gt;
          var allVariants = "";
  
          jQuery(document).ready(function($) {
              $('body').append('&lt;div id="prod_var_images" /&gt;');
  
              if (typeof product_variations === 'undefined') { 
                  allVariants = $('form.variations_form').data('product_variations');
              } else { 
                  allVariants = product_variations; 
              }
  
              $('input[name="variation_id"]').change( function() {
                  var variantID = $(this).val();
                  var variantData = "";
                  for (var p = 0; p &lt; allVariants.length; p++) {          
                      if ( allVariants[p].variation_id == variantID ) {
                          variantData = allVariants[p];
                      }           
                  }
  
                  //update SKU
                  if(variantData) {
                      if(variantData.sku) {
                          $('span.prod-sku').text('SKU: ' + variantData.sku);
                          $('*[class*="variation-VN"]:not([class*="variation-' + variantData.sku + '"])').hide();
                          $('*[class*="variation-' + variantData.sku + '"]').show();
                      }
                  }
  
                  if(variantData.sku) {
                      //pull all variation images out and append to #prod_var_images div
                      $('#product-images img[alt*="variation-VN"]').closest('a').appendTo('#prod_var_images');
  
                      //only show main sku variation images below main images
                      $('#prod_var_images img[alt*="variation-' + variantData.sku + '"]').closest('a').appendTo($('#product-images'));
  
                      //reinitialize the slide for new the content
                      $('#product-images').carouFredSel({
                          reInit:true,
                          height: 'auto',
                          width: 276,
                          items: 3,
                          scroll: {
                              easing: "elastic",
                              duration: 1000 
                          },
                          circular: false,
                          auto: false,
                          swipe: {
                              onMouse: true,
                              onTouch: true
                          },
                          prev: ".product-prev",
                          next: ".product-next",
                      });
  
                      //rebuild thumbnail links to go to correct images - NOT WORKING
                      $('#product-images a').each(function(i) {               
                          $(this).bind('click', function() {
                              $('#product-images a').addClass('active');                      
                          });             
                      }); 
                  }
              });
          });
      &lt;/script&gt;
  </code></pre>