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. jQuery Page

    JavaScript

    モバイルに最適なスライドやフリップを実装できる「jQuery Page」

    jQuery Pageは、スマホなどモバイルに最適なスライドやフリップ…

  2. Tilt Hover Effects

    JavaScript

    ホバーによるチルトエフェクトを実装できる「Tilt Hover Effects」

    指定したアイテムにホバーすることでオシャレなチルトエフェクトを実装する…

  3. t-scroll

    JavaScript

    アニメーションとともにアイテムが一つずつ現れる「t-scroll」

    t-scrollはアニメーションとともにアイテムを一つずつ表示させるこ…

  4. Pogo Slider

    JavaScript

    豊富なスライドアニメーションが揃っているjQueryプラグイン「Pogo Slider」

    Pogo Sliderは豊富なスライドアニメーションが揃っているjQu…

  5. BigText

    JavaScript

    テキストを指定した幅にフィットさせるjQueryプラグイン「BigText」

    BigTextは、テキストの行を、指定した幅にフィットさせるために必要…

  6. Cloud 9 Carousel

    JavaScript

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

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

最近の記事

  1. DCG-CA21
  2. Apple WatchでのMacロック解除を無効
  3. オータムスイートポテトフラペチーノ
  4. 紅葉
  5. ナノケア EH-NA0E

アーカイブ

PAGE TOP