xGallerify

JavaScript

サイズが異なる画像でもキレイに表示できるギャラリー実装「xGallerify」

xGallerifyはギャラリーを作成するのに最適なjQueryプラグインです。軽量なファイルでできており、容量はわずか3KBしかありません! さらに、レシポンシブに対応しているので、スマートフォンサイトの作成にも適しているプラグインです。もちろん無料でダウンロードできます。対応ブラウザはIE、Chrome、Firefox、Vivaldi、Safariで、いずれもしっかり表示されました。

xGallerifyは表示したいサイズとカラム数を

デモ

xGallerifyは、CSSの記述がとても少ないことが特徴です。ダウンロードしたファイルにはCSSファイルはなく、HTMLファイルに直接CSSを記述しています。それくらい最小限のCSSで足り、とても簡単に実装できます。基本的には、CSSを追加で記述しなくても大丈夫です。

画像はそれぞれの表示エリアへ最適なサイズで表示させることができます。異なる画像サイズであっても、指定した画像サイズに自動で変換してくれるので、自ら画像のリサイズを準備する必要がありません。また、同じ高さで画像を表示してくれます。

レシポンシブにも対応しており、ブラウザのサイズとカラム数も行ごとに指定することができる点でも優れています。事前にjsファイルで定義されているので、それを最適な数値に書き換えて使用してください。

画像はdiv要素で囲まれており、自由にマージン(余白)を指定できます。

画像の拡大機能を備えていないのが、少しだけ残念な点ですが、大きめのサイズで表示させることでそこまで問題にはならないかと思います。スマートフォンサイトでは1行に1枚の画像を表示できるので、ユーザビリティを意識したページが作成できます。もちろん、a要素でリンクを設置できるので、更に大きい画像を別ページへ表示させることでも解決できます。

サイズの異なる画像をキレイに表示させたギャラリーをつくりたい場合は、ぜひxGallerifyをチェックしてみてください。

xGallerify

Bootstrap Photo Gallery jQuery pluginレスポンシブ対応の整列されたフォトギャラリー「Bootstrap Photo Gallery jQuery plugin」前のページ

ランダムにテキスト(クオート)を表示させる「Random Quote Machine」次のページRandom Quote Machine

関連記事

  1. JavaScript

    文章の段落にコメントできるjQueryプラグイン「SideComments.js」

    おもしろそうだったのでメモがてらご紹介。SideComments.js…

  2. jQuery GoUp!

    JavaScript

    ページ上部にスクロール移動してくれる「jQuery GoUp!」

    jQuery GoUp!は、ページ上部にスクロール移動してくれるシンプ…

  3. Fixit

    JavaScript

    要素を特定の位置に固定できるjQueryプラグイン「Fixit」

    Fixitは要素を特定の位置に固定することができるjQueryプラグイ…

  4. Bootstrap Dropdown Hover
  5. h5Validate

    JavaScript

    HTML5のフォームバリデーションを実装できるjQueryプラグイン「h5Validate」

    h5ValidateはHTML5によるフォームバリデーションを実装する…

  6. SimpleAccordion

    JavaScript

    シンプルなアコーディオンを実装できるjQueryプラグイン「SimpleAccordion」

    SimpleAccordionは、シンプルなアコーディオンを実装するこ…

最近の記事

  1. ライオン システマ 超コンパクト ふつう
  2. タリーズ ハムチーズ&サラダサンド
  3. クリニカのY字タイプのフロス
  4. 日和山公園の桜
  5. 成城石井 フレンチロースト

アーカイブ

PAGE TOP