[JS]大量の画像コンテンツに便利！ サムネイルを自動生成するスクリプト -NailThumb

大きいサイズの画像から、クロップやリサイズなどして小さいサイズのサムネイルを自動生成するjQueryのプラグインを紹介します。
サムネイルはテキスト配置やさまざまなエフェクトにも対応しています。

jQuery NailThumb

[ad#ad-2]

• NailThumbのデモ
• NailThumbの使い方

NailThumbのデモ

NailThumbは元画像のアスペクト比を維持したまま、クロップやリサイズをしてサムネイルをスクリプトで生成します。
サムネイルはさまざまなフォーマットが用意されています。

クロップ

画像の指定した箇所を切り取ります。

リサイズ

画像のサイズを変更します。

[ad#ad-2]

全て指定サイズに

CSSでサムネイルのサイズを一括指定します。

エフェクト

サムネイルが表示される際にさまざまなアニメーションを使ったエフェクトが用意されています。

キャプション

テキストをオーバーレイで表示することもできます。

NailThumbの使い方

NailThumbの基本的な使い方は、サムネイル用のコンテナとサムネイルのサイズ設定です。

外部ファイル

スクリプトとスタイルシートを外部ファイルとして記述します。

<script type="text/javascript" src="path/to/jquery.js"></script>
<script type="text/javascript" src="path/to/jquery.nailthumb.1.0.js"></script>
<link href="path/to/jquery.nailthumb.1.0.css" type="text/css" rel="stylesheet" />

HTML

サムネイル用のコンテナをdiv要素で実装します。

<div class="nailthumb-container square-thumb">
    <img src="path/to/image.png" />
</div>
<div class="nailthumb-container square-thumb">
    <img src="path/to/image.png" />
</div>
<div class="nailthumb-container square-thumb">
    <img src="path/to/image.png" />
</div>

CSS

スタイルシートでサムネイルのサイズを設定します。

<style type="text/css" media="screen">
.square-thumb {
    width: 150px;
    height: 150px;
}
</style>

JavaScript

jQueryのセレクタで適用する画像を指定し、スクリプトを実行します。

<script type="text/javascript">
jQuery(document).ready(function() {
    jQuery('.nailthumb-container').nailthumb();
});
</script>

クロップする場合は、下記のようになります。

<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('.nailthumb-container').nailthumb({width:100,height:100,fitDirection:'top left'});
});
</script>

リサイズする場合は、下記のようにになります。

<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('.nailthumb-container').nailthumb({width:100,height:100,method:'resize',fitDirection:'top left'});
});
</script>

サイズの指定はスタイルシートでも行えるので、複数のサイズを設定する際も簡単です。
コンテナのdiv要素にサイズ用のclassを設定します。

<div class="nailthumb-container square"><img src="img/small/howl.png" /></div>
<div class="nailthumb-container horiz"><img src="img/small/rose.png" /></div>
<div class="nailthumb-container vert"><img src="img/small/roses.png" /></div>

あとは、そのclassにサイズを設定するだけです。

<style type="text/css" media="screen">
.square {
width: 100px;
height: 100px;
}
.horiz {
width: 100px;
height: 70px;
}
.vert {
width: 100px;
height: 130px;
}
</style>