今回は簡単にギャラリーを作ることが出来るjQueryプラグインのナノギャラリーの使い方について分かりやすく解説します。ネットに情報があまり載っていなかったので記事にしました。
nanogallry 2(ナノギャラリー2)とは
nanogallry 2(ナノギャラリー2)はスマートフォンとパソコンに対応したjQueryプラグインです。オープンソースなので無料で利用することができます。
クラウドから写真をダウンロードしてwebサイトに反映させることが出来ます。今回は無料のクラウドサービスであるflickrを使います。
ナノギャラリーを使うことで簡単にレスポンシブデザインに対応ギャラリーページを作ることが出来ます。
私は大学の部活のホームページにナノギャラリー2を使いました。
こちらのページは明治大学天文部惑星班のギャラリーページです。惑星班が撮影した様々な天体の写真を掲載しています。…
nanogallry 2(ナノギャラリー2)の使い方
GitHubでファイルをダウンロード、htmlファイルに追加
まずGitHubでファイルをダウンロードします。こちらからダウンロード してください。このページの右のclone or dawnloadからファイルをダウンロードします。次にファイルを解凍します。
エディタを開き、nanogallery2.min.cssとnanogallery2.min.jsを読み込みます。
そこで注意していただきたい点はナノギャラリー2はjQueryで作られているので必ずナノギャラリー2のファイルの前にjQueryファイルを読み込んでください。
bodyタグの中に以下のように書いてください。
1 2 3 4 5 6 7 8 | <div id="nanogallery2" data-nanogallery2='{ "kind": "flickr", "userID": "", "photoset": "", "thumbnailLabel": { "position" : "onBottom" }, "thumbnailHeight": "auto", "thumbnailWidth": 300 }'> |
userIDとphotosetは人によって違うので空欄にしてください。このあと説明します。
thumbnailWidthは好きな幅を書いてください。今回は300px とします。
Flickrとは
Flickrはアメリカの基本無料のクラウドサービスです。写真や動画を1000点まで保存でき、一般向けに公開することが出来ます。日本語版がないので少しわかりにくいですが慣れるとても便利なクラウドサービスです。また写真を非公開にすることもできるので保存用としても使うことができます。ナノギャラリー2はFlickrに保存した写真がサイトに反映されます。
こちらからflickrに登録してください。
https://www.flickr.com/
Flickerの写真をwebサイトに反映させる
基本的な使い方は他のサイトに分かりやすく解説されていますのでここでは自分のwebサイトにFlickrの写真を載せるための使い方を解説します。
まず写真をアップロードします。右上のカメラのアイコンをクリックします。
そこにFlickrにアップロードしたい写真をドラックします。
次に写真にタイトルや簡単な説明を書きます。このタイトルがwebサイトのギャラリーページの写真のタイトルになります。簡単な説明を書くとギャラリーページの写真をクリックしたとき、タイトルの下に表示されます。
タイトルと説明を書き終えたら写真をすべてマウスで選択します。それかCtrl+aで全選択します。そのあと左側にあるAlbumを選択しアルバムを作ります。作り終えたら、右上のアップロードをクリックし写真をアップロードします。
Camera Rollをクリックしアップロードした写真を選択します。下に選択した写真が出てきます。1番左側のPrivacyを選択しpublicに設定します。
最後にAlbumsに行き、写真のurlにuserIDとphotosetが表示されているのでそれぞれコピーしてファイルに貼り付けてください。
貼り付けたら完了です。flickrに保存した写真がwebサイトに反映されます。
細かい調整等
thumbnailWidthでサムネイルの画像の大きさを変更できます。今回はサムネイルありのギャラリーページでしたがnanogallry 2(ナノギャラリー2)ではほかにも様々な種類のギャラリーがあります。詳しい内容を知りたい方はこちらを参照してください。