AD Gallery一個高度可定制的jQuery畫廊插件
1、準備Javascript及插件和CSS樣式文件。
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.ad-gallery.js"></script>
<link rel="stylesheet" type="text/css" href="ad-gallery.css" />
demo中包含了插件文件和樣式，jquery庫可以直接到下載。
2、XHTML。
<div id="gallery" class="ad-gallery">
<div class="ad-image-wrapper"></div>
<div class="ad-controls"></div>
<div class="ad-nav">
<div class="ad-thumbs">
<ul class="ad-thumb-list">
<li><a href="images/a1.jpg">
<img src="images/thumbs/s1.jpg" title="衡山香客" alt="祝融峰上祝融殿" />
</a>
</li>
<li>
<a href="images/a2.jpg">
<img src="images/thumbs/s2.jpg" title="圖片標題" alt="圖片描述" />
</a>
</li>
...
</ul>
</div>
</div>
</div>
說明：最外層的DIV.ad-gallery是整個相冊的包含層。DIV.ad-image-wrapper放置所有大圖片，DIV.ad-controls放置控制按鈕如開始和暫停，DIV.ad-nav用來放置縮略圖。我們給每一張縮略圖設置了title屬性用來展示圖片的標題，alt屬性用來展示圖片的描述信息。
3、應用Gallery插件。
$(function(){
$('.ad-gallery').adGallery();
});
AD Gallery插件常用參數一覽表
| 參數 | 描述 | 默認值 |
| start_at_index | 第一張展示的大照片 | 0 |
| width | 照片的寬度，默認為false,為false時直接讀取css的寬度 | false |
| height | 照片的高度，默認為false,為false時直接讀取css的高度 | false |
| thumb_opacity | 設置縮略圖的透明值 | 0.7 |
| description_wrapper | 可以設置一個DIV用來展示照片的標題和描述信息。如description_wrapper: $('#descriptions') | false |
| display_next_and_prev | 是否顯示上一張下一張導航按鈕 | true |
| display_back_and_forward | 是否顯示縮略圖導航按鈕 | true |
| effect | 窗口標題屬性 | title |
| splitTitle | 設置展示效果，'slide-hori', 'slide-vert', 'fade', 'resize', 'none' | 'slide-hori' |
| enable_keyboard_move | 是否使用鍵盤方向鍵切換導航 | true |
| cycle | 是否循環顯示照片，如果設置為false時，則到最后一張照片時就會停止切換 | true |
| slideshow |
用來設置開始和暫停功能 enable: true,//是否啟用開始和暫停功能 autostart: true,是否自動播放 speed: 5000,切換時間 start_label: 'Start',開始按鈕顯示的內容，可以為圖片按鈕 stop_label: 'Stop',停止按鈕顯示的內容，可以為圖片按鈕 onStart: function() { // Do something wild when the slideshow starts }, onStop: function() { // Do something wild when the slideshow stops } |
鄂公網安備 42090202000212號