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. Sticker.js

    JavaScript

    ペラッとめくるようなエフェクトが素敵なJSライブラリ「Sticker.js」

    画像や要素をペラッとめくるようなエフェクトを実装できるJSライブラリ「…

  2. jquery.enhsplitter

    JavaScript

    コンテンツを分離できるフレーム実装「jquery.enhsplitter」

    jquery.enhsplitterはコンテンツを分離させるフレームを…

  3. SPOILER ALERT!

    JavaScript

    画像やテキストにボカシを入れることができるjQueryプラグイン「SPOILER ALERT!」

    画像やテキストといった部分にボカシを入れることができるjQueryプラ…

  4. no-image
  5. LC Micro Slider
  6. Jquery Tab Plugin

    JavaScript

    シンプルで見やすいタブパネルを実装できる「Jquery Tab Plugin」

    Jquery Tab Pluginはシンプルで見やすく、そして操作しや…

最近の記事

  1. macOS Mojaveのダークモード
  2. Olli
  3. 単語帳メーカー(Flashcard Maker App)
  4. 1Password 7

Facebookページ

PAGE TOP