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

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!!!