在線演示 本地下載

大家在網站開發和web應用中常常需要處理圖片，因為用戶上傳的圖片往往尺寸大小各不相同，如何能夠生成統一尺寸的縮略圖往往是讓我們頭疼的問題，常規的方式基本都是使用后臺程序PHP，JSP等處理上傳后的圖片，針對網站或者應用具體需要來切割指定大小的縮略圖。主要問題在于你需要開發對應后臺相關程序，并且你一旦指定了縮略圖大小后，以后如果希望能夠隨時修改的話，往往需要對后臺代碼進行修改，非常麻煩！今天我們將介紹一款超強的jQuery縮略圖生成插件 - NailThumb ，使用這個插件可以幫助你在前臺生成無圖像扭曲的縮略圖，而且支持前臺裁剪，添加圖片說明及其動畫等功能，相信大家一定會喜歡！

主要特性

• 自動處理圖形分別率，不會生成扭曲的圖片
• 能夠添加縮略圖特效
• 支持裁剪
• 方便的添加圖片說明

如何使用

導入jQuery類庫，插件js和css，如下：

      <link rel="stylesheet" href="css/jquery.nailthumb.1.0.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="js/jquery.nailthumb.1.0.min.js"></script> 

    

調用插件方法，如下：

      $('.thumbwrapper').nailthumb({});

    

使用圖片的容器元素即可生成縮略圖。

圖片縮略圖展示應用

這里我們將開發一個圖片縮略圖展示應用，主要代碼如下：

HTML

      <ul id="container">
	<li data-tag="Ducati"><strong>Hypermotard 796 Silver</strong><img src="img/motor/Model-Page_2012_Hypermotard_796_298.jpg"><a href="#" class="viewthumb">View Thumbnails</a></li>
	<li data-tag="Ducati"><strong>Hypermotard 796 Red</strong><img src="img/motor/HM-796_2001_R_[298x168].jpg"><a href="#" class="viewthumb">View Thumbnails</a></li>
	<li data-tag="Ducati"><strong>Hypermotard 1100 Evo Red</strong><img src="img/motor/2012-Ducati-Hypermotard-1100EVO4-298.jpg"> <a href="#" class="viewthumb">View Thumbnails</a></li>
</ul>

<ul id="thumb">
	<li class="thumbwrapper bhoriz"> <a href="#"><img src="img/motor.png"  title="280x180" /></a></li>
	<li class="thumbwrapper bsquare"> <a href="#"><img src="img/motor.png" title="150x150"  /></a></li>
	<li class="thumbwrapper vert"><a href="#"><img src="img/motor.png"  title="100x130" /></a></li>
	<li class="thumbwrapper square"><a href="#"><img src="img/motor.png" title="100x100" /></a></li>
	<li class="thumbwrapper horiz"><a href="#"><img src="img/motor.png" title="100x70"  /></a></li>
</ul>

    

定義倆個容器元素，一個包含了需要生成縮略圖的圖片，另外一個元素包含了生成的不同大小的縮略圖。

Javascript

      $(function() {
	$('.viewthumb').click(function(){
		var location = $(this).parent().find('img').attr('src');
		var title = $(this).parent().find('strong').html();
		$('.thumbwrapper').nailthumb({imageUrl:location, imageFromWrappingLink:true, title:title, titleWhen: 'load', replaceAnimation:'animate'});		
	});
	
	$('.thumbwrapper').nailthumb({});		
});
    

以上代碼中我們使用缺省的選項針對缺省的圖片生成縮略圖，然后點擊來生成指定圖片的各種大小的縮略圖。

CSS

這里我們預先定義不同尺寸的縮略圖，如下：

      .bhoriz {
 width: 280px;
 height: 180px;
}

.square {
 width: 100px;
 height: 100px;
}

.bsquare {
 width: 150px;
 height: 150px;
}

.horiz {
 width: 100px;
 height: 70px;
}

.vert {
 width: 100px;
 height: 130px;
} 
    

效果請大家參考在線演示。希望大家喜歡這個插件，能夠有效的應用到網站和web應用開發中。如果你喜歡我們的文章，請給我們留言。謝謝！