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. JavaScript

    立体的なナビゲーション表示を実装することができるjQueryプラグイン「Box Lid」

    立体的なナビゲーション表示を実装できるjQueryプラグイン「Box …

  2. NO IMAGE

    JavaScript

    フレキシブルで軽量なJavaScriptモーダル実装「Vanilla Modal」

    Vanilla Modalは、フレキシブルでファイル容量も軽量なCSS…

  3. Excolo Slider

    JavaScript

    タッチにも対応しているシンプルなjQueryスライダー「Excolo Slider」

    タッチやマウススライドにも対応しているシンプルなjQueryスライダー…

  4. no-image
  5. jQuery Responsive Tabs
  6. trunk8

    JavaScript

    長い(はみ出した)テキストを「・・・」に置き換えてくれるjQueryプラグイン「trunk8」

    長いテキストやはみ出したテキストを「・・・」といった文字に置き換えてく…

最近の記事

  1. 200-DGBG020
  2. Anker PowerPort 5-in-1 37.5W Hub
  3. α7C + FE28-60mm F4-5.6
  4. Apple Watch Series 6

アーカイブ

PAGE TOP