在線演示 本地下載

大家在網(wǎng)站開發(fā)和web應(yīng)用中常常需要處理圖片，因?yàn)橛脩羯蟼鞯膱D片往往尺寸大小各不相同，如何能夠生成統(tǒng)一尺寸的縮略圖往往是讓我們頭疼的問(wèn)題，常規(guī)的方式基本都是使用后臺(tái)程序PHP，JSP等處理上傳后的圖片，針對(duì)網(wǎng)站或者應(yīng)用具體需要來(lái)切割指定大小的縮略圖。主要問(wèn)題在于你需要開發(fā)對(duì)應(yīng)后臺(tái)相關(guān)程序，并且你一旦指定了縮略圖大小后，以后如果希望能夠隨時(shí)修改的話，往往需要對(duì)后臺(tái)代碼進(jìn)行修改，非常麻煩！今天我們將介紹一款超強(qiáng)的jQuery縮略圖生成插件 - NailThumb ，使用這個(gè)插件可以幫助你在前臺(tái)生成無(wú)圖像扭曲的縮略圖，而且支持前臺(tái)裁剪，添加圖片說(shuō)明及其動(dòng)畫等功能，相信大家一定會(huì)喜歡！

主要特性

• 自動(dòng)處理圖形分別率，不會(huì)生成扭曲的圖片
• 能夠添加縮略圖特效
• 支持裁剪
• 方便的添加圖片說(shuō)明

如何使用

導(dǎo)入jQuery類庫(kù)，插件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> 

    

調(diào)用插件方法，如下：

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

    

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

圖片縮略圖展示應(yīng)用

這里我們將開發(fā)一個(gè)圖片縮略圖展示應(yīng)用，主要代碼如下：

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>

    

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

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({});		
});
    

以上代碼中我們使用缺省的選項(xiàng)針對(duì)缺省的圖片生成縮略圖，然后點(diǎn)擊來(lái)生成指定圖片的各種大小的縮略圖。

CSS

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

      .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;
} 
    

效果請(qǐng)大家參考在線演示。希望大家喜歡這個(gè)插件，能夠有效的應(yīng)用到網(wǎng)站和web應(yīng)用開發(fā)中。如果你喜歡我們的文章，請(qǐng)給我們留言。謝謝！