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

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

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

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

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

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

<link rel="stylesheet" type="text/css" href="css/justifiedGallery.min.css">
<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設定
	});
});

作ったDEMOがこちらになります。

DEMO

rel属性を書き換えられるので、LightBoxと併用して使うといいかもしれませんね。

外側の要素のwidthを%で指定すれば、後は自動的にレスポンシブ対応もしてくれます！

便利ですね。

画像は以下のサイトよりダウンロードさせて頂きました。

ソザイング

以上ウェブラボ技術メモでした。