We Have Created a Custom zoom effect based on the move movement on the Product images Added the events, function, Template/SCSS Updates along with this
events: {
"click [data-action='go-back']": "goBack",
'mouseover [data-action="modal-main"]': "modalMainImage",
'mouseout [data-action="modal-main"]': "resetImageScale",
'mousemove [data-action="modal-main"]': "mouseMove",
},
modalMainImage: function (e) {
$(e.currentTarget).css({
transform: "scale(" + $(e.currentTarget).attr("data-scale") + ")",
});
},
resetImageScale: function (e) {
$(e.currentTarget).css({ transform: "scale(1)" });
},
mouseMove: function (e) {
$(e.currentTarget).css({
"transform-origin":
((e.pageX - $(e.currentTarget).offset().left) /
$(e.currentTarget).width()) *
100 +
"% " +
((e.pageY - $(e.currentTarget).offset().top) /
$(e.currentTarget).height()) *
100 +
"%",
});
}
////// TPL
<div>
<div class="modal-item-header"> <img data-action="modal-main" class="modal-image" src="{{getExtensionAssetsPathWithDefault data.thumbnail "img/no_image_available.jpeg"}}" alt="{{data.displayname}}" data-scale="1.5">
</div>
<h3>{{data.displayname}}</h3>
{{#if data.modaldata}}
<hr>
<br>
<div class="modal-data-content">{{{data.modaldata}}}</div>
</div>
////// SCSS
.modal-image {
max-height: 200px;
transition: all 0.3s ease-in-out;
}
.modal-item-header {
text-align: center;
overflow: hidden;
}