画像をサムネイルのサイズで表示するJavaScript （jQuery Thumbs）

画像イメージをコンテンツに表示する場合、毎回サムネイル用の画像を作成してアップロードしている場合に、簡単にサムネイルサイズで表示してくれるのが、jQuery Thumbs。jQueryのプラグインとして動作する。

PHPなどのプログラムでリサイズするサムネイルと異なり、オリジナルの画像をサムネイルサイズでブラウザ表示してくれる。画像そのものが生成されるわけでは無いため、一覧ページなどでの利用には向かない。クリックして拡大表示させる場合など便利に利用できそうだ。

JavaScriptで動的にサムネイル表示
JavaScriptとして動作する点に注目していただきたい。動的にレイアウトをJavaScriptで制御する場合など便利に使えそうだ。実際の動作はデモが用意されているのでそちらを参照していただきたい。

サムネイル表示にした画像の右下に、虫眼鏡アイコンが表示される。アイコンが表示されるが特に意味は無い様子。しかし、スライドショーJavaScriptなどと合わせて利用することで、わかりやすいインターフェースになるので、是非試していただきたい。