線上書籍

Home

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

一、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))。