<%@ Page language="c#" Codebehind="BigImg.aspx.cs" AutoEventWireup="true" Inherits="XpShop.WebUI.BigImg" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
  <head>
    <title><%=productName %></title>
    <script src="<%=webSite %>inc/jquery-1.2.6.min.js" type="text/javascript"></script>
    <style type="text/css">
        body{background:#f7f7f7; padding:0px;}
        .Pro_Info{text-align:center;padding:0px;border-bottom:1px solid #ccc;}
        .Pro_Info h1 {}
        .Pro_Info h1 em{font-size:12px;color:#999;font-weight:normal;}
        .Pro_Info h1 a:link,.Pro_Info h1 a:visited{color:#005aa0;}
        .Pro_Images{padding-top:10px;}
        .Pro_Images img{display:inline;width:130px;height:98px;margin:0 5px;border:1px solid #ccc;filter:alpha(opacity=30);opacity:0.3; cursor:pointer}
        .Pro_Images .active{filter:alpha(opacity=100);opacity:1;border-color:#999;}
        .Pro_Pagination{background:#fff;padding:5px 0;text-align:center;font-size:14px;}
        .Pro_BigImage{text-align:center;background:#fff;}
        .Pro_BigImage img{margin:0 auto;cursor:pointer;}
        .Pro_Link{border-top:1px solid #ccc;padding:5px 0;text-align:center;font-size:14px;}
        .Pro_Buttons{text-align:center;background:#fff;}
        .Pro_Buttons img{display:inline;}
        .Pro_Link a:link,.Pro_Link a:visited {color:#000;}
        .Pro_Link a:hover {color:#ff0000;}
        .hand {cursor:pointer;}
    </style>
    <script type="text/javascript">
        $(document).ready(function(){
            var imgs = $('.Pro_Images img');
            imgs.each(function(i){
                $(this).click(function(){
                    $('.Pro_BigImage').html('<img src="' + $(this).attr('src') + '" alt="" />').data('currImgIndex',i);
                    $(this).fadeTo('fast',1).siblings().fadeTo('fast',0.5);
                    $('.pagenum').text((i+1)+'/'+imgs.length);
                });
            });
            imgs.eq(0).click();
            $('.next').click(function(){
                var currIndex = $('.Pro_BigImage').data('currImgIndex');
                currIndex = currIndex + 1 >= imgs.length ? 0 : currIndex + 1;
                imgs.eq(currIndex).click();
            });
            $('.prev').click(function(){
                var currIndex = $('.Pro_BigImage').data('currImgIndex');
                currIndex = currIndex - 1 < 0 ? imgs.length-1 : currIndex - 1;
                imgs.eq(currIndex).click();
            });
        });
    </script>
  </head>
  <body>
	    <div class="Pro_Info">
	        <h1 style="font-size:14px;"><a href="<%=webSite %>products/product-<%=productID %>.<%=config.html %>"><%=productName %></a><em>(商品编号：<%=productNo %>)</em></h1>
	        <div class="Pro_Images"><%=BindImgs()%></div>
	    </div>
	    <div class="Pro_Pagination"><a class="prev hand" >上一张</a>&nbsp;&nbsp;&nbsp;<em class="pagenum"></em>&nbsp;&nbsp;&nbsp;<a class="next hand" >下一张</a></div>
	    <div class="Pro_BigImage"></div>
	    <div class="Pro_Pagination"><a class="prev hand" >上一张</a>&nbsp;&nbsp;&nbsp;<em class="pagenum"></em>&nbsp;&nbsp;&nbsp;<a class="next hand" >下一张</a></div>
	    <div class="Pro_Link"><a href="<%=webSite %>">返回商城首页</a>&nbsp;&nbsp;&nbsp;<a href="<%=webSite %>products/product-<%=productID %>.<%=config.html %>">返回商品页</a></div>
  </body>
</html>
