【簡単】jqueryプラグインのナノギャラリー2を紹介します

プログラミングのソースコード

 

ティロ
こんにちは、理系大学生のティロといいます

今回は簡単にギャラリーを作ることが出来る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タグの中に以下のように書いてください。

 

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に設定します。

 

pbulicにする
pbulicにする

 

最後にAlbumsに行き、写真のurlにuserIDとphotosetが表示されているのでそれぞれコピーしてファイルに貼り付けてください。

 

userIDコピー

 

貼り付けたら完了です。flickrに保存した写真がwebサイトに反映されます。

 

 

細かい調整等

thumbnailWidthでサムネイルの画像の大きさを変更できます。今回はサムネイルありのギャラリーページでしたがnanogallry 2(ナノギャラリー2)ではほかにも様々な種類のギャラリーがあります。詳しい内容を知りたい方はこちらを参照してください。

nanogallry 2

 

まとめ

nanogallry 2(ナノギャラリー2)は簡単に導入できる
サーバーに写真を置かないので容量の節約になる
レスポンシブデザインに対応している