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

関連記事

  1. no-image

    JavaScript

    指定したテキストをハイライトとタイピング効果で表示できる「typeLighter.js」

    typeLighter.jsは、指定したテキストをハイライトとタイピン…

  2. Quill

    JavaScript

    高機能なWYSIWYGエディタを実装できる「Quill」

    Quillは豊富なAPIとカスタマイズ性に優れた高機能なWYSIWYG…

  3. Rebox

    JavaScript

    レスポンシブ対応の軽量なLightbox風jQueryプラグイン「Rebox」

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

  4. CaptionerJs

    JavaScript

    画像に開閉できるキャプションを実装できるjQueryプラグイン「CaptionerJs」

    CaptionerJsは画像に開閉できるキャプションを実装することがで…

  5. no-image

    JavaScript

    シンプルな円形のカラーピッカーを実装できる「jQuery-Colorwheel」

    jQuery-Colorwheelはシンプルな円形によるカラーピッカー…

  6. bootstrap-wysihtml5

    JavaScript

    シンプルで美しいWYSIWYGエディタを実装できる「bootstrap-wysihtml5」

    bootstrap-wysihtml5はシンプルでスッキリしたデザイン…

最近の記事

  1. Soundcore Liberty Neo(第2世代)
  2. EH-NA0B
  3. KPS-88
  4. Happy Plugs AIR1
  5. cheero Stream 10000mAh

アーカイブ

PAGE TOP