バージョン 2.x

ウェブサイトは自動翻訳されています。不明な点がある場合は、英語のドキュメントをご覧ください。

基本的な使い方

Gridzy ファイルをサーバーにアップロードし、Web サイトに追加します (通常はヘッダーセクションに追加します)。

<link rel="stylesheet" href="gridzy/gridzy.min.css" />
<script src="gridzy/gridzy.min.js"></script>

HTML コードを追加します (本文セクションの任意の場所)。

<div class="gridzy">
  <img src="https://loremflickr.com/640/480?random=1" alt="a random image" />
  <img src="https://loremflickr.com/480/640?random=2" alt="another random image" />
  <img src="https://loremflickr.com/640/640?random=3" alt="yet another random image" />
  <img src="https://loremflickr.com/640/480?random=4" alt="a random image again" />
  <img src="https://loremflickr.com/640/480?random=5" alt="one last random image" />
</div>

これで完了です。完全に機能する例です。追加の初期化は必要ありません。

構成

Gridzy を設定する最も簡単な方法は、HTML 属性を使用することです。オプション名の前にdata-gridzy-を付けるだけです。したがって、 spaceBetweenオプションを設定するには、属性data-gridzy-spaceBetweenを追加するだけです。

<div class="gridzy" data-gridzy-spaceBetween="20" data-gridzy-desiredHeight="400">
  <img src="https://loremflickr.com/640/480?random=1" alt="a random image" />
  <img src="https://loremflickr.com/480/640?random=2" alt="another random image" />
  <img src="https://loremflickr.com/640/640?random=3" alt="yet another random image" />
  <img src="https://loremflickr.com/640/480?random=4" alt="a random image again" />
  <img src="https://loremflickr.com/640/480?random=5" alt="one last random image" />
</div>

メインオプション

	デフォルト値	説明
`animate`	`true`	グリッドが変更されたとき (たとえば、ブラウザウィンドウのサイズを変更するときやフィルターを設定するとき) にアニメーションを使用するかどうかを決定します。
`layout`	`justified`	使用するレイアウトを定義します。Gridzy.js 2 は、 `justified`と`waterfall`という 2 つの異なるレイアウトをサポートしています。それぞれに独自の追加オプションパラメーターがあり、この表の下に示されています。
`filter`	`*`	表示する画像を決定します。任意の CSS セレクターをここでの値として使用できます。通常は`filterControls`によって自動的に設定されます (次のオプションを参照)。フィルターをチェック
`filterControls`		画像をフィルタリングするために使用できるフォーム要素を決定します。HTML フォーム要素を選択する任意の CSS セレクターをここでの値として使用できます。フィルターをチェック
`autoConsiderScrollBars`	`true`	スクロールバーが表示されたり消えたりする場合の使用可能な幅を予測します。この自動化によって問題が発生しない限り、常に`true`のままにしておくことをお勧めします。

Justifiedレイアウトオプション

	デフォルト値	説明
`autoFontSize`	`false`	元のボックスサイズに基づいて、各ボックスの font-size プロパティを自動的に更新します。デフォルトでは、font-size プロパティは明示的に設定されていません。
`desiredHeight`	`190`	要素行の希望の高さを定義します。実際の高さは、使用可能な幅と行内の要素に応じて計算されます。
`hideOnMissingImage`	`true`	読み込めなかった画像を含むボックスを非表示にします。
`spaceBetween`	`4`	要素間の距離をピクセル単位で定義します。
`lastRowAlign` バージョン 2.3.0 以降	`justified`	最後の行の動作を定義します。許可される値は、 `left` 、 `center` 、 `right` 、および`justified`です。
`singleRowAlign` バージョン 2.3.0 以降	`justified`	行が 1 つしかない場合の動作を定義します。許可される値は、 `left` 、 `center` 、 `right` 、および`justified`です。
~~`fillLastRow`~~ ~~バージョン2.1.0以降~~	~~`true`~~	バージョン 2.4.0 以降で削除されました(バージョン 2.3.0 以降では非推奨) 最後の行が常に完全に埋められるように画像を配置します。画像を動的に追加する予定の場合は、これを無効にしておくことをお勧めします。単一行には影響しません ( `fillSingleRow`参照)。
`fillSingleRow` バージョン2.1.0以降	~~`true`~~	バージョン 2.4.0 以降で削除されました(バージョン 2.3.0 以降では非推奨) 行が 1 つしかない場合は、行が常に完全に埋められるように画像が配置されます。ギャラリーに画像が 1 つか 2 つしかない場合は、これを無効にしておくことをお勧めします。

Waterfallレイアウトオプション

	デフォルト値	説明
`autoFontSize`	`false`	元のボックスサイズに基づいて、各ボックスの font-size プロパティを自動的に更新します。デフォルトでは、font-size プロパティは明示的に設定されていません。
`desiredWidth`	`250`	列の希望する幅を定義します。実際の幅は、使用可能な幅と列の数に応じて計算されます。
`hideOnMissingImage`	`true`	読み込めなかった画像を含むボックスを非表示にします。
`horizontalOrder`	`false`	要素が各列に厳密に 1 つずつ左から右に配置され、どの列により多くのスペースがあるかに関係なく、最も左の列から再び開始することを定義します。デフォルトでは、要素は常に最も高さの小さい列に配置されます。
`spaceBetween`	`4`	要素間の距離をピクセル単位で定義します。
`singleRowAlign` since version 2.7.0	`justified`	Defines the behavior when not all columns can be filled due to too few images. Allowed values are `left`, `center`, `right` and `justified`.

より高度なオプション

より高度なオプションについては、 APIをご覧ください。

セマンティック HTML

Gridzy の最も単純な HTML 構造は次のとおりです。

<div class="gridzy">
  <img src="https://loremflickr.com/640/480?random=1" alt="a random image" />
  <img src="https://loremflickr.com/480/640?random=2" alt="another random image" />
  <img src="https://loremflickr.com/640/640?random=3" alt="yet another random image" />
  <img src="https://loremflickr.com/640/480?random=4" alt="a random image again" />
  <img src="https://loremflickr.com/640/480?random=5" alt="one last random image" />
</div>

ただし、Gridzy は非常に柔軟性が高く、他の HTML 構造もほぼすべて使用できます。考慮すべき点はわずかです。

コンテナ要素の各子は、グリッド内の 1 つの項目を表します。
コンテナ要素とその子は、 ulやliなどの任意のタグタイプにすることができます (ブラウザのデフォルトをリセットすることを検討してください)。
img要素自体が直接の子でない場合は、クラスgridzyImageが必要です。

したがって、これも機能する HTML 構造です。

<ul class="gridzy">
  <li>
    <span>
      <img class="gridzyImage" src="https://loremflickr.com/640/480?random=1" alt="a random image" />
    </span>
  </li>
  <li>
    <span>
      <img class="gridzyImage" src="https://loremflickr.com/480/640?random=2" alt="another random image" />
    </span>
  </li>
  <li>
    <span>
      <img class="gridzyImage" src="https://loremflickr.com/640/640?random=3" alt="yet another random image" />
    </span>
  </li>
  <li>
    <span>
      <img class="gridzyImage" src="https://loremflickr.com/640/480?random=4" alt="a random image again" />
    </span>
  </li>
  <li>
    <span>
      <img class="gridzyImage" src="https://loremflickr.com/640/480?random=5" alt="one last random image" />
    </span>
  </li>
</ul>

特にキャプションを追加する場合は、高度な HTML 構造が必要です。詳細については、「キャプションとスキン」を参照してください。

キャプションとスキン

ギャラリーにキャプションを追加する場合は、外観を定義する必要があります。そのため、いくつかの定義済みスキンが用意されています。各スキンは CSS ファイルで構成されています。メインの Gridzy ファイル (通常は head セクション内) に加えて、このファイルを追加する必要があります。

<link rel="stylesheet" href="gridzy/skins/gridzySkinClassic/style.min.css" />

さらに、高度な HTML 構造も必要です。

<div class="gridzy gridzySkinClassic">
  <figure>
    <img class="gridzyImage" src="https://loremflickr.com/640/480?random=1" alt="a random image" />
    <figcaption class="gridzyCaption">a caption text</figcaption>
  </figure>
  <figure>
    <img class="gridzyImage" src="https://loremflickr.com/480/640?random=2" alt="another random image" />
    <figcaption class="gridzyCaption">another caption text</figcaption>
  </figure>
  <figure>
    <img class="gridzyImage" src="https://loremflickr.com/640/640?random=3" alt="yet another random image" />
    <figcaption class="gridzyCaption">yet another caption text</figcaption>
  </figure>
  <figure>
    <img class="gridzyImage" src="https://loremflickr.com/640/480?random=4" alt="a random image again" />
    <figcaption class="gridzyCaption">a caption text again</figcaption>
  </figure>
  <figure>
    <img class="gridzyImage" src="https://loremflickr.com/640/480?random=5" alt="one last random image" />
    <figcaption class="gridzyCaption">one last caption text</figcaption>
  </figure>
</div>

HTML 構造について疑問がある場合は、セマンティック HTMLを参照してください。

キャプションには任意のタイプのタグを使用できますが、クラスgridzyCaptionがあることを確認してください。img imgにはクラスgridzyImage必要です。

上記の例では、スキンgridzySkinClassicが表示されています。別のスキンを使用するには、スキン名を次のいずれかに置き換えます。

含まれるスキン

	利用可能なクラス
グリッドジースキンブランク独自のスキンを作成するための良い出発点ライブプレビュー	`gridzySkinBlank`
gridzySkinClassic ライブプレビュー	`gridzySkinClassic` `gridzySkinClassicLight`(バージョン 2.6.0 以降では非推奨)
gridzySkinFullOverlay ライブプレビュー	`gridzySkinFullOverlay` `gridzySkinFullOverlayLight`(バージョン 2.6.0 以降では非推奨)
gridzySkinLift ライブプレビュー	`gridzySkinLift` `gridzySkinLiftLight`(バージョン 2.6.0 以降では非推奨)
gridzySkinMagnifier ズーム機能は含まれませんライブプレビュー	`gridzySkinMagnifier` `gridzySkinMagnifierLight`(バージョン 2.6.0 以降では非推奨)

