Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
/*///////////////////
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment