jQuery NailThumbを使って自動でサムネイルを生成する

こんにちは。ウェブラボ技術メモです。

突然ですが、こんな事はありませんか？

沢山写真を並べたギャラリーページを作りたい！！
でもサムネイルを用意するのが大変…
持っている画像はサイズも縦横比もバラバラだし…

第3回となる今回の技術メモでは、そんな時に便利なこちらのプラグインを紹介します。

このプラグインを使うと簡単にサムネイルが生成されるのです。

まずは簡単なデモを作成しましたのでご覧ください。

元画像とサムネイルは全く同じ画像をそのまま並べているのですが、photoshopなどのレタッチツールを使って沢山のサムネイルを作らなくても、このようにjQuery NailThumbを使えばサムネイルが自動でできてしまうのです。

上記のデモはクロップという方法でサムネイルを作成しました。

クロップとは刈り込み、切り落としという意味です。
指定した100px四方のサイズに縮小し、余った部分を切り落としているのです。
画像の縦横比は変更したくないという場合も大丈夫。

続いてこちらのデモもご覧ください

こちらは元画像の縦横比はそのままに、指定した100pxのボックスに収まるサイズに縮小（リサイズ）されています。

ちなみに画像のtitleタグを入力すると、サムネイルに触れた時にエフェクト付きでキャプションとして表示されます。

サムネイルはクロップやリサイズだけでなくサイズを指定することもできます。

サムネイルが表示される際にさまざまなアニメーションを使ったエフェクトも用意されており、そして何より嬉しいのは、コーダーの天敵でもあるIE（IE6にも！）にも問題なく表示されるのです。

公式サイトは英語なのでなかなかとっつきにくいと思います。

導入したいけど自分では無理！という時はお気軽にお申し付けください。

以上、7月の技術メモは「jQuery NailThumb」の紹介でした。