0

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

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

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

 

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

 

DEMO

 

 

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

 

1.HTMLを記述

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

 

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

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

 

3.JavaScriptを記述

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

 

4.CSSを記述

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

 

 

5.オプション

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

 

以上になります。


 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

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