Fancybox v4 Options - オプション

以下は、Fancybox v4 コンポーネントのコアによって設定されるデフォルトのオプション(Option)です。

設定例

// Change defaults（設定例１）
Fancybox.defaults.infinite = 0;

// Start Fancybox with custom options when user clicks on the matching element（設定例２）
Fancybox.bind("[data-fancybox]", {
  infinite: false,
});

// Immediately start Fancybox with custom options（設定例３）
Fancybox.show(
  [
    {
      src: "https://lipsum.app/id/98/800x600",
      type: "image",
    },
    {
      src: "https://lipsum.app/id/99/800x600",
      type: "image",
    },
  ],
  {
    infinite: false,
  }
);

**Fancybox v4 Option 一覧**
option名 {値の型}	設定値
startIndex {Number}	開始時のアクティブなスライドのインデックス。デフォルト： 0
preload {Number}	アクティブなスライドの前後にプリロードするスライドの数。デフォルト： 1
infinite {Boolean}	ナビゲーションは無限である必要があります。デフォルト： true
showClass {String\|false}	コンテンツを表示するためにコンテンツに適用するクラス名。デフォルト: fancybox-zoomInUp 可能な値: fancybox-fadeIn, fancybox-zoomInUp または false
hideClass {String\|false}	非表示にするコンテンツに適用するクラス名。デフォルト: fancybox-fadeOut 可能な値:fancybox-fadeOut, fancybox-zoomOutDown または false 。
animated {Boolean}	背景とUI要素が開始/終了時にフェードイン/フェードアウトする必要があります。デフォルト：true
hideScrollbar {Boolean}	ブラウザのスクロールバーを非表示にする必要がある場合。デフォルト：true
parentEl {HTMLElement\|null}	主構造を含む要素。デフォルト:fancybox-fadeOut 要素が指定されていない場合、コンテナーはの子のリストの末尾に追加されます。 nulldocument.body
mainClass {String\|null}	コンテナーのカスタムクラス名または複数のスペースで区切られたクラス名。デフォルト：null
autoFocus {Boolean}	コンテンツを表示した後、最初にフォーカス可能な要素にフォーカスを設定します。デフォルト：true
trapFocus {Boolean}	ファンシーボックス内にフォーカスをトラップします。デフォルト：true
placeFocusBack {Boolean}	Fancyboxを閉じた後、フォーカスをトリガー要素に戻します。デフォルト：true
click {String\|function}	ユーザーが背景をクリックしたときに実行するアクション。デフォルト: close 可能な値:close, next または custom function 。
closeButton {String}	閉じるボタンの位置。デフォルト: 可能な値:inside 可能な値:inside (over the content) または outside (at top right corner of viewport) 。
dragToClose {Boolean}	ユーザーがコンテンツを上下にドラッグしてインスタンスを閉じることができるようにします。デフォルト：true
keyboard {Object\|false}	キーボードナビゲーションを有効にします。デフォルト： { Escape: "close", Delete: "close", Backspace: "close", PageUp: "next", PageDown: "prev", ArrowUp: "next", ArrowDown: "prev", ArrowRight: "next", ArrowLeft: "prev", } 注: オブジェクト・キーとして KeyboardEvent.code を使用し、任意の API インスタンス・メソッドを値として使用します。
template {Object}	さまざまな要素の HTML テンプレート。デフォルト： { // Close button icon closeButton: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" tabindex="-1"><path d="M20 20L4 4m16 0L4 20"/></svg>', // Loading indicator icon spinner: '<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="25 25 50 50" tabindex="-1"><circle cx="50" cy="50" r="20"/></svg>', // Main container element main: null, } 注: このtemplate.mainオプションが指定されていない場合、構造体はデフォルトで次のように生成されます。 <div class="fancybox__container" role="dialog" aria-modal="true" aria-hidden="true" aria-label="{{MODAL}}" tabindex="-1" > <div class="fancybox__backdrop"></div> <div class="fancybox__carousel"></div> </div>
l10n {Object}	文字列のローカリゼーション。デフォルト： { CLOSE: "Close", NEXT: "Next", PREV: "Previous", MODAL: "You can close this modal content with the ESC key", ERROR: "Something Went Wrong, Please Try Again Later", IMAGE_ERROR: "Image Not Found", ELEMENT_NOT_FOUND: "HTML Element Not Found", AJAX_NOT_FOUND: "Error Loading AJAX : Not Found", AJAX_FORBIDDEN: "Error Loading AJAX : Forbidden", IFRAME_ERROR: "Error Loading Page", } 言語を変更するには: 1. 翻訳オブジェクトを作成します。たとえば、import de from "@fancyapps/ui/src/Fancybox/l10n/de"; 2. Pass l10n: de オプションとして渡すか、デフォルトを変更します。defaults: Fancybox.defaults.l10n = de;.
groupAll {Boolean}	一致するすべての要素を1つのグループにグループ化する必要があります。デフォルト：false 例： Fancybox.bind( 'a[href=".jpg"], a[href=".jpeg"], a[href=".png"], a[href=".gif"]', { groupAll: true, } );
groupAttr {String\|false}	グループ化に使用する属性の名前。デフォルト：data-fancybox 例 (グループ化を無効にするため): Fancybox.bind('[data-fancybox="single"]', { groupAttr: false, });
caption {Function\|null}	各スライドのキャプションコンテンツをカスタマイズするオプション機能、例。
Carousel {Object}	メインカルーセルのオプションを拡張するオプションのオブジェクト。これを使用して、ナビゲーション矢印などをカスタマイズできます。 navigation arrows ≫

Fancybox v4 Option 一覧

option名 {値の型}

設定値

startIndex {Number}

開始時のアクティブなスライドのインデックス。デフォルト： 0

preload {Number}

アクティブなスライドの前後にプリロードするスライドの数。デフォルト： 1

infinite {Boolean}

ナビゲーションは無限である必要があります。デフォルト： true

showClass {String|false}

コンテンツを表示するためにコンテンツに適用するクラス名。デフォルト: fancybox-zoomInUp
可能な値: fancybox-fadeIn, fancybox-zoomInUp または false

hideClass {String|false}

非表示にするコンテンツに適用するクラス名。デフォルト: fancybox-fadeOut
可能な値:fancybox-fadeOut, fancybox-zoomOutDown または false 。

animated {Boolean}

背景とUI要素が開始/終了時にフェードイン/フェードアウトする必要があります。デフォルト：true

hideScrollbar {Boolean}

ブラウザのスクロールバーを非表示にする必要がある場合。デフォルト：true

parentEl {HTMLElement|null}

主構造を含む要素。デフォルト:fancybox-fadeOut
要素が指定されていない場合、コンテナーはの子のリストの末尾に追加されます。
nulldocument.body

mainClass {String|null}

コンテナーのカスタムクラス名または複数のスペースで区切られたクラス名。デフォルト：null

autoFocus {Boolean}

コンテンツを表示した後、最初にフォーカス可能な要素にフォーカスを設定します。デフォルト：true

trapFocus {Boolean}

ファンシーボックス内にフォーカスをトラップします。デフォルト：true

placeFocusBack {Boolean}

Fancyboxを閉じた後、フォーカスをトリガー要素に戻します。デフォルト：true

click {String|function}

ユーザーが背景をクリックしたときに実行するアクション。デフォルト: close
可能な値:close, next または custom function 。

closeButton {String}

閉じるボタンの位置。デフォルト: 可能な値:inside
可能な値:inside (over the content) または outside (at top right corner of viewport) 。

dragToClose {Boolean}

ユーザーがコンテンツを上下にドラッグしてインスタンスを閉じることができるようにします。デフォルト：true

keyboard {Object|false}

キーボードナビゲーションを有効にします。
デフォルト：

{
  Escape: "close",
  Delete: "close",
  Backspace: "close",
  PageUp: "next",
  PageDown: "prev",
  ArrowUp: "next",
  ArrowDown: "prev",
  ArrowRight: "next",
  ArrowLeft: "prev",

}

注: オブジェクト・キーとして KeyboardEvent.code を使用し、任意の API インスタンス・メソッドを値として使用します。

template {Object}

さまざまな要素の HTML テンプレート。
デフォルト：

{
  // Close button icon
  closeButton:
      '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" tabindex="-1"><path d="M20 20L4 4m16 0L4 20"/></svg>',
  // Loading indicator icon
  spinner:
      '<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="25 25 50 50" tabindex="-1"><circle cx="50" cy="50" r="20"/></svg>',
  // Main container element
  main: null,
}

注: このtemplate.mainオプションが指定されていない場合、構造体はデフォルトで次のように生成されます。

<div
  class="fancybox__container"
  role="dialog"
  aria-modal="true"
  aria-hidden="true"
  aria-label="{{MODAL}}"
  tabindex="-1"
>
  <div class="fancybox__backdrop"></div>
  <div class="fancybox__carousel"></div>
</div>

l10n {Object}

文字列のローカリゼーション。
デフォルト：

{
  CLOSE: "Close",
  NEXT: "Next",
  PREV: "Previous",
  MODAL: "You can close this modal content with the ESC key",
  ERROR: "Something Went Wrong, Please Try Again Later",
  IMAGE_ERROR: "Image Not Found",
  ELEMENT_NOT_FOUND: "HTML Element Not Found",
  AJAX_NOT_FOUND: "Error Loading AJAX : Not Found",
  AJAX_FORBIDDEN: "Error Loading AJAX : Forbidden",
  IFRAME_ERROR: "Error Loading Page",
}

言語を変更するには:
1. 翻訳オブジェクトを作成します。たとえば、import de from
"@fancyapps/ui/src/Fancybox/l10n/de";
2. Pass l10n: de オプションとして渡すか、デフォルトを変更します。defaults: Fancybox.defaults.l10n = de;.

groupAll {Boolean}

一致するすべての要素を1つのグループにグループ化する必要があります。デフォルト：false
例：

Fancybox.bind(
  'a[href*=".jpg"], a[href*=".jpeg"], a[href*=".png"], a[href*=".gif"]',
  {
    groupAll: true,
  }
);

groupAttr {String|false}

グループ化に使用する属性の名前。デフォルト：data-fancybox
例 (グループ化を無効にするため):

Fancybox.bind('[data-fancybox="single"]', {
  groupAttr: false,
});

caption {Function|null}

各スライドのキャプションコンテンツをカスタマイズするオプション機能、例。

Carousel {Object}

メインカルーセルのオプションを拡張するオプションのオブジェクト。これを使用して、ナビゲーション矢印などをカスタマイズできます。
navigation arrows ≫

(c)urbanqee.com 2022. 4.25