PikaChoose 實際執行畫面

PikaChoose 圖片藝廊設計是一個輕量級的 jQuery 幻燈片套件，jCarousel 可以順利的與 PikaChoose 整合成簡單又有效果的旋轉選單，PikaChoose 的設計可以很容易地安裝，易於安裝，兼容任何託管服務提供商，現在甚至有高級的主題樣式。詳細請看作者網站。

使用方法：
首先載入程式所需要的 JavaScript 程式碼
//使用 Google AJAX API 取得 jQuery 1.7.2 的 min 版本
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
//jCarousel 的主程式碼
<script type="text/javascript" src="/lib/jquery.jcarousel.min.js"></script>
//PikaChoose 的主程式碼
<script type="text/javascript" src="/lib/jquery.pikachoose.js"></script>

圖二 - PikaChoose 範例畫面

接下來設計像圖二的CSS樣式
/*載入 PikaChoose 的樣式內容*/
@import url('base.css');
/* 讓縮圖在左側 */
.pika-thumbs li{width: 90px; height:55px; margin: 5px 5px;}
.pikachoose {width: 820px; margin: 0 auto;position:relative;}
.pika-stage {position: absolute;left:250px;}
/* jCarousel 的CSS設計樣式 */
/*if you're not using the carousel you can delete everything below this */
.jcarousel-skin-pika .jcarousel-container-vertical { width: 125px;height: 230px; padding: 20px 20px 20px 85px; overflow:hidden; margin-top:20px;}
.jcarousel-skin-pika .jcarousel-clip-vertical { width:  125px; height: 230px;}
.jcarousel-skin-pika .jcarousel-item-vertical { margin-top: 10px;}


然後是HTML的設計 基本上就是UL的列表而已
<div class="pikachoose">
<ul id="pikame" class="jcarousel-skin-pika">
<li><a href="#"><img src="../../1.jpg"/></a><span>文字敘述</span></li>
<li><a href="#"><img src="../../2.jpg"/></a><span>文字敘述</span></li>
<li><a href="#"><img src="../../3.jpg"/></a><span>文字敘述<a href="#">PikaChoose.com</a></span></li>
<li><a href="#"><img src="../../4.jpg"/></a><span>文字敘述</span></li>
<li><a href="#"><img src="../../5.jpg"/></a><span>文字敘述</span></li>
</ul>
</div>

圖片部分可使用自訂縮圖和大圖分開以增加開啟網頁的速度
<img src="圖片縮圖" ref="大圖片" >

最後是 JavaScript 的程式啟動碼
$(function (){
     $("#pikame").PikaChoose({carousel:true, carouselVertical:true});
});

附上可修改的參數表

參數	型態	預設	說明
showCaption	布林	true	是否顯示說明文字
transition	陣列	[-1]	圖片轉換捕間動畫 參數 說明 [-1] 隨機效果 [0] 淡出淡入 [1] 全畫幅淡出淡入 [2] 面板淡出 [3] 水平百葉窗 [4] 垂直百葉窗 [5] 小方塊隨機淡出 [6] 完整圖像幻燈片
autoPlay	布林	true	是否自動撥放
hoverPause	布林	false	滑鼠滑過是否停止撥放
stopOnClick	布林	false	點擊圖片後是否停止撥放
speed	整數	5000	換下一張圖的間格時間單位為毫秒
text	物件	{previous:"Previous",next:"Next"}	上一張下一張的顯示文字
IESafe	布林	false	是否回復全畫面淡出.因為IE太過緩慢
showTooltips	布林	false	是否顯示縮圖的提示
thumbOpacity	單精數	0.4	縮圖淡化數值
startOn	整數	0	初始化後的第一顯示圖片
animationSpeed	整數	600	動畫效果的速度
thumbChangeEvent	字串	click.pikachoose	縮圖觸發的滑鼠事件
carousel	布林	false	是否使用 jCarousel 旋轉選單
data	陣列	null	使用 JavaScript 輸入圖片資料

公開的方法可以直接調用

方法	說明
Next	前往下一張圖片
Prev	前往上一張圖片
Play	前往某一張圖片可設定整數參數
Pause	暫停自動撥放
Play	開始自動撥放

作者網站：http://www.pikachoose.com/