I need to add this to Magento 2
<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/[email protected]/dist/jquery.fancybox.min.css" />
<script src="https://cdn.jsdelivr.net/gh/fancyapps/[email protected]/dist/jquery.fancybox.min.js"></script>
To be able to use fancybox on CMS pages
<a data-fancybox="gallery" href="big_1.jpg"><img src="small_1.jpg"></a>
<a data-fancybox="gallery" href="big_2.jpg"><img src="small_2.jpg"></a>
But either it:
- breaks the Ultimo Theme and works
or
- not breaks the Ultimo Theme and doesn't work
I have tried several ways to do this in the theme default.xml and or theme default_head_blocks.xml
Can someone please shed some light on this? Thanks,
---UPDATE---
I have tested the solution in the link provided below, and it does not work.
After adding requirejs-config.js to the theme root, the following lines are loaded:
<script type="text/javascript" src="http://domain.xyz/pub/static/version1549118304/frontend/Infortis/ultimo/sv_SE/requirejs/require.js"></script>
<script type="text/javascript" src="http://domain.xyz/pub/static/version1549118304/frontend/Infortis/ultimo/sv_SE/mage/requirejs/mixins.js"></script>
<script type="text/javascript" src="http://domain.xyz/pub/static/version1549118304/frontend/Infortis/ultimo/sv_SE/requirejs-config.js"></script>
I have also set data-fancybox to all links.
Still doesn't work.
Where should I put the following code?
require(['jquery', 'fancybox', 'domReady!'], function($, fancybox, doc) {
var fancyboxExample = {
openModal: function() {
$.fancybox.open(this.$modal);
},
closeModal: function() {
$.fancybox.close(true);
}
};
// Initialise
fancyboxExample.init();
});
requireJSto add new scripts. Here's how magento.stackexchange.com/questions/158894/…