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
  2. no-image

    JavaScript

    jQueryの代わりに使用できるマイクロJavaScriptライブラリ「Selector」

    Selectorは、jQueryの代わりに使用することができるマイクロ…

  3. nuContextMenu

    JavaScript

    モダンなコンテキストメニューを実装できる「nuContextMenu」

    nuContextMenuはモダンで軽量なコンテキストメニューを実装で…

  4. infoBox

    JavaScript

    マウスオーバーでインフォメーションボックスを表示させる「infoBox」

    infoBoxはアイコンにマウスオーバーするとインフォメーションボック…

  5. no-image

    JavaScript

    1日のイベントスケジュールを作成できる「Jquery Layoutday plugin」

    Jquery Layoutday pluginは、1日のイベントスケジ…

  6. CSS3 3D Text Plugin for jQuery

最近の記事

  1. s9+
  2. SRS-LSR200
  3. QC30
  4. リンツ リンドール

アーカイブ

PAGE TOP