上記のスキンはすべて CSS ファイルのみが必要ですが、JavaScript ファイルも必要な追加のスキンがあります。

<link rel="stylesheet" href="gridzy/skins/gridzySkinBlur/style.min.css" />
<script src="gridzy/skins/gridzySkinBlur/script.min.js"></script>

	利用可能なクラス
gridzySkinBlur IEでは動作しませんライブプレビュー	`gridzySkinBlur` `gridzySkinBlurLight`(バージョン 2.6.0 以降では非推奨)
gridzySkinCard ライブプレビュー	`gridzySkinCard` `gridzySkinCardLight`(バージョン 2.6.0 以降では非推奨)

スキンオプション

バージョン 2.6.0 以降では、組み込みスキンを設定するためのオプションがあります。特定のスキンに応じて、背景色、テキスト色、テキストの影を設定できます。ここでわかるように、CSS カスタムプロパティを使用するだけです。

<div class="gridzy gridzySkinClassic" style="--background: rgba(0, 80, 117, .8); --color: rgb(238, 238, 238); ">
  <figure>
    <img class="gridzyImage" src="https://loremflickr.com/640/480?random=1" alt="a random image" />
    <figcaption class="gridzyCaption">a caption text</figcaption>
  </figure>
  <figure>
    <img class="gridzyImage" src="https://loremflickr.com/480/640?random=2" alt="another random image" />
    <figcaption class="gridzyCaption">another caption text</figcaption>
  </figure>

  ...

</div>

各スキンでサポートされている変数とデフォルト値については、以下を参照してください。

gridzySkinClassic

変数	デフォルト値	情報
`--background`	`rgba(0, 0, 0, .7)`	任意のCSS背景値を許可します
`--color`	`rgb(255, 255, 255)`	任意のCSSカラー値を許可します
`--text-shadow`	`none`	任意のCSSテキストシャドウ値を許可します

gridzySkinFullOverlay

変数	デフォルト値	情報
`--background`	`rgba(0, 0, 0, .7)`	任意のCSS背景値を許可します
`--color`	`rgb(255, 255, 255)`	任意のCSSカラー値を許可します
`--text-shadow`	`none`	任意のCSSテキストシャドウ値を許可します

gridzySkinLift

変数	デフォルト値	情報
`--background`	`rgba(0, 0, 0, .7)`	任意のCSS背景値を許可します
`--color`	`rgb(255, 255, 255)`	任意のCSSカラー値を許可します
`--text-shadow`	`0 0 10px rgb(0, 0, 0), 0 0 20px rgb(0, 0, 0), 0 0 30px rgb(0, 0, 0)`	任意のCSSテキストシャドウ値を許可します

gridzySkinMagnifier

変数	デフォルト値	情報
`--background`	`rgba(0, 0, 0, .7)`	任意のCSS背景値を許可します
`--color`	`rgb(255, 255, 255)`	任意のCSSカラー値を許可します

このスキンは--text-shadowをサポートしていません

gridzySkinBlur

変数	デフォルト値	情報
`--background`	`rgba(0, 0, 0, .7)`	任意のCSS背景値を許可します
`--color`	`rgb(255, 255, 255)`	任意のCSSカラー値を許可します
`--text-shadow`	`0 0 10px rgb(0, 0, 0)`	任意のCSSテキストシャドウ値を許可します

gridzySkinCard

変数	デフォルト値	情報
`--background`	`rgba(0, 0, 0, 1)`	任意のCSS背景値を許可します
`--color`	`rgb(255, 255, 255)`	任意のCSSカラー値を許可します
`--text-shadow`	`none`	任意のCSSテキストシャドウ値を許可します

定義済みのスキンはすべて、単純なテキストキャプションのみをサポートしています。独自のより複雑なスキンを作成することもできます。Style Gridzyをご覧ください。

スタイルグリジー

定義済みのスキンがニーズに合わない場合は、独自のスキンをスタイル設定できます。

最も簡単な方法は、まず既存のスキンをコピーして、自分のニーズに合わせて調整することです。定義済みのスキンgridzySkinBlank 、通常、優れた基盤と CSS ファイル内の優れたドキュメントを提供します。

/** SKIN Blank **/

/* all gallery items (direct children of the main container element) */
.gridzySkinBlank > .gridzyItem {
  overflow: hidden;
}

/* all gallery images (predefined in Gridzy's main CSS file, but can be overridden) */
.gridzySkinBlank .gridzyImage {
}

/* all gallery captions (just create your very own style) */
.gridzySkinBlank .gridzyCaption {
  margin: 0;
  padding: .5em;
  opacity: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  transition: opacity .5s;
  overflow: auto;
  background: rgba(0, 0, 0, .7);
  color: rgb(255, 255, 255);
}

