jQuery Elastic Grid

JavaScript

Google画像検索っぽいイメージギャラリーを実装できる「jQuery Elastic Grid」

jQuery Elastic Gridは、Google画像検索っぽいイメージギャラリーを実装することができるjQueryプラグインです。レスポンシブ対応で軽量、そして使い方も簡単なところがグッドです。ホバーアニメーションもスタイリッシュでとてもかっこいいですね。

jQuery Elastic Grid

jQuery Elastic Grid

たくさんのサムネイル画像が並んでいるデモでは、各サムネイル画像をホバーするとオーバーレイによるアニメーションでタイトルが表示されます。クリックすると、その画像の詳細が表示されます。

Google画像検索のようなレイアウトで表示されるので、使い慣れている人にとっては、違和感なく操作できますね。画像の詳細はクリックすることで表示されるので、余計なスペースを使う必要もなく有効的に活用できます。

また、デモはレスポンシブにも対応しているので、ブラウザ幅に応じて最適なレイアウトに可変していきます。PC、スマホ、タブレットと、さまざまなデバイスで快適なイメージギャラリーを閲覧することが可能です。

使い方もシンプルで記述しやすいほか、ファイルも軽量に仕上がっているので、気軽に導入できそうですね。

スタイリッシュなホバーエフェクトでレスポンシブに対応したGoogle画像検索風のイメージギャラリーを実装できるjQueryプラグインを探している人は、ぜひ「jQuery Elastic Grid」を活用されてみてはいかがでしょうか?

jquery-stepsステップ式のウィザードを実装できるjQueryプラグイン「jquery-steps」前のページ

ページ内をスムーズにスクロールできる「Smooth Scroll behavior polyfill」次のページSmooth Scroll behavior polyfill

関連記事

  1. ad-datepicker

    JavaScript

    アクセシブルなデートピッカーを実装できる「ad-datepicker」

    ad-datepickerはアクセシブルなデートピッカーを実装できるj…

  2. rpage

    JavaScript

    Bootstrapを使ったレスポンシブなページネーション「rpage」

    rpageはBootstrapを使ったレスポンシブに対応したページネー…

  3. DarkTooltip

    JavaScript

    色んなパターンのツールチップを実装できるjQueryプラグイン「DarkTooltip」

    DarkTooltipというjQueryプラグインを使えば、色んなパタ…

  4. Bootstrap Photo Gallery jQuery plugin
  5. jQuery Floating Social Share
  6. TypeIt

    JavaScript

    タイピングアニメーションを実装できる「TypeIt」

    TypeItはタイピングアニメーションを実装できるjQueryプラグイ…

最近の記事

  1. オータムスイートポテトフラペチーノ
  2. 紅葉
  3. ナノケア EH-NA0E
  4. スターバックス コロンビア サンタンデール

アーカイブ

PAGE TOP