Tad 教材網 - 線上書籍

:::

\[982\]PHP網站開發 進階應用技巧
=====================

[![](http://tad0616.net/uploads/dl.gif)](http://120.115.2.76/tad/tad_book3/file/9802/03.zip)

### 一、OverLay燈箱基本用法

1.先準備好大圖、小圖，分別放到photos、thumbs，並在<head>中加入以下語法：  
 <font color="#3366ff">//引入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></font>

2.在<body>中加入以下語法，說明不見得需要。  
 <font color="#0000ff"><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></font>

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

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

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

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>中加入以下語法：  
 <font color="#0000ff">//引入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" /></font>

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

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

:::