nanogallery2

JavaScript

美しくてハイクオリティなイメージギャラリーを実装できる「nanogallery2」

nanogallery2はパーソナルニーズにピッタリなイメージギャラリーを実装することができるJSライブラリです。美しいハイクオリティなイメージギャラリーをWebサイト内に設置したいという人にオススメです。

nanogallery2

デモ

デモではグリッドでキレイに整列されたサムネイル画像が表示されており、各画像をクリックすると拡大された単品の画像に画面が切り替わります。拡大画像画面では左右に前後移動できる矢印が用意されているほか、キーボードの矢印キーでも前後に移動可能です。

さらに画面右上にある「+」と「-」のアイコンから、画像を拡大・縮小することもできます。

画像の細部まで見たいときや、もうちょっと小さくして見たいときなんかに便利ですね。ほかにも、シェアボタンや閉じるボタンも画面右上にまとめられてあります。

また、デモの画像一覧の出力ですが、デモページを読み込んだときには「Flickr – photostream」になっていますが、ほかにも、Flickr – albums、Flickr – one album、Google Photos – albums、Google Photos – one album、Google Photos – one private albumなどから画像を出力させることもできます。

どのサービスから出力させるかは、HTMLタグ内に記述する「data-nanogallery2」という属性に指定します。

設定できる内容には、kind、userID、thumbnailHeight、albumといった項目が用意されています。例えば、フリッカーから画像を持ってきたい場合は、「kind」に「flickr」を指定すればOKです。それから、「userID」には自分のユーザーIDを指定します。

HTMLのマークアップでシンプルに使用できるのはとてもありがたいですね。

というわけで、美しいハイクオリティなイメージギャラリーを手軽に実装したい人は、ぜひ「nanogallery2」をチェックしてみてください。

nanogallery2

GridTabグリッドベースのレスポンシブなタブを実装できるjQueryプラグイン「GridTab」前のページ

タッチ対応で画像拡大やパンもできるjQueryプラグイン「EasyZoom」次のページEasyZoom

関連記事

  1. circleChart

    JavaScript

    多彩なカスタマイズができる円形チャート「circleChart」

    circleChartは多彩なカスタマイズを実現した円形チャートを実装…

  2. Guardian

    JavaScript

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

    Guardianはフォームにバリデーション機能を実装することができるj…

  3. baffle.js

    JavaScript

    DOM要素内のテキストを難読化させて読めるようにする「baffle.js」

    baffle.jsは、DOM要素内のテキストを暗号化して難読化させ、さ…

  4. Stripe.Com Navigation

    JavaScript

    コンテナがアニメーションで可変するナビゲーション「Stripe.Com Navigation」

    ナビゲーションメニューのコンテナがアニメーションで可変するドロップダウ…

  5. Stepper.js

    JavaScript

    数値を手軽にアップ・ダウンできるステッパーを実装できる「Stepper.js」

    Stepper.jsは数値入力ボックスでの数値を手軽にアップ・ダウンで…

  6. no-image

    JavaScript

    フロントエンドアプリケーションを構築するためのJSライブラリ「HyperApp」

    HyperAppは、フロントエンドアプリケーションを構築するための1K…

最近の記事

  1. 長十郎
  2. COMOLI シルクネルシャツ
  3. WiMAX
  4. 甘柿
PAGE TOP