分享及展示擴充後的 jQuery Slideshow 輪播圖片
最近有用上了Slideshow這個jQuery的小套件,基本上很簡單,官網的範例看過
大概三分鐘就可以套出來了。這套件呈現的效果大概像下面這樣:
不過看一看覺得下面的數字框似乎有點單調,想要換成圖片的縮圖,於是今天
就花了一點時間修改了一下js檔,把我想要的功能加上去。
改的部分很少,大概只加了兩三行Code吧,
var defaults = {
pauseSeconds: 2,
fadeSpeed: 0.5,
width: 468,
height: 120,
caption: true,
cssClass: 'slideshowlite',
anchorTarget: '_self',
//========新增屬性===========
miniature: false,
miniatureHeight: 30,
miniatureWidth: 30
//===========================
};
增加了三個屬性:
miniature是要不要把數字會成縮圖的開關,預設false
miniatureHeight是縮圖的高度,預設30
miniatureWidth是縮圖的寬度,預設30
用法跟原先的差不多,只需多指定幾個屬性
$("#slideshow1").slideshow(
{
miniature: true,
miniatureWidth: 20,
miniatureHeight: 30
});
//然後img多加入一個rel屬性設定小圖的路徑
修改後呈現的效果大概是這樣
如果有喜歡的人,可以下載回去用用看。
原始檔案出處:http://www.beyondcoding.com/2009/08/04/release-jquery-plugin-slideshow-lite/