jQuery AD Gallery相册插件

来源：http://coffeescripter.com/code/ad-gallery/

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="jquery.ad-gallery.css"> <script type="text/javascript"

src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.ad-gallery.js?rand=995"></script>
<script type="text/javascript">
$(function() {
    $('img.image1').data('ad-desc', 'Whoa! This description is set through elm.data("ad-desc") instead

of using the longdesc attribute.<br>And it contains <strong>H</strong>ow <strong>T</strong>o

<strong>M</strong>eet <strong>L</strong>adies... <em>What?</em> That aint what HTML stands for?

Man...');
    $('img.image1').data('ad-title', 'Title through $.data');

    var galleries = $('.ad-gallery').adGallery({
    start_at_index: 1,
    callbacks: {
        afterImageVisible: function() {
                        //上传完成后执行，下面例子为弹出当前图片的ID
            alert($('img.imgWH:eq(' + this.current_index + ')').attr("id"));
    }//备注：这里不要加“,”，否则在IE6下会出错
    }
   });
    $('#switch-effect').change(
      function() {
        galleries[0].settings.effect = $(this).val();
        return false;
      }
    );
    $('#toggle-slideshow').click(
      function() {
        galleries[0].slideshow.toggle();
        return false;
      }
    );
});
</script>

<title>A demo of AD Gallery</title>
</head>
<body text-aligh:center;>

    <div id="gallery" class="ad-gallery">
      <div class="ad-nav">
        <div class="ad-thumbs">
          <ul class="ad-thumb-list">

          <li>
              <a href="images/1.jpg" >
                <img src="images/t/1.jpg" id="p1" class="imgWH">
              </a>
            </li>

            <li>
              <a href="images/t/2.jpg" >

                <img src="images/t/2.jpg" id="p2" class="imgWH">
              </a>
            </li>

            <li>

              <a href="images/3.jpg">
                <img src="images/t/3.jpg" id="p3" class="image7 imgWH">
              </a>
            </li>
            <li>
              <a href="images/4.jpg">
                <img src="images/t/4.jpg" id="p4" class="image8 imgWH">
              </a>
            </li>

          </ul>
        </div>
      </div>
     <div class="ad-image-wrapper"></div>
</div>

</body>
</html>

使用总结：

1、要控制页面加载后显示哪一张图片，可以设置start_at_index参数的值，如start_at_index: 0，显示第1张， start_at_index: 2，显示第3张。

2、在一个图片分页的页面imageList，要点击里面某个图片，跳转到播放页imageDetail的对应图片，两个页面的图片列表都一样排序，如都降序，然后给url加个参数，使它的值为从0开始的序号（设当前页page，每页记录数pageSize，则每条记录的序号为(page-1) * pageSize) + 循环中计数器），然后imageDetail页面获取这个参数并赋值给start_at_index。

下面用到的一个例子(项目采用Monorail框架):

前台：

imageList.vm

//其它代码...
<ul>
     #foreach($image in $imageList)
        #set($adId= $velocityCount - 1 + $pCount)
        <li>
        <a href="imageDetail.page?id=$!{image.activityId}&adId=$adId">
          <img src="$!{image.midImageUrl}"/>
        </a>
        <br />
         $!{image.imageName}
        </li>
    #end
</ul>

imageDetail.vm

//其它代码...
var galleries = jQuery('.ad-gallery').adGallery({
    start_at_index: $!{adId},

后台：
public void ImageList(int id, int page)
{
    //其它代码...
    PropertyBag.Add("pCount", page <= 1 ? 0 : (page-1) * pageSize);
}
public void ImageDetail(int id, int adId)
{
    //其它代码...
    PropertyBag.Add("adId", adId);
}