Table of Contents
In this article, we will learn how to add a great zoom on the products listings from JetWooBuilder. That's what we will implement:
You might be wondering what is JetWooBuilder exactly?
JetWooBuilder is an add-on that offers a variety of elements to help you customize your ecommerce website. You get beautiful, customisable layout options for your single product and products listings templates.
It is a great fit for many WooCommerce website, mostly when combined with JetSmartFilters!
JetWooBuilder offers the following features:
- Product categories grid or carousel
- Products listings grid, carousel or list
- Fully customizable single product layouts
- A variety of user friendly elements that are easy to use, even for beginners.
- Highly customisable with no coding requirements
- Good customer support to sort your glitches.
- Perfect integration with WooCommerce websites on Elementor.
You can give your website a JetWooBuilder upgrade and enjoy these features for as low as $19 per year.
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.
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!
Element.how also provides premium tutorials showing awesome advanced designs, check them out here.
And get exclusive Elementor related discounts here
Checkout the Elementor Addon Finder directly
