How to use fancybox with webpack?

Question

I\'m currently developing a webpage and started using webpack in my build process. I\'ve managed to use slick-carrousel plugin downloaded via npm but can\'t make fancybox to

Answer 1

Here's my setup

1) Install Fancybox NPM

npm install @fancyapps/fancybox --save-dev

2) Initialize Fancybox

// Require jQuery (Fancybox dependency)
window.$ = window.jQuery = require('jquery');

// Fancybox
const fancybox = require('@fancyapps/fancybox');
// Fancybox Stylesheet
const fancyboxCSS = require('!style!css!@fancyapps/fancybox/dist/jquery.fancybox.css');

3) Select what elements to open with Fancybox

To attach Fancybox to the images, you need to add the attribute [data-fancybox="optional-gallary-identifier"] to the element.

You can do this manually via HTML or with jQuery. Here are 2 ways you can do this with jQuery.

To open all images with Fancybox (a > img)

$(document).ready(function() {
  $('.lightbox a > img').parent().attr('data-fancybox');
});

To group images into galleries by .lightbox wrapper

$(document).ready(function() {
  $('.lightbox').each(function(i) {
    $(this).find('a > img').parent().attr('data-fancybox', 'group-' + i);
  });
});

If you have any dynamically loaded content, i.e. ajax, you'll need to apply the data-fancybox attribute to the dynamically loaded elements.