前の記事 ≪:英語でPHPを学ぶリソース15
次の記事 ≫:フレッシュで高品質な写真加工Photoshopチュートリアル19

異なるサイズの画像を並べて瞬時にサイズを揃えられるjQueryプラグイン「MyThumbnail」

2011年06月27日-はてなブックマーク

スポンサード リンク
[PR] 日々膨大に出現するJS/CSSライブラリ等を意識にとどめておく方法
Official Demo page for MyThumbnail jquery plugin

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

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


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


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

<div id='thumbnailList1'>
<a href='http://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"
});

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

関連エントリ
関連の記事検索:jQuery, 画像, Web制作, プラグイン, JavaScript, Webデザイン
スポンサード リンク

By.KJ : 2011年06月27日 09:02 livedoor Readerで購読 Twitterに投稿

間違いの指摘をしていただける方はメール、あるいはTwitter/FBでお願いします(クリック)