Color-Picker-product-builder.js

/*///////////////////
JS
Build a simple product visualiser with Gravity Forms Color Picker
Full article at https://jetsloth.com/labs/build-a-simple-product-visualiser-with-gravity-forms-color-picker/
////////////////////*/

<script type="text/javascript">
    jQuery(document).bind('gform_post_render', function(e, formId, currentFormPage) {
      // Hide all the product images
      jQuery( ".gform_body li.preview-area img" ).css('display','none');
      // Now show the first image to start with
      jQuery( ".gform_body li.preview-area img:eq(1)" ).css('display','block');
      // On color swatch click/secltion
      jQuery( "li.color-picker-choice " ).click(function() {
        // Get index of color selection input
        var $radioIndex = jQuery( "li.color-picker-choice ").index(this);
        // Refernce the images in the preview
        var $imageRef = jQuery( ".gform_body li.preview-area .product");
        // Hide all images to start with
        $imageRef.css("display","none"); 
        // Show relevant image in reference to click color selection index
        $imageRef.eq( $radioIndex ).css("display","block"); 
      });
    });
</script>