Question

我目前正在开发网页，并在构建过程中开始使用webpack。我设法使用通过npm下载的光滑卡罗塞尔插件，但无法让fancybox工作！

我已经通过npm下载并按照documentation中的说明导入了它：

var $ = require("jquery");
var slick = require("slick-carousel");
var fancybox = require("fancybox")($);

然后在我的代码中，我尝试初始化一个fancybox对象，没有任何反应。它完全没有错误。

$(".filtros__filtrar").on('click', function() {    
  $.fancybox.open({
    src  : '#tns-filtros',
    type : 'inline',
    opts : {
      smallBtn: false
    }
  });
});

如果我对这些变量进行控制台记录，我会得到：

console.log(fancybox);  ->  undefined
console.log(slick);     ->  {}

这意味着光滑模块正确加载但不是fancybox。

Somewhere我读到你必须使用imports-loader来使fancybox识别jquery变量。所以我通过npm下载它并将其包含在我的webpack.config文件中：

module: {
  rules: [
    {
      test: /fancybox[\/\\]dist[\/\\]js[\/\\]jquery.fancybox.cjs.js/,
      use: "imports-loader?jQuery=jquery,$=jquery,this=>window"
    }
  ]
}

但它也不起作用。

有人可以告诉我这个问题吗？提前谢谢！

Answer 1

确定。我设法解决了这个问题。

首先，我意识到我安装了Fancybox 2而不是Fancybox 3所以我卸载了第一个并安装了最后一个（感谢@Mikhail Shabrikov让我意识到这一点！）。

npm uninstall fancybox --save-dev
npm install @fancyapps/fancybox --save-dev

其次，我深入了解Fancybox原始代码并发现它需要将jQuery作为window.jQuery而不是$传递给它，所以在我的要求中我这样做了：

var $ = require("jquery");
window.jQuery = $;  <-- This is what do the magic!!
var slick = require("slick-carousel");
require("@fancyapps/fancybox");

瞧！现在一切都有效。

Answer 2

这不完全正确 - ＆＃34;我已经通过npm下载并按照文档＆＃34;中的说明导入了它。您不必将require('fancybox')($)分配给变量，此调用不返回任何内容。下面 - 它是docs

的摘录

var $ = require（＆＃39; jquery＆＃39;）;

需要（＆＃39;的fancybox＆＃39;）（$）; ＆lt; -------（2）

您可以使用fancybox检查您的jQuery对象是否具有console.log($.fancybox)方法。如果它返回一个函数，则表示您已成功将fancybox包导入代码。所以你应该在另一个地方寻找错误的原因。在这种情况下，请检查传递给$.fancybox.open的对象是否正确。据我所知，此对象的属性src应包含要显示的图像或视频的网址。就像来自fancybox官方网站的this example一样。

Answer 3

我遇到了同样的问题，发现您可以webpack自动加载模块 - 根据需要将它们提供给各种插件 - 通过webpack.config中的ProvidePlugin。 Webpack的documentation涵盖了裸$或jQuery个实例......

webpack.config.js

module.exports = {
    ...
    plugins: [
        new webpack.ProvidePlugin( {
            $: 'jquery',
            jQuery: 'jquery'
        } )
    ]
};

但是，正如metaskopia找到的那样，Fancybox想要window.jQuery。为此，以下工作：

module.exports = {
    ...
    plugins: [
        new webpack.ProvidePlugin( {
            $: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery'
        } )
    ]
};

Answer 4

这是我的设置

1）安装Fancybox NPM

npm install @fancyapps/fancybox --save-dev

2）初始化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）选择要使用Fancybox打开的元素

要将Fancybox附加到图像，需要将[data-fancybox="optional-gallary-identifier"]属性添加到元素。

您可以通过HTML或jQuery手动执行此操作。您可以通过以下两种方法使用jQuery。

要使用Fancybox（a > img）打开所有图像

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

通过.lightbox包装器将图像分组到画廊中

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

如果您有任何动态加载的内容（即ajax），则需要将data-fancybox属性应用于动态加载的元素。

如何使用webpack的fancybox？

4 个答案:

1）安装Fancybox NPM

2）初始化Fancybox

3）选择要使用Fancybox打开的元素