web-dev-qa-db-ja.com

fancyboxをwebpackで使用するには？

私は現在Webページを開発しており、ビルドプロセスでwebpackを使い始めました。 npmからダウンロードしたslick-carrouselプラグインを使用できましたが、fancyboxを動作させることができません！

documentation に記載されているように、npmでダウンロードしてインポートしました。

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);     ->  {}

つまり、slickモジュールは正しくロードされていますが、fancyboxはロードされていません。

どこか fancyboxにjquery変数を認識させるには、imports-loaderを使用する必要があると読みました。だから私はそれをnpm経由でダウンロードし、これを私のwebpack.configファイルに含めました：

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

しかし、それも機能しません。

誰かがこの問題について私に光を与えることはできますか？前もって感謝します！

webpackfancybox
10
Jaditpol

OK。私はなんとかこのような問題を解決しました。

最初に、 Fancybox の代わりに Fancybox 2 をインストールしたことに気づき、最初のアンインストールと最後のインストールを行いました（@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");

そして出来上がり！今はすべてうまくいきます。

11
metaskopia

これは完全に真実ではありません-「ドキュメントに記載されているように、npmからダウンロードしてインポートしました」。 require('fancybox')($)を変数に割り当てる必要はありません。この呼び出しは何も返しません。以下- docs のスニペットです

var $ = require（ 'jquery'）;

require（ 'fancybox'）（$）; <---- 2）

JQueryオブジェクトにfancyboxメソッドがあり、console.log($.fancybox)があるかどうかを確認できます。関数を返す場合は、fancyboxパッケージをコードに正常にインポートしたことを意味します。したがって、エラーの原因を別の場所で探す必要があります。この場合、$.fancybox.openに渡したオブジェクトが正しいかどうかを確認してください。私が知っているように、このオブジェクトのプロパティsrcには、表示したい画像またはビデオへのURLを含める必要があります。のような---（この例 fancybox公式サイトから。

1
Mikhail Shabrikov

私は同じ問題で戦い、モジュールを webpack で自動的にロードできることを発見しました—モジュールを必要に応じてさまざまなプラグインで利用できるようにします ProvidePlugin を介してwebpack.config。 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'
        } )
    ]
};
1
Ito Pizarro

これが私の設定です

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でこれを行うには2つの方法があります。

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属性を適用する必要があります。

1
timofey.com