Skip to content

Instantly share code, notes, and snippets.

@steveosoule
Forked from tessguefen/HTML-on-Product-Display
Last active August 29, 2015 14:26
Show Gist options
  • Save steveosoule/5235a26d03f6adcedc0b to your computer and use it in GitHub Desktop.
Save steveosoule/5235a26d03f6adcedc0b 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;
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/
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.
});
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
});
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);
}
/*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