jQuery.Showcase 展示櫃

jQuery.Showcase 簡單容易使用而且強大的圖片展示櫃套件，基於 jQuery 框架開發易於選擇網頁元素內容。支援 FireFox 3.5+、Apple Safari 4.0.4+、Opera 10.10+、IE 7+、Google Chrome 3.0.195+。因為以圖片為主所以最適合拿來做為內部的廣告連結刊登，又大又明顯又可以多筆資料顯示於網頁上，增加使用者對產品的印象。

使用方法：
第一步 載入程式的 JavaScirpt 和 CSS 檔案
<!--使用Google ajax API 直接連結 jQuery 1.8.2的min版本-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!--jQuery.Showcase 的主程式碼-->
<script src="../jquery.showcase-2.0.2.min.js" type="text/javascript"></script>

第二步 在 HTML 部分加上一個可辨識的容器
<div id="content" style="padding:0px;">
    <div id="showcase1"></div>
</div>

第三步 加入CSS 的設計樣式 .titleBar {
    padding: 4px;
    font-style: italic;
    font-weight: bold;
    background-color: #2c546f;
    font-size: 1.4em; }
.titleBar a { color: #000000; }
.navigationItem { height:8px; width:8px; line-height: 8px;
            -moz-border-radius: 8px;
            -webkit-border-radius: 8px;
            background-color: Transparent;
            border: solid 1px #878787;
            margin: 0px 3px 3px 0px; }
.navigationItemHover { background-color: #ababab; }
.navigationItemSelected { background-color: #dadada; border-color: #dadada; }


第四步 寫入 JavaScript 的程式碼
$("#showcase1").showcase({
    css: { width: "958px", height: "375px" },
    animation: { type: "vertical-slider", interval: 4500, stopOnHover: false, easefunction: "easeOutElastic", speed: 1800 },
    linksOn: "titles",
    images: [
        { url:"images/panorama1.jpg", description: "panorama - another great imageset provided by Riccardo Vandoni",
          link:"http://www.riccardovandoni.com", target: "_blank" },
        { url:"images/panorama2.jpg", description: "...the second panorama photo...",
          link:"http://www.riccardovandoni.com", target: "_blank" },
        { url:"images/panorama3.jpg", description: "...and the last",
          link:"http://www.riccardovandoni.com", target: "_blank" }
    ],
    navigator: { position: "top-right", orientation: "vertical", autoHide: true,
                css: { padding:"6px", margin: "4px 0px 0px 0px" },
                item: {
                    css: { height:"8px", width:"8px", "-moz-border-radius": "8px", "-webkit-border-radius": "8px",
                           backgroundColor: "Transparent", borderColor:"#878787" },
                    cssHover: { backgroundColor: "#ababab" },
                    cssSelected: { backgroundColor: "#dadada", borderColor: "#dadada" }
                }
    },
    titleBar: { css: { backgroundColor: "#2c546f", color: "Black", fontSize: "1.4em", opacity: "0.86" } }
});

附上程式的參數設定

參數	說明
images	圖片內容陣列方式輸入 [url:'連結',description:'敘述',link:'連結',target:'目標視窗']
linksOn	連結的物件是在圖片或抬頭文字上 images,titles
css	CSS 的設定值物件方式寫入 {position:'relative',border:'none'}
animation	以物件方式輸入,設定動畫的方式
navigator	以物件方式輸入,定義屬性與抬頭文字
titleBar	以物件方式輸入,設定提示文字訊息

作者網站：http://www.recoding.it/Demos/jQuery/Showcase
檔案大小：174 KB(包含範例)
檔案下載：https://github.com/tanathos/jquery.showcase
檔案備份：下載