MG Space

JavaScript

Google画像のようなアコーディオンプラグイン「MG Space」

MG SpaceはGoogle画像のようなjQueryアコーディオンプラグインです。サムネイルを並べたグリッドスタイルやスライダー、画像とテキストを組み合わせたものなど、いろんなパターンがあります。

MG Space

デモ

デモでは、「Thumbnail Galleries」「Sliders」「Or really anything」の3つのタイプが用意されています。それぞれの項目にある「CLICK ME!」ボタンをクリックすると、その下に各タイプのコンテンツが表示されます。

Thumbnail Galleriesはグリッドスタイルで綺麗に並べられたサムネイル画像が表示され、Slidersは1枚の大きい画像が表示されて左右の矢印ボタンから前後にスライドできるようになっています。

また、Or really anythingでは左側に画像が、右側にはテキストが表示されたレイアウトのコンテンツが表示されます。

ほかにも、ページ下部にBasic Grid Demo、Basic No Grid Demo、Multiple Grid Demo、History Demo、Slick JS Demoといったデモも用意されています。

いろんなパターンがあるので、画像をどのようにユーザーに見せたいか、それに合わせて最適なものをチョイスできるのがいいですね。

使い方・マークアップともに簡単なので、気になる人はぜひチェックしてみてください。ライセンスはMITとのこと。

MG Space

関連記事

  1. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryのbindメソッドとliveメソッドの簡単な違いや使い方

    bindとliveの違いがちょっとわかりずらかったのでまとめてみました…

  2. no-image

    JavaScript

    シンプルなモバイルメニューを実装できる「offcanvas-mobile-menu」

    offcanvas-mobile-menuは、シンプルでモバイルフレン…

  3. Modaal

    JavaScript

    アクセシビリティに優れたモーダルウィンドウを実装できる「Modaal」

    ModaalはWCAG 2.0のレベルAAをサポートしているアクセシビ…

  4. JavaScript

    スクロール時にナビゲーションが上部に固定されるレスポンシブ対応のjQueryプラグイン「HeadSh…

    スクロールするとナビゲーションが上部に固定配置されるjQueryプラグ…

  5. JavaScript

    スクロールしても固定表示されてついてくるjQueryプラグイン「Sticky」

    StickyというjQueryプラグインを使えば、スクロールしても固定…

  6. no-image

    JavaScript

    レスポンシブ対応でモバイルフレンドリーなjQueryデートピッカー・タイムピッカー「pickadat…

    pickadateはレスポンシブに対応したモバイルフレンドリーなデート…

最近の記事

  1. EH-NA0B
  2. KPS-88
  3. Happy Plugs AIR1
  4. cheero Stream 10000mAh
  5. BOSE HOME SPEAKER 300

アーカイブ

PAGE TOP