( function( $ ) {

        // Override default behavior
        $('.woocommerce-main-image').on('click', function( event ) {
            event.preventDefault();
        });

        var thumblink = $( '.thumbnails .zoom' ); // Find the individual thumbnail images

        thumblink.first().addClass('active'); // Add our active class to the first thumb which will already be displayed on page load.

        thumblink.on( 'click', function( event ) {

            event.preventDefault(); // Override default behavior on click.

            var thumb = $(this).find('img'); // We'll generate all our attributes for the new main image from the thumbnail.
            var photo_fullsize =  thumb.attr('src').replace('-200x200',''); // The new main image url is formed from the thumbnail src by removing the dimensions appended to the file name.
            var photo_srcset =  thumb.attr('srcset'); // srcset attributes are associated with thumbnail img. We'll need to also change them.
            var alt = thumb.attr('alt'); // Retrieve alt attribute for use in main image.

            // If the selected thumb already has the .active class do nothing.
            if ($(this).hasClass('active')) {
                return false;
            } else {

                thumblink.removeClass('active'); // Remove .active class from previously selected thumb.

                $(this).addClass('active'); // Add .active class to new thumb.

                // Fadeout main image and replace various attributes with those defined above. Once the image is loaded we'll make it visible.
                $('.woocommerce-main-image img').css( 'opacity', '0' ).attr('src', photo_fullsize).attr('srcset', photo_srcset).attr('alt', alt).load(function() {
                    $(this).animate({ opacity: 1 });
                });
                return false;
            }
        });
    } )( jQuery );