[jQuery]ギャラリーサイトや商品一覧などで使えそうな、異なるサイズの画像を指定サイズにフィットさせるjQueryプラグイン – ImageFit

便利なプラグインを発見しましたー^^
異なるサイズでも指定したサイズにフィットしてくれるjQueryプラグインの紹介です。
この手のプラグインは以前から探していまして、
先日はMyThumbnailを使って美容院のスタイルカタログのページを作りました。
他にはNailThumbなんかもありますが、
今回のはなかなか使い勝手がよさそうなので、練習がてらにメモしておきます。

■サンプル

■必要ファイル

■まずはサンプルを作ってみました!

サイズの違う画像ですが、ちゃんとcssで指定したサイズに変更されてますね~^^
このサイト重いですから…ちゃんと表示されてないかも…^^;

■設置方法

jQueryとjquery.imagefit.jsを読み込みます。

html

<script src='http://code.jquery.com/jquery-1.10.2.min.js'></script>
<script src='jquery.imagefit.js'></script>

今回はul要素にクラス名を付けて画像をli要素で囲っています。
もちろん、同じクラス名のついたdiv要素などでも問題ありません。
指定したクラス名が付いたタグ全てに適用されます。

html

<ul class="list-img">
	<li><img src="/img/001.jpg"></li>
	<li><img src="/img/002.jpg"></li>
	<li><img src="/img/003.jpg"></li>
	<li><img src="/img/004.jpg"></li>
	<li><img src="/img/005.jpg"></li>
	<li><img src="/img/006.jpg"></li>
	<li><img src="/img/007.jpg"></li>
	<li><img src="/img/009.jpg"></li>
</ul>

jQueryのセレクタで指定し、スクリプトを実行します。

javascript

$(window).load(function() {
	$('.list-img li').imagefit();
});

オプションで画像の配置や位置の調整も可能です。

javascript

$(window).load(function() {
	$('.list-img li').imagefit({
		mode: 'outside',   //トリミング or 縮小して画像全表示
		force : 'false',   //画像指定サイズより小さい時にどうするか…
		halign : 'center', //左寄せ or 中央 or 右寄せ
		valign : 'middle'  //上寄せ or 中央 or 下寄席
	});
});

imageFitのサイトではオプションのテストができます。
コードも表示されるのでコピペしてセレクタだけ変更して使えます!

imagefit-cap

LATEST ENTRY - 新着記事 -

CATEGORY - カテゴリ一覧 -