Enable zoom feature in custom template in Magento 2

Question

I am creating zoom feature on images in my custom template,

app/code/Vendor/Module/view/frontend/requirejs-config.js

var config = {
 paths: {
 'custom_zoom': 'Vendor_Module/js/jquery.zoom.js'
 },
shim: {
 'custom_zoom': {
 deps: ['jquery'] 
 }
 }
};

and in app/code/Vendor/Module/view/frontend/templates/custom.phtml

 <style> 
 .contain { 
 position: fixed; 
 right: 15%; 
 top: 15%; 
 width: 200px; 
 height: 220px; 
} 
</style>
<div><img class="imgsrc" src="image url here" /></div>
<div class="contain"></div> 
<script type="text/javascript">
require(['jquery', 'jquery/ui','custom_zoom'], function($){ 
$(document).ready(function(){
 $('.imgsrc') 
 .parent() 
 .zoom({ 
 magnify: 4, 
 target: $('.contain').get(0) 
 }); 
 }); 

Moved jquery.zoom.js into Vendor/Module/view/frontend/web/js directory

But I am getting this error in console in my custom page.

Script error for: custom_zoom

Can anyone help me on this please.. Thanks

• Ekk4rd: The error could be anyting. Can you provide more information about the error, or is this everything you get (maybe at least a backtrace or something like this) ?
• Manjunath: @Ekk4rd, pls tell me what more information i have to update here?can you please use the same code in your test module and check it once
• Bhaumik Upadhyay: There might be an issue in the requirejs-config.js file. Please check if the paths and shim configured correctly here: devdocs.magento.com/guides/v2.3/javascript-dev-guide/javascript/…

Answer 1

I think problem in your requirejs-config.js file, please update like this

var config = {
 paths: {
 custom_zoom: 'Vendor_Module/js/jquery.zoom'
 },
 shim: {
 "custom_zoom": ["jquery"],
 }
};

I hope this may help you!!!