0

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/fancybox@3.5.6/dist/jquery.fancybox.min.css" />
<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.6/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();
});
  • 1
    jQuery is already included in Magento, and you have to use requireJS to add new scripts. Here's how magento.stackexchange.com/questions/158894/… – Alex Dinca Feb 2 at 12:51
  • Possible duplicate of jquery fancybox for magento 2 – Alex Dinca Feb 2 at 12:52
  • Thank's, I'll try that, please let me get back with the results. – Alldo Feb 2 at 13:54
  • Doesn't work. What does "Your JS" mean, is that a custom JS that needs to be loaded? require(['jquery', 'fancybox', 'domReady!'], function($, fancybox, doc) { var fancyboxExample = { openModal: function() { $.fancybox.open(this.$modal); }, closeModal: function() { $.fancybox.close(true); } }; // Initialise fancyboxExample.init(); }); – Alldo Feb 2 at 14:43
0

Solved, just needed to add the .css :-)

This solution works: jquery fancybox for magento 2

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.