Zoom Plugin with Variants, on load of page.
/*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. */
}
}
// 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
}
}
]
});
}
}
// --- 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
});
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();
}
}
-- 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.
http://www.jacklmoore.com/zoom/
<mvt:assign name="l.settings:clean:product:name" value="glosub(l.settings:product:name, asciichar(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>
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>