擴充 jQuery Slideshow 輪播圖片

2011-04-01

24031
0
jQuery

分享及展示擴充後的 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屬性設定小圖的路徑

修改後呈現的效果大概是這樣

如果有喜歡的人，可以下載回去用用看。

Demo

擴充後的範例檔案

原始檔案出處：http://www.beyondcoding.com/2009/08/04/release-jquery-plugin-slideshow-lite/

回首頁