Notice removed Authoritative reference needed by Manjunath

occurred May 30, 2020 at 7:13

Bounty Ended with Jafar Pinjar's answer chosen by Manjunath

occurred May 30, 2020 at 7:13

added 7 characters in body

Source Link

edited May 29, 2020 at 11:18

Manjunath

177
7
31

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

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

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

added 11 characters in body

Source Link

edited May 29, 2020 at 5:52

Manjunath

177
7
31

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>
<img<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..

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>
<img class="imgsrc" src="image url here" />

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

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

added 10 characters in body

Source Link

edited May 28, 2020 at 18:06

Manjunath

177
7
31

script error while including Enable zoom feature in custom jstemplate in Magento 2

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>
<img class="imgsrc" src="image url here" />

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

script error while including custom js Magento 2

I am creating zoom feature 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>
<img class="imgsrc" src="image url here" />

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

Enable zoom feature in custom template in Magento 2

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>
<img class="imgsrc" src="image url here" />

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

Notice added Authoritative reference needed by Manjunath

occurred May 28, 2020 at 17:10

Bounty Started worth 50 reputation by Manjunath

occurred May 28, 2020 at 17:10

edited title

Link

edited May 28, 2020 at 16:54

Manjunath

177
7
31

Loading

added 7 characters in body

Source Link

edited May 28, 2020 at 16:28

Manjunath

177
7
31

Loading

added 626 characters in body; edited tags; edited title

Source Link

edited May 28, 2020 at 16:00

Manjunath

177
7
31

Loading

added 19 characters in body

Source Link

edited Dec 19, 2019 at 7:02

Manjunath

177
7
31

Loading

added 13 characters in body

Source Link

edited Dec 19, 2019 at 5:56

Manjunath

177
7
31

Loading

Source Link

asked Dec 18, 2019 at 10:31

Manjunath

177
7
31

Loading

Stack Exchange Network

Return to Question

script error while including Enable zoom feature in custom jstemplate in Magento 2

script error while including custom js Magento 2

Enable zoom feature in custom template in Magento 2