Magento 2 FancyBox Implementation for youtube videosHow to load custom module js file in magento 2?Bootstrap Popover error: undefined is not a functionunable to set select value optionsjquery not defined error in magento 2Import attribute for Youtube videos in ProductsPass jQuery value to Observer in Magento 2jquery fancybox for magento 2Validation Error with jQuery-UI Autocomplete and KnockoutJs - Magento 2magento 2 widget integration on order sucess pageMagento 2.2.5 Mini cart not showing items or subtotalConfigure Magento to use Elasticsearch for Magento ver. 2.2.4 Open Source
What exactly is ineptocracy?
files created then deleted at every second in tmp directory
Unlock My Phone! February 2018
Getting extremely large arrows with tikzcd
Implication of namely
Processor speed limited at 0.4 Ghz
Rotate ASCII Art by 45 Degrees
How do conventional missiles fly?
Do Iron Man suits sport waste management systems?
Are British MPs missing the point, with these 'Indicative Votes'?
Ambiguity in the definition of entropy
Can a virus destroy the BIOS of a modern computer?
In Bayesian inference, why are some terms dropped from the posterior predictive?
Can compressed videos be decoded back to their uncompresed original format?
How to remove border from elements in the last row?
Was the old ablative pronoun "med" or "mēd"?
What Exploit Are These User Agents Trying to Use?
What is the opposite of "eschatology"?
What do you call someone who asks many questions?
Why didn't Boeing produce its own regional jet?
What's the meaning of "Sollensaussagen"?
Why were 5.25" floppy drives cheaper than 8"?
What are the G forces leaving Earth orbit?
Notepad++ delete until colon for every line with replace all
Magento 2 FancyBox Implementation for youtube videos
How to load custom module js file in magento 2?Bootstrap Popover error: undefined is not a functionunable to set select value optionsjquery not defined error in magento 2Import attribute for Youtube videos in ProductsPass jQuery value to Observer in Magento 2jquery fancybox for magento 2Validation Error with jQuery-UI Autocomplete and KnockoutJs - Magento 2magento 2 widget integration on order sucess pageMagento 2.2.5 Mini cart not showing items or subtotalConfigure Magento to use Elasticsearch for Magento ver. 2.2.4 Open Source
Am implementing fancybox in magento 2, which has been implemented in magento 1 but in M2.2x shows a require js implementation and I have done that so but still the issue persist.
NOTE : The issue after implementing external i.e., fancybox js there is error in console stating that require jquery.
Blockquote
Guide me to implement fancybox for youtube videos
magento2 magento2.2 jquery modal-popup
asked Jan 20 '18 at 12:54
Prathap GunasekaranPrathap Gunasekaran
1,6231618
add a comment |
Am implementing fancybox in magento 2, which has been implemented in magento 1 but in M2.2x shows a require js implementation and I have done that so but still the issue persist.
NOTE : The issue after implementing external i.e., fancybox js there is error in console stating that require jquery.
Blockquote
Guide me to implement fancybox for youtube videos
magento2 magento2.2 jquery modal-popup
asked Jan 20 '18 at 12:54
Prathap GunasekaranPrathap Gunasekaran
1,6231618
What issue are you facing with require js ?
– Manthan Dave
Jan 20 '18 at 13:04
I have tried this but it gives me jquery is not defied magento.stackexchange.com/questions/85851/…
– Prathap Gunasekaran
Jan 21 '18 at 15:15
add a comment |
Am implementing fancybox in magento 2, which has been implemented in magento 1 but in M2.2x shows a require js implementation and I have done that so but still the issue persist.
NOTE : The issue after implementing external i.e., fancybox js there is error in console stating that require jquery.
Blockquote
Guide me to implement fancybox for youtube videos
magento2 magento2.2 jquery modal-popup
asked Jan 20 '18 at 12:54
Prathap GunasekaranPrathap Gunasekaran
1,6231618
Am implementing fancybox in magento 2, which has been implemented in magento 1 but in M2.2x shows a require js implementation and I have done that so but still the issue persist.
NOTE : The issue after implementing external i.e., fancybox js there is error in console stating that require jquery.
Blockquote
Guide me to implement fancybox for youtube videos
magento2 magento2.2 jquery modal-popup
magento2 magento2.2 jquery modal-popup
asked Jan 20 '18 at 12:54
Prathap GunasekaranPrathap Gunasekaran
1,6231618
asked Jan 20 '18 at 12:54
Prathap GunasekaranPrathap Gunasekaran
1,6231618
edited 18 hours ago
Prathap Gunasekaran
asked Jan 20 '18 at 12:54
Prathap GunasekaranPrathap Gunasekaran
1,6231618
asked Jan 20 '18 at 12:54
Prathap GunasekaranPrathap Gunasekaran
1,6231618
asked Jan 20 '18 at 12:54
Prathap GunasekaranPrathap Gunasekaran
1,6231618
1,6231618
What issue are you facing with require js ?
– Manthan Dave
Jan 20 '18 at 13:04
I have tried this but it gives me jquery is not defied magento.stackexchange.com/questions/85851/…
– Prathap Gunasekaran
Jan 21 '18 at 15:15
add a comment |
What issue are you facing with require js ?
– Manthan Dave
Jan 20 '18 at 13:04
I have tried this but it gives me jquery is not defied magento.stackexchange.com/questions/85851/…
– Prathap Gunasekaran
Jan 21 '18 at 15:15
What issue are you facing with require js ?
– Manthan Dave
Jan 20 '18 at 13:04
What issue are you facing with require js ?
– Manthan Dave
Jan 20 '18 at 13:04
I have tried this but it gives me jquery is not defied magento.stackexchange.com/questions/85851/…
– Prathap Gunasekaran
Jan 21 '18 at 15:15
I have tried this but it gives me jquery is not defied magento.stackexchange.com/questions/85851/…
– Prathap Gunasekaran
Jan 21 '18 at 15:15
add a comment |
2 Answers
2
active
oldest
votes
It's not possible to say what issue you are having, as you don't explain your implementation or the error you are getting. But i'll walk through a way to set this up (there are many ways to do this, other might add other solutions).
This method will use a theme to get the needed files in place, so make sure you have a theme set up and it's set in the admin (see more about that here)
In the admin, create a cms page (content->pages). You can call it anything you like, for this i'll be calling mine fancy-box. Inside this page place in the code for the content you want to display and the script that will call the fancy box js onto the page (you will be using different content here, i'm just grabbing an image to testing):
<a href="media url="wysiwyg/e5e9271c7b7ac02abc6c6de59c8d85e3.png"" data-fancybox data-caption="My caption">
<img class="" src="media url="wysiwyg/e5e9271c7b7ac02abc6c6de59c8d85e3.png"" alt="" />
</a>
<script type="text/x-magento-init">
"*":
"js/jquery.fancybox":
</script>
I'm not going to get too deep into what the script is doing (click here is get a really good explanation but just know that this script is going to call in the jquery.fancybox.js file.
Speaking of that JS file, we need to put that and the CSS file to our project. After downloading the fancy box content, place the CSS file here:
app/design/frontend/namespace/theme/web/css/jquery.fancybox.css
There are a few different ways to get CSS on a page, but here we are just going to call it with the XML file that can set CSS in the head of the whole site.
app/design/frontend/namespace/theme/Magento_Theme/layout/default_head_blocks.xml
Inside this file, call the CSS file with this code:
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<css src="css/jquery.fancybox.css" />
</head>
</page>
Your JS file is going to be called by the cms page, but we need to place it in the right spot and we need to declare it to Require JS. Place your JS file here:
app/design/frontend/namespace/theme/web/js/jquery.fancybox.js
And for your Require JS:
app/design/frontend/namespace/theme/requirejs-config.js
Require is very picky about it's definitions, so make sure it's correct to your file structure and naming, for us that means this:
var config =
map:
'*':
fancybox: 'js/jquery.fancybox'
;
This will set fancybox in the global namespace for us to use.
Just to recap, this is what your theme files should look like:
At this point you should be able to clear your cache and hit the url of the page you set up in the cms pages (for me it's http://127.0.0.1:8888/magento_222/fancy-box since i'm using mamp). If you need to double check anything, make sure that the files are all being loaded in your network tab by searching for fancy. You should see your JS and CSS files there:
If anything here still isn't working for you, add onto your question and i'll see what might be the issue for you.
answered Jan 20 '18 at 22:06
circlesixcirclesix
2,99721547
1
That cat made me giggle :D
– Bare Feet
Jan 20 '18 at 22:17
thanks for the response, I'll try it and let you in small span of time.
– Prathap Gunasekaran
Jan 21 '18 at 16:12
add a comment |
I have implement fancybox feature by the below way,
Try this,
First Step : Add the source files which is required for fancybox implementation.
- Add jquery.fancybox.js to the below path
app/design/frontend/PackageName/ThemeName/web/js/jquery.fancybox.js
- 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
- 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']
,
;
- 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 :)
answered Mar 15 at 8:14
Prathap GunasekaranPrathap Gunasekaran
1,6231618
add a comment |
Your Answer
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "479"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: false,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: null,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fmagento.stackexchange.com%2fquestions%2f210280%2fmagento-2-fancybox-implementation-for-youtube-videos%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
It's not possible to say what issue you are having, as you don't explain your implementation or the error you are getting. But i'll walk through a way to set this up (there are many ways to do this, other might add other solutions).
This method will use a theme to get the needed files in place, so make sure you have a theme set up and it's set in the admin (see more about that here)
In the admin, create a cms page (content->pages). You can call it anything you like, for this i'll be calling mine fancy-box. Inside this page place in the code for the content you want to display and the script that will call the fancy box js onto the page (you will be using different content here, i'm just grabbing an image to testing):
<a href="media url="wysiwyg/e5e9271c7b7ac02abc6c6de59c8d85e3.png"" data-fancybox data-caption="My caption">
<img class="" src="media url="wysiwyg/e5e9271c7b7ac02abc6c6de59c8d85e3.png"" alt="" />
</a>
<script type="text/x-magento-init">
"*":
"js/jquery.fancybox":
</script>
I'm not going to get too deep into what the script is doing (click here is get a really good explanation but just know that this script is going to call in the jquery.fancybox.js file.
Speaking of that JS file, we need to put that and the CSS file to our project. After downloading the fancy box content, place the CSS file here:
app/design/frontend/namespace/theme/web/css/jquery.fancybox.css
There are a few different ways to get CSS on a page, but here we are just going to call it with the XML file that can set CSS in the head of the whole site.
app/design/frontend/namespace/theme/Magento_Theme/layout/default_head_blocks.xml
Inside this file, call the CSS file with this code:
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<css src="css/jquery.fancybox.css" />
</head>
</page>
Your JS file is going to be called by the cms page, but we need to place it in the right spot and we need to declare it to Require JS. Place your JS file here:
app/design/frontend/namespace/theme/web/js/jquery.fancybox.js
And for your Require JS:
app/design/frontend/namespace/theme/requirejs-config.js
Require is very picky about it's definitions, so make sure it's correct to your file structure and naming, for us that means this:
var config =
map:
'*':
fancybox: 'js/jquery.fancybox'
;
This will set fancybox in the global namespace for us to use.
Just to recap, this is what your theme files should look like:
At this point you should be able to clear your cache and hit the url of the page you set up in the cms pages (for me it's http://127.0.0.1:8888/magento_222/fancy-box since i'm using mamp). If you need to double check anything, make sure that the files are all being loaded in your network tab by searching for fancy. You should see your JS and CSS files there:
If anything here still isn't working for you, add onto your question and i'll see what might be the issue for you.
answered Jan 20 '18 at 22:06
circlesixcirclesix
2,99721547
1
That cat made me giggle :D
– Bare Feet
Jan 20 '18 at 22:17
thanks for the response, I'll try it and let you in small span of time.
– Prathap Gunasekaran
Jan 21 '18 at 16:12
add a comment |
It's not possible to say what issue you are having, as you don't explain your implementation or the error you are getting. But i'll walk through a way to set this up (there are many ways to do this, other might add other solutions).
This method will use a theme to get the needed files in place, so make sure you have a theme set up and it's set in the admin (see more about that here)
In the admin, create a cms page (content->pages). You can call it anything you like, for this i'll be calling mine fancy-box. Inside this page place in the code for the content you want to display and the script that will call the fancy box js onto the page (you will be using different content here, i'm just grabbing an image to testing):
<a href="media url="wysiwyg/e5e9271c7b7ac02abc6c6de59c8d85e3.png"" data-fancybox data-caption="My caption">
<img class="" src="media url="wysiwyg/e5e9271c7b7ac02abc6c6de59c8d85e3.png"" alt="" />
</a>
<script type="text/x-magento-init">
"*":
"js/jquery.fancybox":
</script>
I'm not going to get too deep into what the script is doing (click here is get a really good explanation but just know that this script is going to call in the jquery.fancybox.js file.
Speaking of that JS file, we need to put that and the CSS file to our project. After downloading the fancy box content, place the CSS file here:
app/design/frontend/namespace/theme/web/css/jquery.fancybox.css
There are a few different ways to get CSS on a page, but here we are just going to call it with the XML file that can set CSS in the head of the whole site.
app/design/frontend/namespace/theme/Magento_Theme/layout/default_head_blocks.xml
Inside this file, call the CSS file with this code:
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<css src="css/jquery.fancybox.css" />
</head>
</page>
Your JS file is going to be called by the cms page, but we need to place it in the right spot and we need to declare it to Require JS. Place your JS file here:
app/design/frontend/namespace/theme/web/js/jquery.fancybox.js
And for your Require JS:
app/design/frontend/namespace/theme/requirejs-config.js
Require is very picky about it's definitions, so make sure it's correct to your file structure and naming, for us that means this:
var config =
map:
'*':
fancybox: 'js/jquery.fancybox'
;
This will set fancybox in the global namespace for us to use.
Just to recap, this is what your theme files should look like:
At this point you should be able to clear your cache and hit the url of the page you set up in the cms pages (for me it's http://127.0.0.1:8888/magento_222/fancy-box since i'm using mamp). If you need to double check anything, make sure that the files are all being loaded in your network tab by searching for fancy. You should see your JS and CSS files there:
If anything here still isn't working for you, add onto your question and i'll see what might be the issue for you.
answered Jan 20 '18 at 22:06
circlesixcirclesix
2,99721547
1
That cat made me giggle :D
– Bare Feet
Jan 20 '18 at 22:17
thanks for the response, I'll try it and let you in small span of time.
– Prathap Gunasekaran
Jan 21 '18 at 16:12
add a comment |
It's not possible to say what issue you are having, as you don't explain your implementation or the error you are getting. But i'll walk through a way to set this up (there are many ways to do this, other might add other solutions).
This method will use a theme to get the needed files in place, so make sure you have a theme set up and it's set in the admin (see more about that here)
In the admin, create a cms page (content->pages). You can call it anything you like, for this i'll be calling mine fancy-box. Inside this page place in the code for the content you want to display and the script that will call the fancy box js onto the page (you will be using different content here, i'm just grabbing an image to testing):
<a href="media url="wysiwyg/e5e9271c7b7ac02abc6c6de59c8d85e3.png"" data-fancybox data-caption="My caption">
<img class="" src="media url="wysiwyg/e5e9271c7b7ac02abc6c6de59c8d85e3.png"" alt="" />
</a>
<script type="text/x-magento-init">
"*":
"js/jquery.fancybox":
</script>
I'm not going to get too deep into what the script is doing (click here is get a really good explanation but just know that this script is going to call in the jquery.fancybox.js file.
Speaking of that JS file, we need to put that and the CSS file to our project. After downloading the fancy box content, place the CSS file here:
app/design/frontend/namespace/theme/web/css/jquery.fancybox.css
There are a few different ways to get CSS on a page, but here we are just going to call it with the XML file that can set CSS in the head of the whole site.
app/design/frontend/namespace/theme/Magento_Theme/layout/default_head_blocks.xml
Inside this file, call the CSS file with this code:
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<css src="css/jquery.fancybox.css" />
</head>
</page>
Your JS file is going to be called by the cms page, but we need to place it in the right spot and we need to declare it to Require JS. Place your JS file here:
app/design/frontend/namespace/theme/web/js/jquery.fancybox.js
And for your Require JS:
app/design/frontend/namespace/theme/requirejs-config.js
Require is very picky about it's definitions, so make sure it's correct to your file structure and naming, for us that means this:
var config =
map:
'*':
fancybox: 'js/jquery.fancybox'
;
This will set fancybox in the global namespace for us to use.
Just to recap, this is what your theme files should look like:
At this point you should be able to clear your cache and hit the url of the page you set up in the cms pages (for me it's http://127.0.0.1:8888/magento_222/fancy-box since i'm using mamp). If you need to double check anything, make sure that the files are all being loaded in your network tab by searching for fancy. You should see your JS and CSS files there:
If anything here still isn't working for you, add onto your question and i'll see what might be the issue for you.
answered Jan 20 '18 at 22:06
circlesixcirclesix
2,99721547
It's not possible to say what issue you are having, as you don't explain your implementation or the error you are getting. But i'll walk through a way to set this up (there are many ways to do this, other might add other solutions).
This method will use a theme to get the needed files in place, so make sure you have a theme set up and it's set in the admin (see more about that here)
In the admin, create a cms page (content->pages). You can call it anything you like, for this i'll be calling mine fancy-box. Inside this page place in the code for the content you want to display and the script that will call the fancy box js onto the page (you will be using different content here, i'm just grabbing an image to testing):
<a href="media url="wysiwyg/e5e9271c7b7ac02abc6c6de59c8d85e3.png"" data-fancybox data-caption="My caption">
<img class="" src="media url="wysiwyg/e5e9271c7b7ac02abc6c6de59c8d85e3.png"" alt="" />
</a>
<script type="text/x-magento-init">
"*":
"js/jquery.fancybox":
</script>
I'm not going to get too deep into what the script is doing (click here is get a really good explanation but just know that this script is going to call in the jquery.fancybox.js file.
Speaking of that JS file, we need to put that and the CSS file to our project. After downloading the fancy box content, place the CSS file here:
app/design/frontend/namespace/theme/web/css/jquery.fancybox.css
There are a few different ways to get CSS on a page, but here we are just going to call it with the XML file that can set CSS in the head of the whole site.
app/design/frontend/namespace/theme/Magento_Theme/layout/default_head_blocks.xml
Inside this file, call the CSS file with this code:
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<css src="css/jquery.fancybox.css" />
</head>
</page>
Your JS file is going to be called by the cms page, but we need to place it in the right spot and we need to declare it to Require JS. Place your JS file here:
app/design/frontend/namespace/theme/web/js/jquery.fancybox.js
And for your Require JS:
app/design/frontend/namespace/theme/requirejs-config.js
Require is very picky about it's definitions, so make sure it's correct to your file structure and naming, for us that means this:
var config =
map:
'*':
fancybox: 'js/jquery.fancybox'
;
This will set fancybox in the global namespace for us to use.
Just to recap, this is what your theme files should look like:
At this point you should be able to clear your cache and hit the url of the page you set up in the cms pages (for me it's http://127.0.0.1:8888/magento_222/fancy-box since i'm using mamp). If you need to double check anything, make sure that the files are all being loaded in your network tab by searching for fancy. You should see your JS and CSS files there:
If anything here still isn't working for you, add onto your question and i'll see what might be the issue for you.
answered Jan 20 '18 at 22:06
circlesixcirclesix
2,99721547
answered Jan 20 '18 at 22:06
circlesixcirclesix
2,99721547
answered Jan 20 '18 at 22:06
circlesixcirclesix
2,99721547
answered Jan 20 '18 at 22:06
circlesixcirclesix
2,99721547
2,99721547
1
That cat made me giggle :D
– Bare Feet
Jan 20 '18 at 22:17
thanks for the response, I'll try it and let you in small span of time.
– Prathap Gunasekaran
Jan 21 '18 at 16:12
add a comment |
1
That cat made me giggle :D
– Bare Feet
Jan 20 '18 at 22:17
thanks for the response, I'll try it and let you in small span of time.
– Prathap Gunasekaran
Jan 21 '18 at 16:12
1
1
That cat made me giggle :D
– Bare Feet
Jan 20 '18 at 22:17
That cat made me giggle :D
– Bare Feet
Jan 20 '18 at 22:17
thanks for the response, I'll try it and let you in small span of time.
– Prathap Gunasekaran
Jan 21 '18 at 16:12
thanks for the response, I'll try it and let you in small span of time.
– Prathap Gunasekaran
Jan 21 '18 at 16:12
add a comment |
I have implement fancybox feature by the below way,
Try this,
First Step : Add the source files which is required for fancybox implementation.
- Add jquery.fancybox.js to the below path
app/design/frontend/PackageName/ThemeName/web/js/jquery.fancybox.js
- 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
- 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']
,
;
- 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 :)
answered Mar 15 at 8:14
Prathap GunasekaranPrathap Gunasekaran
1,6231618
add a comment |
I have implement fancybox feature by the below way,
Try this,
First Step : Add the source files which is required for fancybox implementation.
- Add jquery.fancybox.js to the below path
app/design/frontend/PackageName/ThemeName/web/js/jquery.fancybox.js
- 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
- 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']
,
;
- 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 :)
answered Mar 15 at 8:14
Prathap GunasekaranPrathap Gunasekaran
1,6231618
add a comment |
I have implement fancybox feature by the below way,
Try this,
First Step : Add the source files which is required for fancybox implementation.
- Add jquery.fancybox.js to the below path
app/design/frontend/PackageName/ThemeName/web/js/jquery.fancybox.js
- 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
- 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']
,
;
- 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 :)
answered Mar 15 at 8:14
Prathap GunasekaranPrathap Gunasekaran
1,6231618
I have implement fancybox feature by the below way,
Try this,
First Step : Add the source files which is required for fancybox implementation.
- Add jquery.fancybox.js to the below path
app/design/frontend/PackageName/ThemeName/web/js/jquery.fancybox.js
- 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
- 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']
,
;
- 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 :)
answered Mar 15 at 8:14
Prathap GunasekaranPrathap Gunasekaran
1,6231618
edited Mar 15 at 8:54
answered Mar 15 at 8:14
Prathap GunasekaranPrathap Gunasekaran
1,6231618
answered Mar 15 at 8:14
Prathap GunasekaranPrathap Gunasekaran
1,6231618
answered Mar 15 at 8:14
Prathap GunasekaranPrathap Gunasekaran
1,6231618
1,6231618
add a comment |
add a comment |
Thanks for contributing an answer to Magento Stack Exchange!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fmagento.stackexchange.com%2fquestions%2f210280%2fmagento-2-fancybox-implementation-for-youtube-videos%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
What issue are you facing with require js ?
– Manthan Dave
Jan 20 '18 at 13:04
I have tried this but it gives me jquery is not defied magento.stackexchange.com/questions/85851/…
– Prathap Gunasekaran
Jan 21 '18 at 15:15