合作(zuò)
咨詢
建站(zhàn)咨詢
使用AD Gallery制(zhì)作(zuò)強大(dà)的相冊畫(huà)廊
- 作(zuò)者：admin
- 發表時(shí)間(jiān)：2013-07-02 14:17:27
- 來(lái)源：未知
AD Gallery是一個(gè)帶縮略圖導航浏覽，可(kě)設置照片标題和(hé)備注說明(míng)信息的jQuery相冊插件。該插件提供了許多(duō)可(kě)配置的參數(shù)和(hé)方法，具有(yǒu)很(hěn)強的定制(zhì)功能。
主要特性：
可(kě)以選擇不同的展示效果，如上(shàng)下左右滑動、淡入淡出、縮放交替等效果。
支持鍵盤方向鍵切換。
圖片左右導航。
預加載圖像，直到完全顯示。
支持自動播放和(hé)暫停。
可(kě)設置照片标題和(hé)描述信息。
圖片尺寸自适應。
多(duō)種回調函數(shù)。
如何使用？
1、準備Javascript及插件和(hé)CSS樣式文件。
demo中包含了插件文件和(hé)樣式，jquery庫可(kě)以直接到下載。
2、XHTML。
- ...
說明(míng)：最外層的DIV.ad-gallery是整個(gè)相冊的包含層。DIV.ad-image-wrapper放置所有(yǒu)大(dà)圖片，DIV.ad-controls放置控制(zhì)按鈕如開(kāi)始和(hé)暫停，DIV.ad-nav用來(lái)放置縮略圖。我們給每一張縮略圖設置了title屬性用來(lái)展示圖片的标題，alt屬性用來(lái)展示圖片的描述信息。
3、應用Gallery插件。
$(function(){
$('.ad-gallery').adGallery();
});
AD Gallery插件常用參數(shù)一覽表
| 參數(shù) | 描述 | 默認值 |
| start_at_index | 第一張展示的大(dà)照片 | 0 |
| width | 照片的寬度，默認為(wèi)false,為(wèi)false時(shí)直接讀取css的寬度 | false |
| height | 照片的高(gāo)度，默認為(wèi)false,為(wèi)false時(shí)直接讀取css的高(gāo)度 | false |
| thumb_opacity | 設置縮略圖的透明(míng)值 | 0.7 |
| description_wrapper | 可(kě)以設置一個(gè)DIV用來(lái)展示照片的标題和(hé)描述信息。如description_wrapper: $('#descriptions') | false |
| display_next_and_prev | 是否顯示上(shàng)一張下一張導航按鈕 | true |
| display_back_and_forward | 是否顯示縮略圖導航按鈕 | true |
| effect | 窗口标題屬性 | title |
| splitTitle | 設置展示效果，'slide-hori', 'slide-vert', 'fade', 'resize', 'none' | 'slide-hori' |
| enable_keyboard_move | 是否使用鍵盤方向鍵切換導航 | true |
| cycle | 是否循環顯示照片，如果設置為(wèi)false時(shí)，則到最後一張照片時(shí)就會(huì)停止切換 | true |
| slideshow |
用來(lái)設置開(kāi)始和(hé)暫停功能 enable: true,//是否啓用開(kāi)始和(hé)暫停功能 autostart: true,是否自動播放 speed: 5000,切換時(shí)間(jiān) start_label: 'Start',開(kāi)始按鈕顯示的內(nèi)容，可(kě)以為(wèi)圖片按鈕 stop_label: 'Stop',停止按鈕顯示的內(nèi)容，可(kě)以為(wèi)圖片按鈕 onStart: function() { // Do something wild when the slideshow starts }, onStop: function() { // Do something wild when the slideshow stops } |
您還(hái)可(kě)以通(tōng)過修改CSS文件來(lái)定制(zhì)相冊的外觀。
聯系我們
一切良好工作(zuò)的開(kāi)始，都需相互之間(jiān)的溝通(tōng)搭橋，歡迎咨詢。