.gridzySkinBlank > .gridzyItem:hover .gridzyCaption {
  opacity: 1;
}

CSS ファイルには、 gridzySkinBlank 、 gridzyImage 、 gridzyCaption各クラスがあります。Gridzy 自体にはこれらのクラスは必要ありません。これらはスタイル設定のためだけに使用されるので、必要に応じて削除したり名前を変更したりできます。

さらに、CSS クラスgridzyItemもあります。Gridzy は、このクラスをメインコンテナー要素のすべての直接の子に自動的に設定します。そのため、このクラスを使用してギャラリーのアイテムのスタイルを設定できます。

大切なことに気を付ける

アイテムのコンテンツは完全にレスポンシブである必要があります。要素のサイズは確実に変更されることを考慮してください。ピクセル値ではなくパーセンテージ値を使用してください。また、フォントサイズをアイテムボックスサイズにバインドする Gridzy レイアウトオプションautoFontSizeを確認してください。
各アイテムには、明確に定義されたアスペクト比が必要です。アイテムのアスペクト比は変更されず、グリッドを計算するために必要です。したがって、アイテムのアスペクト比が自動的に明確に定義されていない場合は、手動で事前に定義します (例: CSS 経由)。

場合によっては、Gridzy が初期化される前にアイテムのコンテンツのスタイルを設定する方が簡単な場合があります。これを行うには、クラスgridzyまたは Gridzy JavaScript ファイルを一時的に削除するだけです。

これで完了です。独自のスキンを作成するために必要なのはこれだけです。ほとんどの定義済みスキンでは、これ以上のものは使用されません。

しかし、もしよければ、もっとあるかもしれません…

高度なスキン

Gridzy はgridzyItemだけでなく、より多くの CSS クラスを使用します。それらのほとんどは自動的に設定され、スタイル設定にも使用できます。

メインコンテナクラス

クラス名	説明
`gridzy` 手動で設定する	Gridzy はこのクラスを持つ要素を自動的に検出し、初期化します。
`gridzyAnimated`	オプション`animate`が`true`の場合、自動的に設定されます。このクラスが手動で設定されている場合、オプション`animate`も自動的に`true`になります (明示的に`false`に設定されている場合を除く)。

アイテムクラス

クラス名	説明
`gridzyItem`	アイテムが初期化プロセスを開始するとすぐに設定されます。削除されることはありません。
`gridzyItemInitializing`	アイテムが初期化プロセスを開始するとすぐに設定されます。アイテムが完全に初期化されるとすぐに`gridzyItemReady`に置き換えられます。画像が完全に読み込まれた ( `gridzyItemLoading`参照) のではなく、アイテムが表示される準備ができていることを意味します。
`gridzyItemReady`	アイテムが完全に初期化されるとすぐに`gridzyItemInitializing`置き換えられます。削除されることはありません。画像が完全に読み込まれたわけではなく ( `gridzyItemComplete`参照)、アイテムが表示される準備ができていることを意味します。
`gridzyItemLoading`	アイテムが初期化プロセスを開始するとすぐに設定されます。含まれる画像 (通常は 1 つのみ) が完全に読み込まれるとすぐに、 `gridzyItemComplete`に置き換えられます。
`gridzyItemComplete`	含まれている画像 (通常は 1 つのみ) が完全に読み込まれるとすぐに、 `gridzyItemLoading`置き換えられます。削除されることはありません。
`gridzyItemInitialToVisible`	アイテムが初めて表示され始めるとすぐに設定されます。アイテムが完全に表示されるとすぐに削除されます。
`gridzyItemVisible`	アイテムが完全に表示されるとすぐに設定されます。アイテムが消え始めるとすぐに削除されます。
`gridzyItemVisibleToHidden`	アイテムが消え始めるとすぐに設定されます。アイテムが完全に非表示になるとすぐに削除されます。
`gridzyItemHidden`	アイテムが完全に非表示になるとすぐに設定されます。アイテムが表示され始めるとすぐに削除されます。
`gridzyItemHiddenToVisible`	アイテムが表示され始めるとすぐに設定されます (初めて表示される場合を除く - クラス`gridzyItemInitialToVisible`を参照)。アイテムが完全に表示されるとすぐに削除されます。
`gridzyItemVisibleToVisible`	グリッド内の何かが変更されるとすぐに設定されますが、アイテム自体は表示されたままになります。変更アニメーションが終了するとすぐに削除されます。

デフォルトでは、プロセスインジケーターと、表示および非表示の画像のアニメーションは、Gridzy のメイン CSS ファイルによって事前定義されています。

上記の CSS クラスを使用すると、独自のプロセスインジケーターとアニメーションをスタイル設定できます。Gridzy のメイン CSS ファイルを見て、何をオーバーライドする必要があるかを理解してください。心配はいりません。すべてがそこに十分に文書化されています。

読み込みの最適化

多くの画像を使用する場合は、Gridzy がグリッドをより速く構築できるように支援することをお勧めします。

画像の飛び出しを防ぐ

