2 added 205 characters in body
source | link

I have implement fancybox feature by the below way,

Try this,

First Step : Add the source files which is required for fancybox implementation.

  1. Add jquery.fancybox.js to the below path

app/design/frontend/{PackageName}/{ThemeName}/web/js/jquery.fancybox.js

  1. Add jquery.fancybox.css to the below path

app/design/frontend/{PackageName}/{ThemeName}/web/css/jquery.fancybox.css

Second Step : Implementation of fancybox feature in to your store

  1. Add requirejs-config.js to the below path.

app/design/frontend/{PackageName}/{ThemeName}/requirejs-config.js

and add the below code in it

var config = {
paths: {
    'fancybox': 'js/jquery.fancybox'
},
shim: {
    'fancybox': {
        deps: ['jquery']
    },
}
};
  1. Final step is to trigger the js wherever you want in my case, I would need it in all the pages so I triggered it in header.phtml inside the theme.

Script to trigger the external js

require(['jquery','fancybox'],function($) {
$(window).load(function () {
     /*alert('load from external jquery');*/
});
});

then you can play youtube video in fancybox popup by adding data-fancybox element to your tag.

Eg :

<a class="btn btn-default2" href="https://youtu.be/7mHaxFcY4QY" data-fancybox>PLAY</a>

Hope it helps anyone, who's trying to add external js to their store. It would be any external script it may owl carousel or box slider js extension etc..,

Peace :)

I have implement fancybox feature by the below way,

Try this,

First Step : Add the source files which is required for fancybox implementation.

  1. Add jquery.fancybox.js to the below path

app/design/frontend/{PackageName}/{ThemeName}/web/js/jquery.fancybox.js

  1. Add jquery.fancybox.css to the below path

app/design/frontend/{PackageName}/{ThemeName}/web/css/jquery.fancybox.css

Second Step : Implementation of fancybox feature in to your store

  1. Add requirejs-config.js to the below path.

app/design/frontend/{PackageName}/{ThemeName}/requirejs-config.js

and add the below code in it

var config = {
paths: {
    'fancybox': 'js/jquery.fancybox'
},
shim: {
    'fancybox': {
        deps: ['jquery']
    },
}
};
  1. Final step is to trigger the js wherever you want in my case, I would need it in all the pages so I triggered it in header.phtml inside the theme.

Script to trigger the external js

require(['jquery','fancybox'],function($) {
$(window).load(function () {
     /*alert('load from external jquery');*/
});
});

Hope it helps anyone, who's trying to add external js to their store. It would be any external script it may owl carousel or box slider js extension etc..,

Peace :)

I have implement fancybox feature by the below way,

Try this,

First Step : Add the source files which is required for fancybox implementation.

  1. Add jquery.fancybox.js to the below path

app/design/frontend/{PackageName}/{ThemeName}/web/js/jquery.fancybox.js

  1. Add jquery.fancybox.css to the below path

app/design/frontend/{PackageName}/{ThemeName}/web/css/jquery.fancybox.css

Second Step : Implementation of fancybox feature in to your store

  1. Add requirejs-config.js to the below path.

app/design/frontend/{PackageName}/{ThemeName}/requirejs-config.js

and add the below code in it

var config = {
paths: {
    'fancybox': 'js/jquery.fancybox'
},
shim: {
    'fancybox': {
        deps: ['jquery']
    },
}
};
  1. Final step is to trigger the js wherever you want in my case, I would need it in all the pages so I triggered it in header.phtml inside the theme.

Script to trigger the external js

require(['jquery','fancybox'],function($) {
$(window).load(function () {
     /*alert('load from external jquery');*/
});
});

then you can play youtube video in fancybox popup by adding data-fancybox element to your tag.

Eg :

<a class="btn btn-default2" href="https://youtu.be/7mHaxFcY4QY" data-fancybox>PLAY</a>

Hope it helps anyone, who's trying to add external js to their store. It would be any external script it may owl carousel or box slider js extension etc..,

Peace :)

1
source | link

I have implement fancybox feature by the below way,

Try this,

First Step : Add the source files which is required for fancybox implementation.

  1. Add jquery.fancybox.js to the below path

app/design/frontend/{PackageName}/{ThemeName}/web/js/jquery.fancybox.js

  1. Add jquery.fancybox.css to the below path

app/design/frontend/{PackageName}/{ThemeName}/web/css/jquery.fancybox.css

Second Step : Implementation of fancybox feature in to your store

  1. Add requirejs-config.js to the below path.

app/design/frontend/{PackageName}/{ThemeName}/requirejs-config.js

and add the below code in it

var config = {
paths: {
    'fancybox': 'js/jquery.fancybox'
},
shim: {
    'fancybox': {
        deps: ['jquery']
    },
}
};
  1. Final step is to trigger the js wherever you want in my case, I would need it in all the pages so I triggered it in header.phtml inside the theme.

Script to trigger the external js

require(['jquery','fancybox'],function($) {
$(window).load(function () {
     /*alert('load from external jquery');*/
});
});

Hope it helps anyone, who's trying to add external js to their store. It would be any external script it may owl carousel or box slider js extension etc..,

Peace :)