Official Demo page for MyThumbnail jquery plugin

異なるサイズの画像を並べて瞬時にサイズを揃えられるjQueryプラグイン「MyThumbnail」。
画像は普通に並べると高さやサイズも一定ではなくかといってサイズしていで縮めちゃったとしても幅は一定になりません。
このプラグインを使えば指定のサイズにまるめてくれるだけでなく、トリミングもして画像が変な方向に伸縮しないようにも調整してくれます

次のような画像を並べただけの状態があったとして。


次のように、指定したサイズに調整した上でトリミングもしてくれます（角丸はCSSで指定してます）。


HTMLは次のようにかなり単純に<a>付きの<img>を並べただけです。

<div id='thumbnailList1'>
<a href='//www.google.com'><img src='images/1.jpg'></a>
<a href='http://www.yahoo.com'><img src='images/2.jpg'></a>
<a href='http://www.kfsoft.info'><img src='images/3.jpg'></a>
</div>

jQuery部分のコードは以下で、幅とサイズ、背景色などを指定しています

$("#thumbnailList1 img").MyThumbnail({
    thumbWidth:120,
    thumbHeight:100,
    backgroundColor:"#ccc",
    imageDivClass:"myPic"
});

なんとも簡単にできますね。これを１からやろうとするとちょっとめんどくさい気がします

関連エントリ

• フォーム要素をクールにするためのjQueryプラグイン集
• 小さくで可愛いグラフが描けるjQueryプラグイン「Piety」
• テキストにグラデーションをかけられるjQueryプラグイン「True Gradient Text」
• タイマーを作る際に便利なjQueryプラグイン「jQuery Timer」