Gridzy では、グリッドを計算するためにすべての画像のアスペクト比が絶対に必要です。そのため、一部の画像が準備されていて、他の画像が準備されていない場合、要素がジャンプします。画像の数が多いほど、この効果はより煩わしくなります。

この動作を防ぐには、すべてのimg要素にwidthとheight属性を設定するだけです。個々の画像に正しい値を設定することが重要です。そうしないと、画像が歪んでしまいます。正しい値は、それぞれの画像の元の幅と高さです。

<div class="gridzy">
  <img src="https://loremflickr.com/640/480?random=1" width="640" height="480" alt="a random image" />
  <img src="https://loremflickr.com/480/640?random=2" width="480" height="640" alt="another random image" />
  <img src="https://loremflickr.com/640/640?random=3" width="640" height="640" alt="yet another random image" />
  <img src="https://loremflickr.com/640/480?random=4" width="640" height="480" alt="a random image again" />
  <img src="https://loremflickr.com/640/480?random=5" width="640" height="480" alt="one last random image" />
</div>

その後、Gridzy は画像の実際のサイズを知らなくてもすぐにグリッドを計算できます。

遅延読み込み

表示されているビューポートにある画像のみを読み込むには、次の手順に従ってください。

上記のようにwidthとheight属性を挿入します（正しい値を使用するようにしてください）
以下に示すように、すべてのsrc属性をdata-gridzylazysrcに置き換えます ( srcset属性もある場合は、それらをdata-gridzylazysrcsetに置き換えます)。

<div class="gridzy">
  <img data-gridzylazysrc="https://loremflickr.com/640/480?random=1" width="640" height="480" alt="a random image" />
  <img data-gridzylazysrc="https://loremflickr.com/480/640?random=2" width="480" height="640" alt="another random image" />
  <img data-gridzylazysrc="https://loremflickr.com/640/640?random=3" width="640" height="640" alt="yet another random image" />
  <img data-gridzylazysrc="https://loremflickr.com/640/480?random=4" width="640" height="480" alt="a random image again" />
  <img data-gridzylazysrc="https://loremflickr.com/640/480?random=5" width="640" height="480" alt="one last random image" />
</div>

これらの手順を実行すると、画像はビューポートの近くまたはビューポート内に入るとすぐに読み込まれます。

プロセスインジケーター

プロセスインジケーターは、画像の読み込み中に表示される小さなアニメーションアイコンです。キャプションとスキンを使用している場合は、プロセスインジケーターが自動的に表示されます。それ以外の場合は、いくつかの調整が必要です。

各img要素をdiv要素に入れる
（または他の要素に – 詳細についてはセマンティック HTML を参照してください）
各img要素にgridzyImageクラスを追加します。

<div class="gridzy">
  <div><img src="https://loremflickr.com/640/480?random=1" class="gridzyImage" alt="a random image" /></div>
  <div><img src="https://loremflickr.com/480/640?random=2" class="gridzyImage" alt="another random image" /></div>
  <div><img src="https://loremflickr.com/640/640?random=3" class="gridzyImage" alt="yet another random image" /></div>
  <div><img src="https://loremflickr.com/640/480?random=4" class="gridzyImage" alt="a random image again" /></div>
  <div><img src="https://loremflickr.com/640/480?random=5" class="gridzyImage" alt="one last random image" /></div>
</div>

その後、画像の読み込みに時間がかかる場合は、プロセスインジケーターが表示されます。

フィルター

Gridzy のフィルターは非常にシンプルですが強力です。必要なフィルターの種類に関係なく、実現できる可能性が非常に高いです。必要なのは、少しの CSS といくつかの HTML フォーム要素だけです...

機能的な例を次に示します。

<div id="myFilterControls">
  <button value="*">All</button>
  <button value=".animals">Animals</button>
  <button value=".architecture">Architecture</button>
  <button value=".people">People</button>
</div>

<div class="gridzy" data-gridzy-filterControls="#myFilterControls button">
  <img class="animals" src="https://loremflickr.com/640/480/animals?random=1" alt="a random animal image" />
  <img class="architecture" src="https://loremflickr.com/640/480/arch?random=1" alt="a random architecture image" />
  <img class="people" src="https://loremflickr.com/640/480/people?random=1" alt="a random people image" />
  <img class="animals" src="https://loremflickr.com/640/480/animals?random=2" alt="another random animal image" />
  <img class="architecture" src="https://loremflickr.com/640/480/arch?random=2" alt="another random architecture image" />
  <img class="people" src="https://loremflickr.com/640/480/people?random=2" alt="another random people image" />
  <img class="animals" src="https://loremflickr.com/640/480/animals?random=3" alt="yet another random animal image" />
</div>

一歩ずつ構築しましょう

1.まず、Gridzyの通常のHTML構造が必要で、すべてのギャラリーアイテムにクラス名を設定して、後でフィルタリングできるようにします。

