▲

[WP] jQuery Masonryを導入してみた

どうもマユコです。
このブログ、ずっと夏っぽいデザインできてたのですが、さすがにもうこれ以上は無理だということで秋冬デザインにしてみました。
これで来年の3月くらいまでは引っ張りたい所存。

デザインを変えたかったのもあるのですが、今回はjqueryのプラグイン”Masonry”を使い倒してみたかったのでちょっと色々やってみました。

jQuery Masonry（公式サイト）

公式のとおりにやればOKなので、導入はさっくりとできました。
うちの場合はwordpressなのでそのあたりと、多少引っかかったところを備忘で書いとこうと思います。

wordpress＋ Masonry＋Infinite Scroll　です！
導入自体はmasonry – Introduction
Infinite Scrollはmasonry – infinite-scrollをどうぞ。Infinite Scrollは、例えばブログで「次へ」ボタンを押す代わりに、その次のコンテンツをどんどん自動で読みこんでくれるプラグインです。

ひっかかったとこその１：ローディング画像がでない

導入はサクサクとすんだんですが、infinite-scrollで読み込む時のローディング画像がでません。
はて・・・と思って公式のソースをのぞかせてもらったらなんてことはありません、CSSが足りないんです。

CSSに以下のソースを追加。

/* Infinite Scroll loader */
#infscr-loading { 
  text-align: center;
  z-index: 100;
  position: fixed;
  left: 45%;
  bottom: 40px;
  width: 250px;
  padding: 10px;
  background: #000; 
  opacity: 0.8;
  color: #FFF;
  -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
          border-radius: 10px;
}

色とか幅とかいいように変更してくださいね。
でも多分わかりやすいとこには書いてないんですよね、コレ・・・。

ちなみにローディング画像を変えることもできます。

$container.infinitescroll({
				  itemSelector: '.box',
 				  columnWidth: 100,
				itemSelector : '#contents',     // selector for all items you'll retrieve
				loading: {
					finishedMsg: '読み込み終了',
					loadingText  : "読み込み中...",
					img: '画像.gif'　 // ここにローディング画像を入れると適用されます
					}
			},

ひっかかったとこその２：Corner stampが適用されない

とにかく諸々試したかったので、コーナースタンプもやってみることにしました。
その名の通り、右上に固定でコンテンツを置いておけるというもの。このブログの場合は私のプロフィールを置いてみています。
http://masonry.desandro.com/demos/corner-stamp.html

上の公式に書いてあるとおり、


$('#container').masonry({
  itemSelector: '.box',
  columnWidth: 100,
  cornerStampSelector: '.corner-stamp'
});

のようにしてもどうも動きません。
おかしいなあ・・・とまたソースチラ見。

そしたらちゃんとありました。Mason.prototypeメソッドというのを追加します。
以下をそのままコピペでOKです。

// Masonry corner stamp modifications
$.Mason.prototype.resize = function() {
	this._getColumns();
	this._reLayout();
};

$.Mason.prototype._reLayout = function( callback ) {
	var freeCols = this.cols;
	if ( this.options.cornerStampSelector ) {
	  var $cornerStamp = this.element.find( this.options.cornerStampSelector ),
		  cornerStampX = $cornerStamp.offset().left - 
			( this.element.offset().left + this.offset.x + parseInt($cornerStamp.css('marginLeft')) );
	  freeCols = Math.floor( cornerStampX / this.columnWidth );
	}
	// reset columns
	var i = this.cols;
	this.colYs = [];
	while (i--) {
	  this.colYs.push( this.offset.y );
	}

	for ( i = freeCols; i < this.cols; i++ ) {
	  this.colYs[i] = this.offset.y + $cornerStamp.outerHeight(true);
	}

	// apply layout logic to all bricks
	this.layout( this.$bricks, callback );
};

というかそもそもこのページの注意書きのとこに
Get it by copying the $.Mason.prototype methods included in the script in this page’s source.って書いといてくれてましたね。ソース見ろとw

これで、右上に置いときたいコンテンツをCSSで整えてやればOkです。

.corner-stamp{
	float:right;
	width: 420px;
}

その他：imagesLoadedも導入しとく

画像を全部読み込んでから、masonryを動作させます。
これはプラグインが必要なので、https://github.com/desandro/imagesloadedここからDL。

masonry – Introduction
masonry -　images

導入自体は簡単です。

var $container = $('#container');
$container.imagesLoaded(function(){
  $container.masonry({
    itemSelector : '.item',
    columnWidth : 240
  });
});

まとめ

まとめるとこんな感じになりました。

jQuery(document).ready(function($){
			// Masonry corner stamp modifications
			  $.Mason.prototype.resize = function() {
				this._getColumns();
				this._reLayout();
			  };
			  
			  $.Mason.prototype._reLayout = function( callback ) {
				var freeCols = this.cols;
				if ( this.options.cornerStampSelector ) {
				  var $cornerStamp = this.element.find( this.options.cornerStampSelector ),
					  cornerStampX = $cornerStamp.offset().left - 
						( this.element.offset().left + this.offset.x + parseInt($cornerStamp.css('marginLeft')) );
				  freeCols = Math.floor( cornerStampX / this.columnWidth );
				}
				// reset columns
				var i = this.cols;
				this.colYs = [];
				while (i--) {
				  this.colYs.push( this.offset.y );
				}
			
				for ( i = freeCols; i < this.cols; i++ ) {
				  this.colYs[i] = this.offset.y + $cornerStamp.outerHeight(true);
				}
			
				// apply layout logic to all bricks
				this.layout( this.$bricks, callback );
			  };
			  
			var $container = $('.entryArea');
		
			$container.imagesLoaded(function(){
				$container.masonry({
					itemSelector: '.entryBox',
					columnWidth: 250,
					isAnimated: true,
					cornerStampSelector: '#prof'
				});
			});
				
			$container.infinitescroll({
				navSelector  : '.nextArchives',    // selector for the paged navigation 
				nextSelector : '.nextArchives a',  // selector for the NEXT link (to page 2)
				itemSelector : '.entryBox',     // selector for all items you'll retrieve
				loading: {
					finishedMsg: '読み込み終了',
					loadingText  : "読み込み中...",
					}
			},
			// trigger Masonry as a callback
			function( newElements ) {
			var $newElems = $( newElements );
				// ensure that images load before adding to masonry layout
				$newElems.imagesLoaded(function(){
					  $container.masonry( 'appended', $newElems, true ); 
				});
			});	
});

48行目のloadingText : “読み込み中…”,が適用されないんです・・・何故。調べ中。
ブラウザサイズが変わって動くときにアニメーションを付けてますが、これは37行目の

isAnimated: true,

だけでOK。

導入しといて何なんですけど、やっぱりブログなんで単純に「ちょっと見難いかな・・・」ってのはありますねw
個人的な好みですが、文字が多いとやっぱり煩雑に見えるし、時系列がつかみにくいなあと思います。
文字はタイトルくらいで画像がババーっと並んだりすると見栄えよさそうですね。

どんどん勝手に読み込まれていくのも、好きずきかとは思いますがちょっと煩わしいかなあ。クリックで読みこむように変えたほうが良いかなあ、とか。

でもとにかくこのMasonryをちょっと試してみたかったんですよね。
ギャラリー系とか作ってみようかな～

以上、すぐ忘れちゃうので備忘でしたっ

前後の記事

«
»