[转]使用AD Gallery制作强大的相册展示功能

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="Div1" 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.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
}

您还可以通过修改CSS文件来定制相册的外观。

有个问题：IE9鼠标移动到大图边上时不会切换

使用的时候注意几点
1、如果相册中用到的图片存放的目录跟demo中的不一样，需要去修改下jquery.ad-gallery.css中图片的引用路劲
2、如果外面需要对相册中的元素进行特殊的控制，最好另外写css，注意引用的的时候，放置的位置有讲究，如果没放好，你写的css会不起作用如

<script type="text/javascript" src="js/jquery-1.4.min.js"></script>
    <script type="text/javascript" src="js/jquery.ad-gallery.js"></script>
    <link href="css/jquery.ad-gallery.css" rel="stylesheet" type="text/css" />
    <link href="css/base.css" rel="stylesheet" type="text/css" />
    <link href="css/index.css" rel="stylesheet" type="text/css" />

使用方法：http://www.helloweba.com/view-blog-61.html

在线DEMO展示：http://www.helloweba.com/demo/ad-gallery/