Cacher is the code snippet organizer for pro developers

// --- Zoom ---//
		$('#js-main-image-zoom').zoom({ 
			url: $('#js-main-image').attr('data-image'),
			target: ('#zoom-hold .inner'),
		});
		
		var mainImageZoom = document.getElementById('js-main-image-zoom');
		var thumbnails = document.getElementById('js-thumbnails');
		for (var i = 0; i < thumbnails.children.length; i++) {
			(function (index) {
				thumbnails.children[i].onclick = function () {
					document.getElementById('js-main-image-zoom').setAttribute('data-index', index);
				}
			})(i);
		};
        $('#js-thumbnails').on('click', 'div', function () {
			 var thumbnailIndex = $(this).attr('data-index'),
             	largeImage = $(this).attr('data-large');

            $('#js-main-image-zoom').attr('data-index', thumbnailIndex);

            $('#js-main-image').attr('data-image', largeImage);
			// Destroy Zoom to get new image.
            $('#js-main-image-zoom').trigger('zoom.destroy');
			
	        // Retrigger zoom to get new image.
			$('#js-main-image-zoom').zoom({ 
				url: $('#js-main-image').attr('data-image'),
				target: ('#zoom-hold .inner'),
			});
        });
		 $('#js-thumbnails div').hover(function () {
			var thumbnailIndex = $(this).attr('data-index'),
             	largeImage = $(this).attr('data-large');

            $('#js-main-image-zoom').attr('data-index', thumbnailIndex);

            $('#js-main-image').attr('data-image', largeImage);
			// Destroy Zoom to get new image.
            $('#js-main-image-zoom').trigger('zoom.destroy');
			
	        // Retrigger zoom to get new image.
			$('#js-main-image-zoom').zoom({ 
				url: $('#js-main-image').attr('data-image'),
				target: ('#zoom-hold .inner'),
			});
			 $('#js-main-image').attr('src', largeImage);
        });
		// Fix issue with Zoom blocking Add to Cart
		$('#js-main-image-zoom').hover( function() {
			$('#zoom-hold').css('display', 'block');
		}, function() {
			$('#zoom-hold').css('display', 'none');
		});