画像並び替えプラグインレスポンシブ対応

2015.08.25　Posted by Coding_team

Webプログラミング

こんにちは、ウェブラボ技術メモ第15回目です。

今回は画像を綺麗に並べてくれるプラグインの紹介です。

今回使用するプラグインはこちらです。

http://miromannino.github.io/Justified-Gallery/

DLしたファイルの、jsとcssを読み込ませます。

<script src="js/jquery.justifiedGallery.min.js"></script>

1	<script src="js/jquery.justifiedGallery.min.js"></script>

オプションは以下になります。

その他にも色々とありますので、下記にて試してみてください。

http://miromannino.github.io/Justified-Gallery/options-and-events/

$(document).ready(function() {
	$('.gallery').justifiedGallery({
		rowHeight       : 250, // 1行の高さ設定
		fixedHeight     : true, // rowHeightに沿った高さにするか
		margins         : 5, // 画像の隙間設定
		lastRow         : 'nojustify', // 最後の行をどうするか
		randomize       : true, // ランダム
		sort            : false, // ソートをするかどうか
		rel             : 'gallery1', // rel属性の書き換え
		captions        : true, // captionを付けるかどうか
		captionSettings : { animationDuration: 500, visibleOpacity: 0.8, nonVisibleOpacity: 0.0 } // caption設定
	});
});