異なるサイズの画像をフィットさせるjQueryプラグイン「ImageFit」

ギャラリーや商品カタログページなどで画像を並べて一覧表示する際に、異なるサイズの画像でもきちんと揃えて表示させたい時に利用できるjQueryプラグイン「ImageFit」をご紹介します。

まずは、サンプルを確認してみてください。

サンプルのような、指定したサイズのサムネイルを一覧で並べて表示させてみましょう。

1.HTMLを記述

サムネイル表示したい要素をliタグで並べて配置しています。その際に、ulタグにクラス名（.filelist）を指定しておきます。

<ul class="filelist">
	<li><img src="images/photo1.jpg"></li>
	<li><img src="images/photo2.jpg"></li>
	<li><img src="images/photo3.jpg"></li>
	<li><img src="images/photo4.jpg"></li>
	<li><img src="images/photo5.jpg"></li>
	<li><img src="images/photo6.jpg"></li>
</ul>

</ul>

2.jQuery本体とjquery.imagefit.jsを読み込む

jsフォルダの中の「jquery.imagefit.js」を読み込みます。

<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="js/jquery.imagefit.js"></script>

1 2	<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <script src="js/jquery.imagefit.js"></script>

3.JavaScriptを記述

オプションがいくつかありますが、それは後述します。

<script>
	$(window).load(function() {
	  $('.filelist li').imagefit({
	    mode: 'outside',
	    force : 'false',
	    halign : 'center',
	    valign : 'middle'
	  });
	});
</script>

$(window).load(function() {

$('.filelist li').imagefit({

mode: 'outside',

force : 'false',

halign : 'center',

valign : 'middle'

});

</script>

4.CSSを記述

それぞれのサムネイル画像が150×150pxになるようにCSSで指定します。

ul.filelist li {
	width:150px;
	height:150px;
	float:left;
	margin: 0 10px 10px 0;
}

ul.filelist li {

width:150px;

height:150px;

float:left;

margin: 0 10px 10px 0;

}

5.オプション

mode	outside（指定サイズでトリミング）,inside（縮小して全画面表示）
force	指定サイズよりも使用画像が小さいときにどうするか
halign	let（左寄せ）,center（中央寄せ）,right（右寄せ）
valign	top（上寄せ）,middle（中央寄せ）,bottom（下寄せ）

以上になります。