使用超酷的jQuery縮略圖生成插件NailThumb制作漂亮的縮略圖web應用

在線演示  本地下載

大 家在網站開發和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應用開發中。如果你喜歡我們的文章，請給我們留言。謝謝！