<div class="gridzy">
  <img class="animals" src="https://loremflickr.com/640/480/animals?random=1" alt="a random animal image" />
  <img class="architecture" src="https://loremflickr.com/640/480/arch?random=1" alt="a random architecture image" />
  <img class="people" src="https://loremflickr.com/640/480/people?random=1" alt="a random people image" />
  <img class="animals" src="https://loremflickr.com/640/480/animals?random=2" alt="another random animal image" />
  <img class="architecture" src="https://loremflickr.com/640/480/arch?random=2" alt="another random architecture image" />
  <img class="people" src="https://loremflickr.com/640/480/people?random=2" alt="another random people image" />
  <img class="animals" src="https://loremflickr.com/640/480/animals?random=3" alt="yet another random animal image" />
</div>

この例では、各要素に 1 つのクラスのみを使用します。ただし、その要素を複数のフィルターで検索できるようにする場合は、1 つの要素に複数のクラスを設定することもできます。

2.次に、フィルターを変更するためのボタンをいくつか追加します。

<button value="*">All</button>
<button value=".animals">Animals</button>
<button value=".architecture">Architecture</button>
<button value=".people">People</button>

<div class="gridzy">
  <img class="animals" src="https://loremflickr.com/640/480/animals?random=1" alt="a random animal image" />
  <img class="architecture" src="https://loremflickr.com/640/480/arch?random=1" alt="a random architecture image" />
  <img class="people" src="https://loremflickr.com/640/480/people?random=1" alt="a random people image" />
  <img class="animals" src="https://loremflickr.com/640/480/animals?random=2" alt="another random animal image" />
  <img class="architecture" src="https://loremflickr.com/640/480/arch?random=2" alt="another random architecture image" />
  <img class="people" src="https://loremflickr.com/640/480/people?random=2" alt="another random people image" />
  <img class="animals" src="https://loremflickr.com/640/480/animals?random=3" alt="yet another random animal image" />
</div>

ボタンの代わりに、チェックボックス、ラジオボタン、選択フィールドなどの他のフォーム要素を使用することもできます。

ご覧のとおり、ボタンの値は一般的な CSS セレクターです。完了すると、このようなボタンをクリックすると、その CSS セレクターに一致する画像が表示されます。技術的には、 filterオプションをこの値に設定するだけです。

さらに複雑なセレクターも使用できます。たとえば:not(.animals)も機能します。また、 .animals.peopleや.animals, .peopleも機能します。

3.最後に、 filterControlsオプションを設定して、ボタンをdivコンテナーにカプセル化し、Gridzy ギャラリーにバインドします。

<div id="myFilterControls">
  <button value="*">All</button>
  <button value=".animals">Animals</button>
  <button value=".architecture">Architecture</button>
  <button value=".people">People</button>
</div>

<div class="gridzy" data-gridzy-filterControls="#myFilterControls button">
  <img class="animals" src="https://loremflickr.com/640/480/animals?random=1" alt="a random animal image" />
  <img class="architecture" src="https://loremflickr.com/640/480/arch?random=1" alt="a random architecture image" />
  <img class="people" src="https://loremflickr.com/640/480/people?random=1" alt="a random people image" />
  <img class="animals" src="https://loremflickr.com/640/480/animals?random=2" alt="another random animal image" />
  <img class="architecture" src="https://loremflickr.com/640/480/arch?random=2" alt="another random architecture image" />
  <img class="people" src="https://loremflickr.com/640/480/people?random=2" alt="another random people image" />
  <img class="animals" src="https://loremflickr.com/640/480/animals?random=3" alt="yet another random animal image" />
</div>

ご覧のとおり、 filterControlsオプションにも CSS セレクターを使用しています。id 属性を持つdivコンテナーは、そのidセレクターを介してボタンを選択しやすくするためだけに使用されます。

それでおしまい！

JavaScript ソリューションをご希望の場合は、 API をご確認ください。

翻訳

Gridzy には独自の API がありますが、DOM を操作するだけでほとんどの操作は API なしでも実行できます。Gridzy はそれを認識してグリッドを調整します。しかし、非常に強力な API もあります...

DOMの操作

すべてのドキュメントオブジェクトモデル (DOM)操作には、まずコンテナ要素が必要です。

// get the container element
var gridzyElement = document.querySelector('.gridzy');

画像を追加

新しい子要素をコンテナ要素に追加する前に、その子要素を完全に構築して埋めることが重要です。そうしないと、Gridzy は正しい寸法を検出できません。

// create a new img element
var newImage = document.createElement('img');

// add src attribute (!! before you add it to the container element !!)
newImage.src = 'https://loremflickr.com/640/480';

// add it as last element to the container element
gridzyElement.appendChild(newImage);

// or as first element (or anywhere in between)
gridzyElement.insertBefore(newImage, gridzyElement.firstChild);

画像を削除

// remove the first image
gridzyElement.removeChild(gridzyElement.firstElementChild);

オプションの変更

// change the spaceBetween option to a specific value
gridzyElement.setAttribute('data-gridzy-spaceBetween', '10');

// change the layout option to a specific value
gridzyElement.setAttribute('data-gridzy-layout', 'waterfall');

