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

関連記事

  1. no-image

    JavaScript

    ダイナミックな自動スライドショーを実装できる「CSS + jQuery Gallery」

    CSS + jQuery Galleryはダイナミックでかっこいい自動…

  2. JavaScript

    テキストに滑らかに動くアニメーションをつけることができるjQueryプラグイン「animateTex…

    テキストに滑らかに動くかっこいいアニメーションをつけることができるjQ…

  3. JavaScript

    カスタマイズも自由にできるjQuery「bxSlider」の使い方

    個人的にかなりよさげなjQueryスライダーを使ってみました。その名も…

  4. ad-datepicker

    JavaScript

    アクセシブルなデートピッカーを実装できる「ad-datepicker」

    ad-datepickerはアクセシブルなデートピッカーを実装できるj…

  5. Horizontal Timeline

    JavaScript

    水平方向のタイムラインを実装できる「Horizontal Timeline」

    Horizontal Timelineは水平方向に移動可能なタイムライ…

  6. Tendina

    JavaScript

    簡単で素早くドロップダウンメニューを実装できるjQueryプラグイン「Tendina」

    TendinaというjQueryプラグインを使えば、とても簡単で素早く…

最近の記事

  1. 三菱ブレッドオーブン
  2. 浜離宮恩賜庭園

アーカイブ

PAGE TOP