soogle’s diary

soogle life log

画像サイズをCSS変更なしで、jqueryのみで伸縮ができるjquery.MyThumbnail.jsの設定の仕方[注意事項]

通常画像を切り抜く場合はCSSでclip rectでサイズを変えるものだとおもっていたのだが、
jqueryでサイズ変更をするのがトレンドらしい。これは簡単。
スタイルシート[CSS]/イメージ/画像を切り抜く - TAG index Webサイト

img {
position: absolute;
clip: rect(50px 500px 300px 100px);
}
  • 参考リンク

Official Demo page for MyThumbnail jquery plugin
異なるサイズの画像を並べて瞬時にサイズを揃えられるjQueryプラグイン「MyThumbnail」:phpspot開発日誌

いくつかのサンプルから拝借する、
wordpressのコーディング規約にも書いてあるが、タグはダブルクォートで囲っておいてほしいが、、それは別として
WordPress コーディング基準 - WordPress Codex 日本語版

ここで大切なことは、MyThumbnailが後に書かれていること。
これを決して前に書いてはいけない。HTMLは上から読まれる以上、
1.必要なjs読み込み
2.画像をレンダリング
3.その後jqueryでHTMLを解析して、マッチした部分だけ画像を変形
という流れだと思われるので、ひとまず画像変換系は後に書いておいたほうがこのライブラリについてはいいのではないか?と
思われる(構文があってたのに変更がされない涙とずっとないてた人がいたので)。

中身を読んでみると、引数で渡した数値をもとにwidth,lengthなど、
background-position:center;background-size:などをかませながら、すごいhtmlをつくっていく
自力で書こうと思えばかけるかもしれないが、ちょこっとした設定でここまでハードなhtmlをブラウザ側で解釈して
つくってくれるなら、とても便利だと思う。サーバ側の負荷もいくらか減りそうだし。その分ブラウザは重くなるわけですが。

<div class="myThumbDivAutoAdd myPic" style="float: left; width: 100px; height: 100px; overflow: hidden; background-color: rgb(204, 204, 204); background-image: url("http://a5.sphotos.ak.fbcdn.net/hphotos-ak-snc6/DEMODEMO.jpg"); background-repeat: no-repeat; background-attachment: scroll; background-clip: border-box; background-origin: padding-box; background-position: center center; background-size: 138.235px 100px;"></div>
  • sample
<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>
$("#thumbnailList1 img").MyThumbnail({ 
    thumbWidth:120, 
    thumbHeight:100, 
    backgroundColor:"#ccc", 
    imageDivClass:"myPic" 
});