1.引入Jqthumb.js
在BootStrap中我們找不到解決辦法,所以我們需要藉助其它工具。Jqthumb插件是專門用來爲圖片生成縮略圖的,它可以從圖片中的任何座標點開始取指定大小的圖片區域作爲圖片的縮略圖。你可以點擊 https://github.com/pakcheong/jqthumb 來下載它,並將其應用到項目中(假設在當前項目中,jqthumb.js放置在scripts文件夾中):
2.在圖片加載(onload)的時候調用DrawImage()函數來生成縮略圖
DrawImage()函數正是基於jqthumb.js庫的,注意該函數一定要寫在輪換插件前,因爲我們必須在圖片加載前生成縮略圖。DrawImage()函數代碼如下:
<script type="text/javascript" src="/scripts/jqthumb.js"></script>
<script>
function DrawImage(hotimg)
{
$(hotimg).jqthumb({
classname : 'jqthumb',
width : '100%',//寬度
height : '300px',//高度
position : { y: '50%', x: '50%'},//從圖片的中間開始產生縮略圖
zoom : '1',//縮放比例
method : 'auto',//提交方法,用於不同的瀏覽器環境,默認爲‘auto’
});
}
</script>
在上述代碼中,我們使用了jqthumb,並且傳入了相關初始化參數。調用了該函數後,在圖片加載的時候,就會按照上述參數產生圖片的縮略圖,從而解決圖片變形問題。由於縮略圖是從原始圖片的正中間開始往兩邊取得,所以該縮略圖包含了圖片的主要內容。
記錄,後續更新具體使用過程方法及實例