• かちびと.net

    Google+風に、Picasaの画像を高さを揃えたイメージギャラリーを実装するjQueryプラグイン・jquery-photowalのご紹介。Picasa APIを使ってギャラリーを構築します。

    Kudos for

    WordPress jQuery
  • About This

    Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。

    Kachibito.net is a community-based website for web designers and developers. The site includes a popular weblog, a design gallery, a open source software, design tips, and the various web-news.

  • Links

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

URL :
TRB :

Comments & Trackbacks (3)

  1. 詠み人知らず

    アレな画像、気になったので見てみたらほんとにアレだったw

    • シロ

      なかなかアレですよねw

  2. あべのみっくす

    アレな画像がめっちゃ気になったのですが2014年現在ちょっと確認できず非常に残念…w
    それはさておきすみません、こちらは1つのアルバムしか読み込めないのでしょうか。

    みたいな感じで同HTML内の別場所に異なるアルバム読み込ませたいなと思ってるんですが…
    可能であればどのように記述すれば良いかお分かりでしょうか。

Twitter

Web制作に役立つそうなリソースを独断と好みで配信しています。

かちびと.netにリンクの無いトラックバックはお受けいていません。
コメントされる前にガイドラインをご覧下さい。

twitter facebook rss contact

Ads

Posts

Contact

Services