点击查看图片,可自适应宽高

js,css(公司框架直接可用):

http://pan.baidu.com/share/link?shareid=473682&uk=1041329344

js

    <link href="/Js/jquery.fancybox/fancybox.css" rel="stylesheet" type="text/css" />
    <script src="/Js/jquery.fancybox/jquery.fancybox-1.3.1.pack.js" type="text/javascript"></script>
    <script>
        $(function () {
            $(".lipicli").find("a[rel=group]").fancybox({
                'transitionIn': 'elastic',  //设置动画效果. 可以设置为 'elastic', 'fade' 或 'none'
                'transitionOut': 'elastic',  //同上
                'titlePosition': 'over',  //设置标题显示的位置.可以设置成 'outside', 'inside' 或 'over'
                'titleShow': true,  //是否显示标题
                'titleFormat': function (title, currentArray, currentIndex, currentOpts)//可以自定义标题的格式
                {
                    return '<span id="fancybox-title-over">' + (currentIndex + 1) + ' / ' + currentArray.length + " " + title + '</span>';
                }
            });
        });
    </script>

html

        <%
            List<DealMvc.Model.GameInfo> NewGame = (List<DealMvc.Model.GameInfo>)ViewData["NewGame"];
        %>
        <div class="BabyShowList">
            <ul>
                <%
                    if (NewGame != null && NewGame.Count > 0)
                    {
                        string pic_url = string.Empty;
                        foreach (DealMvc.Model.GameInfo item in NewGame)
                        {
                            pic_url = Url.ImageAutoSize(167, 167, item.ShowPic, ImageSizeMode.Size);
                            StringBuilder sb = new StringBuilder();
                            string[] img = item.PicPath.Split(new char[] { ',' }, StringSplitOptions.RemoveEmptyEntries);
                            if(img.Length>2)//从第二张开始
                                for (int i = 1; i < img.Length; i++)
                                {
                                    sb.AppendFormat("<li><a href='{0}' rel='group'><img src=\"{0}\" title='{1}' alt='{1}' /></a></li>", img[i].ToString(), item.Name + " " + item.Number + "号 投票" + item.Votes + "数量");
                                }
                %>
                <li class="lipicli">
                    <div class="imgDiv"><a href='<%=item.ShowPic %>' rel='group' class="Show_Img "  style="cursor:pointer;" ><img src="<%=pic_url %>" alt="<%=item.Name %> <%=item.Number %>号 投票<%=item.Votes %>数量" title="<%=item.Name %> <%=item.Number %>号 投票<%=item.Votes %>数量"></a></div>
                    <div class="name"><b class="red"><%=item.Number %>号</b> <%=item.Name %></div>
                    <div class="msg"><b class="red"><%=item.Votes %></b> 票</div>
                    <a href="" class="btn"><img src="/App_Themes/UI/image/btn21.gif" alt=""></a>
                    <ul style="display:none;"><%=sb.ToString() %></ul>
                </li>
                <%}
                    }
                    else
                    {%>
                暂无参赛信息
                <%} %>
            </ul>
            <span class="clear_f"></span>
        </div>

效果图

posted @ 2013-05-18 14:32  丹扬  阅读(194)  评论(0)    收藏  举报