擴充 jQuery Slideshow 輪播圖片

分享及展示擴充後的 jQuery Slideshow 輪播圖片

最近有用上了Slideshow這個jQuery的小套件,基本上很簡單,官網的範例看過

大概三分鐘就可以套出來了。這套件呈現的效果大概像下面這樣:

image

不過看一看覺得下面的數字框似乎有點單調,想要換成圖片的縮圖,於是今天

就花了一點時間修改了一下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屬性設定小圖的路徑
title

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

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

Demo

擴充後的範例檔案

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