jQueryで遊んでみる その8

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


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

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

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

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

CamCam サンプル




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


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


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


Related Posts

5 Comments

  • Kawa

    5月 th, 2010 11:49 PM

    おお!これいい!
    ぜひプラグイン化をw

  • かむ

    5月 th, 2010 12:13 AM

    Kawaさん
    あい〜!

  • Tiger

    9月 st, 2011 2:51 AM

    I just hope whoever wirets these keeps writing more!

  • Cheyanna

    9月 st, 2011 7:53 PM

    Felt so hopeless lokiong for answers to my questions…until now.

  • svphcc

    9月 rd, 2011 1:56 AM

    Y4Ol5d yhfofexetplr