jQueryプラグイン「jquery.flickr」でFlickrの写真を取得する

フォトギャラリーのページを作りたいけど、更新するのが面倒だし…という方にオススメなのがjQueryのプラグイン「jquery.flickr」です。
Flickrから取得した画像を任意の場所に表示させます。簡単にいろいろ設定が変えられるのでお手軽です。

今回使用するプラグインはコレ
jquery.flickr
さっそくFlickrから写真を取得してみましょう。

まずjQueryとjquery.flickrを読み込む

headに以下のタグを記述します。





追記:すみません、Frickr APIの説明を飛ばしていました。
※APIキーは「The App Garden」にて発行できます。
そしてbodyの写真を表示させたい場所に以下のタグを記述します。

<div id="galleryFlickr"></div>

サンプル1
はい!これで最近の投稿から10枚の画像が取得できました。
サムネイルをクリックすると、大きい画像が表示されます。

パラメータを追加・変更してみよう

次は取得する画像を変えてみます。
デフォルトでは最近の投稿から取得されますが、これをユーザーIDやグループID、タグから参照して取得できるようにします。

$(document).ready(function(){
	$('#galleryFlickr').flickr({
		api_key: 'APIキー',
		type: 'search',/*検索するときはsearchを指定*/
		user_id: 'ユーザーID',
		per_page: 20
	});
});

サンプル2
こんな感じで書くと、任意のユーザーの写真を取得できます。ついでにサムネイルの数も20枚に増やしてみました。
※ユーザーIDはここで調べることができます。

他にも使えるパラメータ

thumb_size⇒サムネイルのサイズが設定できます。デフォルトは’s’(75x75)ですが、他に ‘t’ (100x?)と’m’ (240x?)が設定できます。
size⇒サムネイルをクリックして表示される画像サイズを設定できます。デフォルトは(500x?)、他に’m’ (240x?), ‘b’ (1024x?), ‘o’ (元のサイズ)が設定できる。
per_page⇒表示する画像の数を設定できます。初期値は100、最大値は500です。などなど
いろいろ出し方を変えてみてください。

見た目を整える

なんだか見た目がつまらない?と感じたら、装飾してあげましょう。
枠線をつけたり、jQueryのlightbox系プラグインを取り入れてみるのもいいかも。

ざっと紹介してみましたが、ちょっとしたスペースに読み込むことができるので便利です。このブログでも右のスペースに表示させています。こちらも暇なときに見ていただけると有難いです。

Trackback


まだコメントはありません

感想・質問等受付けております。

Leave a Comment




コメント