jQueryで遊んでみるその8

Home » Tech&Tips » jQueryで遊んでみるその8

jQueryで遊んでみるその8

Posted by: かむ Posted date: 5月 24, 2010 | 5 Comments

今日みたいな大雨の日はjQueryリファレンスを読んで、
画像の表示をなんとかしたくなりますよね。
（ならないですかそうですか）

ということでjQueryで
画像サイズを取得して特定のエリアにぴったりはめ込んでしまうという
(リサイズ&クロップする)サンプル。

画像の縦横比率、ピクセルサイズ関係なし。
指定エリアにめいっぱい収めて、
はみ出るところはクロップしてセンタリングします。

ブログやシステムでユーザがアップした
どうやったらそんな画像になるんだみたいな
斜め上から来たトンでも画像でも、スッキリ一覧に。

せっかくなので、フェイドインとローディングも付けてみた。

CamCam　サンプル

CSSもjQueryで割り当ててるので、Javascriptを使わない環境用に
別途CSSは用意した方がいいかも。(一応書いてはある

でまあこういうのをプラグイン化したらいいんだよな。
っていう話しは次回あたりで。

****
Windows IE 6でもOK.
Firefox Chrome Safariで確認。