Awesome Zoom For Your JetWooCommerce Product Listings

Table of Contents

In this article, we will learn how to add a great zoom on the products listings from JetWooCommerce. That's what we will implement:

To begin with, insert an HTML element

In the same page, post archive or product archive as your JetWooCommerce product grid element. It can be anywhere on the page.

Awesome Zoom For Your JetWooCommerce Product Listings 1

Then, copy paste the code below in the HTML element

<style>
.magnify { position: relative; cursor: none}
.large {
width: 100vw; height: 200vh;
position: absolute;
z-index: 1;
display: none;
}
.small { display: block; }
</style>
<script>
function MagnifierImg(){
var elementImages = document.querySelectorAll('.jet-woo-product-thumbnail');
elementImages.forEach(function(elementImg){
elementImg.classList.add('magnify');
var DIV = document.createElement("div");
DIV.classList.add('large');
elementImg.insertBefore(DIV, elementImg.firstChild);
var LrgImg = elementImg.querySelector('.large + a img');
LrgImg.classList.add('small');
var srcUrl = "url('" + LrgImg.src + "') no-repeat";
DIV.style.background = srcUrl;
});
jQuery(function($){
var native_width = 0;
var native_height = 0;
$(".magnify").bind('mousemove', function(e){
if(!native_width && !native_height)
{
var image_object = new Image();
image_object.src = $(this).find(".small").attr("src");
native_width = image_object.width;
native_height = image_object.height;
}
else
{
var magnify_offset = $(this).offset();
var mx = e.pageX - magnify_offset.left;
var my = e.pageY - magnify_offset.top;

if(mx < $(this).width() && my < $(this).height() && mx > 0 && my > 0)
{
$(this).find(".large").fadeIn(100);
}
else
{
$(this).find(".large").fadeOut(100);
}
if($(this).find(".large").is(":visible"))
{
var rx = Math.round(mx/$(".small").width()*native_width - $(".large").width()/2)*-1;
var ry = Math.round(my/$(".small").height()*native_height - $(".large").height()/2)*-1;
var bgp = rx + "px " + ry + "px";
var px = mx - $(".large").width()/2;
var py = my - $(".large").height()/2;
$(this).find(".large").css({left: px, top: py, backgroundPosition: bgp});
}
}
});
$(".magnify").bind(' mouseleave', function(e){
$(this).find(".large").fadeOut(1);
$(this).find(".large").css({ display: "none"});
});
});
}
MagnifierImg();

document.addEventListener('DOMContentLoaded', function() {
var viewportWidth = window.innerWidth || document.documentElement.clientWidth;
if (viewportWidth < 1740) {
MagnifierImg();
jQuery(function($){
$('.jet-checkboxes-list__button').click(function(){
setInterval( function() {
if( !($('.jet-woo-product-thumbnail').hasClass('magnify')) ) {
MagnifierImg();
}
}, 740);

});
});
}
});
</script>

Finally, enjoy your new Awesome new Product Grid Zoom!

Let me know if you need any help!

Share:

Share on facebook
Share on twitter
Share on linkedin
Comments