[982]PHP網站開發 進階應用技巧
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))。