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」を活用されてみてはいかがでしょうか?

関連記事

  1. no-image

    JavaScript

    縦スクロールによるフォトギャラリー実装「Simple Scroll Gallery」

    Simple Scroll Galleryは縦スクロールによるかっこい…

  2. Remodal

    JavaScript

    レスポンシブ対応のお洒落なモーダルウィンドウを実装できるjQueryプラグイン「Remodal」

    RemodalというjQueryプラグインを使えば、レスポンシブに対応…

  3. Cloud 9 Carousel

    JavaScript

    サクサク動作する3Dカルーセルを実装できる「Cloud 9 Carousel」

    Cloud 9 Carouselはサクサク動作する3Dカルーセルを実装…

  4. FlipClock.js

    JavaScript

    時計・タイマー・カウントダウンを実装できるjQueryプラグイン「FlipClock.js」

    FlipClock.jsというjQueryプラグインを使えば、時計・タ…

  5. Flex-Slider-jQuery

    JavaScript

    シングルでもマルチでもOKなフレキシブルなスライダー「Flex-Slider-jQuery」

    Flex-Slider-jQueryは、フレキシブルなスライダーを実装…

最近の記事

  1. Anker PowerPort Atom PD 4
  2. USB-2H401BKN
  3. Dyson Pure Cool Me
  4. ルック セレクション

アーカイブ

PAGE TOP