// reset the spaceBetween option to its default value
gridzyElement.removeAttribute('data-gridzy-spaceBetween');

DOM の操作の詳細については、 MDN Web ドキュメントを参照してください。DOM の紹介も用意されています。

独自のAPI

API を使用するには、まず Gridzy コンテナ要素にバインドされた Gridzy インスタンスが必要です。

// get the Gridzy instance
var gridzyInstance = document.querySelector('.gridzy').gridzy;

オプションを取得

// get the value of a single option
var currentLayout = gridzyInstance.getOption('layout');

すべてのオプションを取得

// get all option values as an object
var currentOptions = gridzyInstance.getOptions();

オプションの設定

// set specific option values
gridzyInstance.setOptions({
  spaceBetween: 10,
  layout: 'waterfall'
});

// or reset options to their default values
gridzyInstance.setOptions({
  spaceBetween: null,
  layout: null
});

フィルターを適用

フィルターを適用するには、任意の有効な CSS セレクターとなるオプションfilterを設定するだけです。

// set the filter to match items with class "animals"
gridzyInstance.setOptions({
  filter: '.animals'
});

// reset the filter to match all items again
gridzyInstance.setOptions({
  filter: '*'
});

// set the filter to match items without class "animals"
gridzyInstance.setOptions({
  filter: ':not(.animals)'
});

// set the filter to match items with class "animals" or "people"
gridzyInstance.setOptions({
  filter: '.animals, .people'
});

// set the filter to match items that have both classes, "animals" and "people"
gridzyInstance.setOptions({
  filter: '.animals.people'
});

コールバック関数を追加する

バージョン 2.4.0 以降では非推奨
代わりに、よりモダンで柔軟性の高いイベントを使用してください。詳細については、次のセクションを参照してください。

Gridzy.js 2 は、コールバック関数のいくつかのオプションをサポートしています。これらは、他のオプションと同様に、独自の API 経由でのみ設定できます。

// same as set other options
gridzyInstance.setOptions({
  onOptionsChanged: function() {
    // will be executed each time the options have changed.
  },
  onBeforeOptionsChanged: function() {
    // will be executed, before new options take effect.
  }
});

	説明
~~`onBeforeOptionsChanged`~~	~~オプションを設定する前に直接呼び出されるコールバック関数。~~
~~`onOptionsChanged`~~	~~オプションを設定した直後に呼び出されるコールバック関数。~~
~~`onBeforeRender`~~	~~レンダリングの直前に呼び出されるコールバック関数。~~
~~`onRender`~~	~~レンダリング後に直接呼び出されるコールバック関数。~~

イベントを使用する

バージョン 2.4.0 以降

Gridzy イベントは通常の JavaScript イベントとまったく同じように使用できます。

document.addEventListener('gridzyOptionsChanged', function(event) {
    // will be executed each time the options have changed.
});

document.addEventListener('gridzyBeforeOptionsChanged', function(event) {
    // will be executed, before new options take effect.
});

一部のイベントは Gridzy コンテナ要素で発生し、その他のイベントはコンテナ要素内の個々のアイテム要素で発生します。

Gridzy コンテナ要素で発生するイベント:

	説明
`gridzyBeforeInit`	ギャラリーの初期化前に発生します。
`gridzyInit`	ギャラリーの初期化後に発生します。
`gridzyBeforeOptionsChanged`	オプションを設定する前に起動します。
`gridzyOptionsChanged`	オプションを設定した後に起動します。
`gridzyBeforeRender`	レンダリング前に起動します。
`gridzyRender`	レンダリング後に起動します。

ここでイベントを見逃した場合は、サポートリクエストを送信してください。

event.target Gridzy コンテナ要素を提供します。
event.detail.instance Gridzy インスタンスを提供します。

アイテム要素で発生するイベント:

	説明
`gridzyItemBeforeInit`	アイテムの初期化前に発生します。
`gridzyItemInit`	アイテムの初期化後に発生します。
`gridzyItemLoading`	アイテムの読み込みが開始されたときに発生します。
`gridzyItemReady`	アイテムのグリッド計算の準備ができたときに発生します。したがって、アスペクト比はわかっていますが、画像はまだ読み込まれている可能性があります。
`gridzyItemComplete`	アイテム画像が完全に読み込まれたときに発生します。

ここでイベントを見逃した場合は、サポートリクエストを送信してください。

event.targetそれぞれのアイテム要素を提供します。
event.detail.instance Gridzy インスタンスを提供します。

API – グローバル

Gridzy インスタンスに依存しない関数がいくつかあります。そのため、事前にインスタンスを取得する必要はありません。

デフォルトオプションを取得

// get the default value of a single option
var defaultLayout = Gridzy.getDefaultOption('layout');

すべてのデフォルトオプションを取得

// get all default option values as an object, including the default layout options of the default layout
var defaultOptions = Gridzy.getDefaultOptions();

// or get all default option values, including the default layout options of a specific layout
var defaultOptions = Gridzy.getDefaultOptions('waterfall');

