Google+風に、Picasaの画像を高さを揃えたイメージギャラリーを実装するjQueryプラグイン・jquery-photowal

Google+ライクな、画像の高さを揃えた
イメージギャラリーを実装するjQuery
プラグイン・jquery-photowalのご紹介。
この手のは若干使いどころが限られます
けどなんか使いたくなっちゃうんです
よね。

Google+自体あまり話題を見かけない印象ですが、個人的に動向を追ってるフォトグラファーさんなんかは凄く活発な印象です。G+は写真コンテンツと凄く相性良さそうですし、FBとは別の切り口で市場を確保しそうな気はします。

という余談はおいといて、Google+ライクなフォトギャラリーを実装するjQueryプラグインです。PicasaのAPIで実装するので、Google+に投稿した画像を自分のサイトでも同じように表現したい、みたいな方向けですかね。日本じゃあんまりいなさそうですが。

jquery-photowal

画像の高さを統一してレンガ風に表示します。Google+っぽい感じで。マウスを乗せたら拡大し、クリックしたらLightbox、っていうインターフェース。デモにアレな画像が含まれているのでキャプチャ載せられず申し訳ないですが。

コード

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery-photowall.js"></script>
<link rel="stylesheet" type="text/css" href="jquery-photowall.css">

本体とかプラグインを読み込みます。

で、オプションとか書く。データはリクエスト投げれば、JSONフォーマットで返ってきます。

<script type="text/javascript">
$(document).ready(function(){
    PhotoWall.init({
   el:             '#gallery'          // ギャラリーを実装する場所
   ,zoom:          true                // ズームの可否
   ,zoomAction:    'mouseenter'        // ズームアクション
   ,zoomTimeout:   500                 // タイムアウトの指定
   ,zoomDuration:  100                 // ズームの継続時間
   ,showBox:       true                // フルスクリーンモード(Lightbox)
   ,showBoxSocial: true                // Loghtbox内にソーシャルボタンを含めるかどうか
   ,padding:       10                  // ギャラリーでの画像同士のpadding
   ,lineMaxHeight: 150                 // 高さ
    });

	$.ajax({//Picasa APIキーはここで指定する
		url: 'https://picasaweb.google.com/data/feed/api/user/****/albumid/***'
			 +'/?alt=json&fields=entry(gphoto:id,title,media:group(media:thumbnail,media:'
			 +'content))&imgmax=720',
		dataType: 'jsonp',

		success: function(data){
		    var photos = {}
	        if(!data.feed.entry) return;
	        for(var i in data.feed.entry) {
		        var e     = data.feed.entry[i].media$group;
		        var id    = data.feed.entry[i].gphoto$id.$t;
		        
		        var t1h   = e.media$thumbnail[2].height;
		        var t1w   = e.media$thumbnail[2].width;
		        var t1src = e.media$thumbnail[2].url
		        
		        var t2w   = Math.round(t1w * 2);
		        var t2h   = Math.round(t1h * 2);

		        var t2src = e.media$content[0].url+'/../../w'+t2w+'-h'+t2h+'/';

	            var bsrc  = e.media$content[0].url;
	            var bw    = e.media$content[0].width;
	            var bh    = e.media$content[0].height;
		        photos[id] = {id:id,img:bsrc,width:bw,height:bh,th:[{src:t1src,width:t1w,height:t1h},{src:t2src,width:t2w,height:t2h}]};
	        }	
		    PhotoWall.load(photos);
	    }
	});
});
</script>

APIはここで手に入ります→Picasa Web Albums Data API

マークアップは空要素用意すれば良いだけ。

<div id="gallery"> 
	<div class="body"></div> 
</div>

以上です。少し前ならPicasa APIで、とかはスルーでしたけど、Google+と繋がってるので備忘録として抑えておきます・・リンク先にデモがあるんですが、少々R18ですので閲覧にはお気をつけて。

今日は大晦日ですねー。皆さんお忙しいことと思います。どうぞご自愛下さい。

それでは良いお年を。

jquery-photowal