AD Gallery一個(gè)高度可定制的jQuery畫(huà)廊插件
1、準(zhǔn)備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庫(kù)可以直接到下載。
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="圖片標(biāo)題" alt="圖片描述" />
</a>
</li>
...
</ul>
</div>
</div>
</div>
說(shuō)明：最外層的DIV.ad-gallery是整個(gè)相冊(cè)的包含層。DIV.ad-image-wrapper放置所有大圖片，DIV.ad-controls放置控制按鈕如開(kāi)始和暫停，DIV.ad-nav用來(lái)放置縮略圖。我們給每一張縮略圖設(shè)置了title屬性用來(lái)展示圖片的標(biāo)題，alt屬性用來(lái)展示圖片的描述信息。
3、應(yīng)用Gallery插件。
$(function(){
$('.ad-gallery').adGallery();
});
AD Gallery插件常用參數(shù)一覽表
| 參數(shù) | 描述 | 默認(rèn)值 |
| start_at_index | 第一張展示的大照片 | 0 |
| width | 照片的寬度，默認(rèn)為false,為false時(shí)直接讀取css的寬度 | false |
| height | 照片的高度，默認(rèn)為false,為false時(shí)直接讀取css的高度 | false |
| thumb_opacity | 設(shè)置縮略圖的透明值 | 0.7 |
| description_wrapper | 可以設(shè)置一個(gè)DIV用來(lái)展示照片的標(biāo)題和描述信息。如description_wrapper: $('#descriptions') | false |
| display_next_and_prev | 是否顯示上一張下一張導(dǎo)航按鈕 | true |
| display_back_and_forward | 是否顯示縮略圖導(dǎo)航按鈕 | true |
| effect | 窗口標(biāo)題屬性 | title |
| splitTitle | 設(shè)置展示效果，'slide-hori', 'slide-vert', 'fade', 'resize', 'none' | 'slide-hori' |
| enable_keyboard_move | 是否使用鍵盤(pán)方向鍵切換導(dǎo)航 | true |
| cycle | 是否循環(huán)顯示照片，如果設(shè)置為false時(shí)，則到最后一張照片時(shí)就會(huì)停止切換 | true |
| slideshow |
用來(lái)設(shè)置開(kāi)始和暫停功能 enable: true,//是否啟用開(kāi)始和暫停功能 autostart: true,是否自動(dòng)播放 speed: 5000,切換時(shí)間 start_label: 'Start',開(kāi)始按鈕顯示的內(nèi)容，可以為圖片按鈕 stop_label: 'Stop',停止按鈕顯示的內(nèi)容，可以為圖片按鈕 onStart: function() { // Do something wild when the slideshow starts }, onStop: function() { // Do something wild when the slideshow stops } |
鄂公網(wǎng)安備 42090202000212號(hào)