デフォルトオプションを設定する

これは、すでに初期化されているすべての Gridzy インスタンスのオプションを設定するのではなく、新しいインスタンスの基礎を定義します。ただし、既存のインスタンスのオプションが値nullによってリセットされる場合は、新しいデフォルト値が使用されます。

// set default option values
Gridzy.setDefaultOptions({
  spaceBetween: 10,
  layout: 'waterfall'
});

DOM の準備ができる前にこれを呼び出すと、オプションをグローバルに設定できます。そのため、オプションを属性として設定する必要がなくなります。

自動化

Gridzy.js 2 のすべての自動化機能がアクティブである限り、以下の方法は必要ありません。ただし、自動化機能をオフにして、Gridzy をより従来の方法で使用することは可能です。

// disable automatic initializations
Gridzy.setDefaultOptions({
  autoInitOnDomReady: false,
  autoInitOnDomMutation: false
});

// or switch off all mutation observers
Gridzy.setDefaultOptions({
  autoInitOnDomMutation: false,
  autoSyncChildListMutation: false,
  autoSyncAttributesMutation: false,
  autoSyncChildClassMutation: false,
  autoSyncImageMutation: false
});

これらのオプションの一部は、論理的な理由により、 data-gridzy- attributes またはsetOptions()経由で設定できません。

	デフォルト値	説明
`autoInitOnDomReady`	`true`	ページの読み込み時にクラス`gridzy`を持つ要素を検出し、初期化します。 `Gridzy.setDefaultOptions()`で設定可能
`autoInitOnDomMutation` ミューテーションオブザーバー	`true`	DOM に出現するとすぐにクラス`gridzy`を持つ新しい要素を検出し、初期化します。(ページ遷移を使用する場合など) `Gridzy.setDefaultOptions()`で設定可能
`autoSyncChildListMutation` ミューテーションオブザーバー	`true`	子要素 (画像) が追加または削除されたかどうかを検出し、グリッドを自動的に更新します。 `data-grizy-` 、 `new Gridzy()` 、 `setOptions()` 、 `Gridzy.setDefaultOptions()`で設定可能
`useOptionAttributes`	`true`	`data-gridzy-`属性が一般的に使用されるかどうかを定義します。これが`false`の場合、オプションは独自の API 経由でのみ設定できます。 `new Gridzy()` 、 `setOptions()` 、 `Gridzy.setDefaultOptions()`で設定可能
`autoSyncAttributesMutation` ミューテーションオブザーバー	`true`	`data-gridzy-`属性の変更を検出し、グリッドを自動的に更新します。また、 `gridzyAnimated`クラスが追加または削除されたかどうか、および`style`属性の変更が発生したかどうかも検出します。useOptionAttributes が`false` `useOptionAttributes`は、 `style`属性の変更のみを検出します。 `data-grizy-` 、 `new Gridzy()` 、 `setOptions()` 、 `Gridzy.setDefaultOptions()`で設定可能
`autoSyncChildClassMutation` ミューテーションオブザーバー	`true`	すべての子要素 (画像) の`class`属性の変更を検出します。フィルターに関連します。 `data-grizy-` 、 `new Gridzy()` 、 `setOptions()` 、 `Gridzy.setDefaultOptions()`で設定可能
`autoSyncImageMutation` ミューテーションオブザーバーバージョン2.5.0以降	`true`	すべての画像の`src`属性の変更を検出します。React または同様のライブラリで使用する場合に関連します。 `data-grizy-` 、 `new Gridzy()` 、 `setOptions()` 、 `Gridzy.setDefaultOptions()`で設定可能
`autoRenderOnResize` リサイズオブザーバーバージョン 2.6.0 以降	`true`	要素の幅の変更を検出します。レスポンシブデザインに関連します。(バージョン 2.6.0 より前は、ウィンドウのサイズ変更イベントリスナーが使用されていました) `data-grizy-` 、 `new Gridzy()` 、 `setOptions()` 、 `Gridzy.setDefaultOptions()`で設定可能

手動で初期化する

// initialize a new Gridzy instance
var gridzyInstance = new Gridzy(document.querySelector('.gridzy'), {
  spaceBetween: 10,
  layout: 'waterfall'
});

インスタンスを破棄する

大まかに言えば、Gridzy の初期化の反対です。

gridzyInstance.destroy();
gridzyInstance = null;

子リストを手動で同期する

// after child elements (images) are added to or removed from the DOM.
gridzyInstance.syncChildList();

単一の子要素を手動で同期する

非常にまれな場合を除き、通常は必要ありません。

// after child elements (images) are added to the DOM and only one of them should be synced to Gridzy.
gridzyInstance.syncChild(childElement);

属性を手動で同期する

この場合、 useOptionAttributesオプションはtrueにする必要があることに注意してください。

// after data-gridzy- attributes have changed
gridzyInstance.syncAttributes();

強制レンダリング

通常、すべての自動化がオフになっている場合でも必要ありません

gridzyInstance.render();

WordPressプラグイン

JavaScript ライブラリ

サービス