gdjlc

培养良好的习惯,每天一点一滴的进步,终将会有收获。

  博客园 :: 首页 :: 博问 :: 闪存 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理 ::

来源: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);
 }

posted on 2010-06-25 17:25  gdjlc  阅读(6201)  评论(4编辑  收藏  举报