【jQuery】画像のサムネイルを自動生成する方法（NailThumb）

http://teapipin.blog10.fc2.com/blog-entry-568.html【jQuery】画像のサムネイルを自動生成する方法（NailThumb）

画像のサムネイルを自動生成する方法についてです。

このブログではトップページで使っています。

 

＜設定前＞

 

＜設定後＞

 

 

方法

 

いくつか方法がありますが、今回はjQueryプラグイン「NailThumb」を紹介します。デモとダウンロードは↓こちらから。

 

jQuery NailThumb

 

デモにあるように、画像のくりぬく箇所、画像サイズの指定などができます。

まずHTMLではこのプラグインを読み込みます。

<script type="text/javascript" src="jquery_nailthumb.1.1.min.js"></script>

画像ファイルのdivで次のように設定します。

<div class="nailthumb-container square-thumb"><img src="画像ファイル" ～></div>

jQueryで次のように設定します。

$(function(){
  $('.nailthumb-container').nailthumb();
});

CSSの設定は次のような感じです。

/* サムネイルの設定 */
.nailthumb-container {
  float: left;
  overflow: hidden;

  width: 150px;
  height: 150px;
}

以上で真ん中をくり抜いたサムネイルが自動生成されます。

くり抜くバリエーションは先にも挙げたように複数あるので、作成するサイトに合った方法を選んでみてください。


↓この記事が参考になったら拍手（どなたでも可）、ツイート、いいね、はてブ、いずれかをお願いします。今後のブログ作りに役立てたいので。