3. jquery六大工具(下)

一、OverLay燈箱基本用法

1.先準備好大圖、小圖，分別放到photos、thumbs，並在<head>中加入以下語法：
//引入jquery.js及 jquery.tools.min.js
<script>
    $(document).ready(function() {
        $("img[rel]").overlay();
    });
</script>
<link rel="stylesheet" type="text/css" href="overlay-basic.css"/>
<style>
    .details {文字內容樣式...略...}
    .details h3 {標題內容樣式...略...}
</style>

2.在<body>中加入以下語法，說明不見得需要。
<img src="thumbs/pic1.jpg" rel="#pic1"/>
<div class="simple_overlay" id="pic1">
    <img src="photos/pic1.jpg" />
    <div class="details">
        <h3>這裡是大標題</h3>
        <h4>這裡是中標題</h4>
        <p>這裡是內容，但我懶得寫...</p>
    </div>
</div>

3.<div>中的class="simple_overlay"不可改，除非要跟著改CSS。
4.CSS中的.simple_overlay寬度設定，視需求調整。

二、LyteBox燈箱(http://www.dolem.com/lytebox)用法

1.一樣準備好大圖、小圖，並在<head>中加入以下語法：
<script type="text/javascript" language="javascript" src="lytebox.js"></script>
<link rel="stylesheet" href="lytebox.css" type="text/css" media="screen" />

2.視需求，在<body>中加入以下語法：
單張呈現：<a href="大圖" rel="lytebox" title="說明">小圖或文字</a>
群組呈現：<a href="大圖" rel="lytebox[群組]" title="說明">小圖或文字</a>
自動播放：<a href="大圖" rel="lyteshow[群組]" title="說明">小圖或文字</a>
嵌入網頁：<a href="網頁" rel="lyteframe[群組]" title="說明">小圖或文字</a>

三、scrollable 捲軸基本用法

1.先準備好大圖、小圖，分別放到photos、thumbs，並在<head>中加入以下語法：
//引入jquery.js及 jquery.tools.min.js
<script>
    $(function() {
        $("div.scrollable").scrollable({size: 1}).mousewheel();
    });
</script>
<link rel="stylesheet" type="text/css" href="scrollable-horizontal.css" />
<link rel="stylesheet" type="text/css" href="scrollable-buttons.css" />

2.在<body>中加入以下語法，說明不見得需要。
<a class="prevPage browse left"></a>
<div class="scrollable">
<div class="items">圖片區</div>
</div>
<a class="nextPage browse right"></a>
<br clear="all" />

3.寬度修改CSS中的scrollable寬度，寬度=(縮圖寬度*張數+間距*(張數+1))。

2-4 水平選單