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;
		if (thumbnailIndex === 0) {// add this
			document.getElementById('js-main-image').setAttribute('data-image', closeup_image); // add this
		}// add this
	
		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/

notes.txt

-- Issue found when variant switched and not using thumbnails. working on this. === FIXED see imagemachine.js
-- issue with ajax add to cart, triggers variant_changed. === FIXED see scripts--variantchanged.js + look at notes.

--- This has been updated to work with just image machine.

scripts--PROD.js

ImageMachine.prototype.oninitialize = function (data) {
			gallery.length = 0;
			mainImageZoom.attr('data-index', 0);
			thumbnailIndex = 0;
			this.Initialize(data);
			if (data) {
				updateThumbs();
				//$('#js-main-image').attr('data-image', data[0].image_data[2]);
				$('#js-thumbnails .thumbnail-wrap').first().click();
				reZoom();
			}
		}

scripts--zoom-functions.js

		// --- Zoom Triggering for Slow Speeds --- //
		var interval = null;
		$('#js-main-image').on('mouseenter', function() {
			$('#zoom-hold').show();
			interval = setInterval(function(){
				$('#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');
			$('#zoom-hold .inner').html('');

			$('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

// Use your custom settings for thumbnails when you re-initialize slick.
function updateThumbs() {
			$('#js-thumbnails').unslick();
			if ($('#js-thumbnails').length > 0) {
				//Re-intialize Slick
				$('#js-thumbnails').slick({
					draggable: false,
					lazyLoad: 'ondemand',
					slidesToScroll: 1,
					slidesToShow: 4,
					appendArrows: $('#js-thumbnails').parent(),
					responsive: [
						{
							breakpoint: 1040,
							settings: {
								slidesToScroll: 1,
								slidesToShow: 3
							}
						},
						{
							breakpoint: 608,
							settings: {
								slidesToScroll: 1,
								slidesToShow: 2
							}
						}
					]
				});

			}
		}

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. */
	}
}