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

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

サイトのキャプチャ

jQuery NailThumb

NailThumbのデモ

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

デモのキャプチャ

クロップ

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

デモのキャプチャ

リサイズ

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

デモのキャプチャ

全て指定サイズに

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>

top of page

©2017 coliss