【jQuery】Google画像ライクなギャラリーを作るならGridderプラグイン

2015.03.16   1400


Googleの画像ギャラリーは多くの写真や画像を一覧に見せているだけでなくその内容の説明を見せるには一つの完成されたUIだと思います。

今回はそんなGoogle画像ライクなギャラリーが簡単に作れるGridderプラグインを紹介します。

百聞は一見にしかず。まずはデモを見てみてください。

GRIDDERプラグインのオススメ/ポイント

  •   Google画像と同じようなUIが簡単に作れる
  •   カスタマイズオプションもバッチリ
  •   スマホにも対応

GRIDDERプラグインのデモ


GRIDDERプラグインのページ


GRIDDERプラグインの使い方

それではGRIDDERプラグインの使い方を見ていきましょう。
それぞれのコードを載せますね。

HTMLコード

  • By Nick Diamantidis

    ミニチュア風だね

  • By Josh Felise

    キレイな夜空や…

  • By Joseph Barrientos

    こんなとこに行きたいし、住みたい


チェックポイント

ulでgridderクラスを指定するのがポイント。もちろんクラス名は任意で大丈夫です。

ちなみに今回のサンプルはBootstrapを使用していますので、rowとかcol-sm-6とかのクラス名を入れている点は注意です。

CSSコード






チェックポイント

Gridderの本体CSSは必須ですが、その他のCSSはお好みで設定してください。

Bootstrapは使用しなくても大丈夫です。サンプルで見た目良くしたかったから入れただけです。

JavaScriptコード






チェックポイント

オプションのドキュメントが見つからず…。値を色々変更して試してみてください(/・ω・)/

プラグインへ一言

慣れてるUIだから使いやすいね!

Feedlyで最新プラグインをチェック

follow us in feedly

良ければフォローもお待ちしております