Skip to content

Instantly share code, notes, and snippets.

@tessguefen
Last active March 16, 2016 19:51
Show Gist options
  • Save tessguefen/8297c72ea40991a45f1e to your computer and use it in GitHub Desktop.
Save tessguefen/8297c72ea40991a45f1e to your computer and use it in GitHub Desktop.
Zoom Plugin with Variants, on load of page.
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>
<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>
http://www.jacklmoore.com/zoom/
-- 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.
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();
}
}
// --- 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
});
// 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
}
}
]
});
}
}
/*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. */
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment