Zoom Plugin with Variants, on load of page.

HTML-on-Product-Display

Add the following on the right side of your product display layout area (aka where the price is)

<div id="zoom-hold" class="zoom-hold" style="display: none;"><div class="inner"></div></div>

imagemachine.js

<mvt:assign name="l.settings:clean:product:name" value="glosub(l.settings:product:name, asciichar(39), '&#39;')" />
<script>
	var gallery = [],
		thumbnailIndex = 0;

	ImageMachine.prototype.ImageMachine_Generate_Thumbnail = function (thumbnail_image, main_image, closeup_image, type_code) {
		var thumbnail,
			img;
	
		thumbnail = document.createElement('div');
		thumbnail.className = 'thumbnail-wrap';
		thumbnail.setAttribute('data-index', thumbnailIndex++);
		thumbnail.setAttribute('data-large', closeup_image); // add this
		
		if (typeof(thumbnail_image) == 'string' && thumbnail_image.length > 0) {
			img = document.createElement('img');
			img.src = thumbnail_image;
			thumbnail.appendChild(img);
		};
		gallery.push({
			src: closeup_image,
			title: '&mvt:clean:product:name;'
		});
		return thumbnail;
	};
</script>

jqueryzoom

http://www.jacklmoore.com/zoom/

scripts--variant_changed.js

MivaEvents.SubscribeToEvent('variant_changed', function () {
			gallery.length = 0;
			mainImageZoom.attr('data-index', 0);
			thumbnailIndex = 0;
			outOfStock();
			selectedSwatch();
			updateThumbs(); // Add this
			$('#js-main-image').attr('data-image', ''); // Add this as a fail safe.
		});

scripts--zoom-functions.js

function getLargeImage() {
			var largeImage = $('.thumbnail-wrap').not('.slick-cloned').first().attr('data-large');
			$('#js-main-image').attr('data-image', largeImage);
			reZoom();
		}
		getLargeImage();
		// --- Zoom Triggering for Slow Speeds --- //
		var interval = null;
		$('#js-main-image').on('mouseenter', function() {
			$('#zoom-hold').show();
			interval = setInterval(function(){
				if ( !$('#js-main-image').attr('data-image') ) {
					getLargeImage();
				}
				$('#js-main-image').trigger('mouseleave');
				$('#js-main-image').trigger('mouseenter');
			}, 1000);
		}).on('mouseleave', function(){
			$('#zoom-hold').hide();
			window.clearInterval(interval);  
		});

		function reZoom () {
			$('html:not(.mobile) #js-main-image-zoom img').trigger('zoom.destroy');

			$('html:not(.mobile) #js-main-image-zoom img').zoom({ 
				url: $('#js-main-image').attr('data-image'),
				target: ('#zoom-hold .inner')
			});
		}
		reZoom();
		
		thumbnails.on('click', 'div', function () {
			var thumbnailIndex = $(this).attr('data-index'),
				thumbnailLarge = $(this).attr('data-large');

			mainImageZoom.attr('data-index', thumbnailIndex);
			$('#js-main-image').attr('data-image', thumbnailLarge); // add this
			reZoom(); // add this

		});

scripts-updatethumbs.js

function updateThumbs() {
			$('#js-thumbnails').unslick();
			$('#js-thumbnails').html('');
			var theInterval = setInterval(function () {
			if ($('#js-thumbnails').length > 0) {
				clearInterval(theInterval);
				getLargeImage();
				reZoom();
				//Re-intialize Slick
				$('#js-thumbnails').slick({
					draggable: false,
					slidesToScroll: 1,
					slidesToShow: 4,
					appendArrows: $('#js-thumbnails').parent(),
					responsive: [
						{
							breakpoint: 1040,
							settings: {
								slidesToScroll: 1,
								slidesToShow: 3
							}
						},
						{
							breakpoint: 608,
							settings: {
								slidesToScroll: 1,
								slidesToShow: 2
							}
						}
					]
				});

			}
		   }, 250);
		}

styling.css

/*add the following to pages.css */
@media screen and (min-width: 767px) {
	#zoom-hold {
		position: absolute;
		left: 0;
		top: 0;
		z-index: 9999;
		display: none;
	}
	#zoom-hold .inner{
		background: rgba(255,255,255,.8);
		padding: 200px;
		/* you can change this to be a specific size, and add a loading gif too. */
	}
}