fancybox 3内の画像ファイル名

Question

文書でこれを見つけることはできませんが、かなり簡単です。 イメージのファイル名をfancyboxにどのように表示しますか？

Answer 1

もちろん、すべての可能なシナリオを含めることはできないため、ドキュメントでは「イメージのファイル名を表示する」方法については説明していません。また、コールバックは、そのようなニーズに合わせて特別に設計されています。特定の段階（コードをロードする前やイメージを表示する直前など）でコードの一部を実行することができます。

ファイル名を表示する場所を指定していません。あなたが内部のキャプションを配置したい場合は、ドキュメントにはキャプションをカスタマイズする方法のいくつかの例を提供 - fancybox 3ではhttp://fancyapps.com/fancybox/3/docs/#faq-2

Answer 2

あなたは、画像の名前を持つ要素にデータ・キャプション属性を追加することができます。例：<a href="myHref" data-caption="myImageName" data-fancybox="myGroup"><img src="mySource" /></a>。

要素の読み込み後に初期化することを忘れないでください。オプションの追加や削除は自由に行ってください。

$("[data-fancybox]").fancybox({ fullScreen: true, thumbs: false, loop: true, touch: true, infoBar: true, buttons: [ 'slideShow', 'fullScreen', //'thumbs', //'share', 'download', //'zoom', 'close' ] });

Fancybox with caption