<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ProductImages.aspx.cs" Inherits="Hishop.Web.Site.ProductImages" %>
<%@ Register TagPrefix="Hishop" Namespace="Hishop.Web.Controls" Assembly="Hishop.Web.Controls" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script language="javascript" type="text/javascript" src="Utility/jquery-1.3.2.min.js"></script>
<style>
h1 {font-size: 16px}
body {background:#f7f7f7;padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;line-height: 1.5em; font-family: "宋体",arail,verdana; color: #222; font-size: 12px;}
em {font-style: normal}
a {text-decoration: none}
a:link {color: #222}
a:visited {color: #222}
a:hover {color: #f30; text-decoration: underline}
a:active {color: #f30; text-decoration: underline}
.Pro_Info {border-bottom: #ccc 1px solid; text-align: center; padding-bottom: 10px; padding-left: 0px; padding-right: 0px; padding-top: 10px}
.Pro_Info h1 em {color: #999; font-size: 12px; font-weight: normal}
.Pro_Info h1 a:link {color: #005aa0}
.Pro_Info h1 a:visited {color: #005aa0}
.Pro_Images {padding-top: 10px}
.Pro_Images img {border-bottom: #ccc 1px solid; filter: alpha(opacity=30); border-left: #ccc 1px solid; height:80px; margin: 0px 5px; display: inline; border-top: #ccc 1px solid; border-right: #ccc 1px solid; opacity: 0.3}
.Pro_Images .active {border-bottom-color: #999; filter: alpha(opacity=100); border-top-color: #999; border-right-color: #999; border-left-color: #999; opacity: 1}
.Pro_Pagination {text-align: center; padding-bottom: 5px; padding-left: 0px; padding-right: 0px; background: #fff; font-size: 14px; padding-top: 5px}
.Pro_BigImage {text-align: center; background: #fff}
.Pro_BigImage img {margin: 0px auto; cursor: pointer;}
.ProLink{}
.listimg{}
.Pro_Link{padding:5px 0;text-align:center;font-size:14px;}
</style>
<script type="text/javascript">
    var currNum;
    var maxNum;
    var imgUrl;
    var iMaxWidth = 1024;
    var iMaxHeight = 768;                                                //设置显示大图的最大高宽比例；
    var isMaxWidth = 80;                                                 //设置小图的宽.
    var isMaxHeight = 80;                                                //设置小图的高.
    var flag = false;
    var GetImages = new Image();
    
    function DrawImage(ImgD, MaxWidth, MaxHeight) {                      //参数(图片(对象),允许的宽度,允许的高度)
        var iWidth, iHeight;
        var image = new Image();
        image.src = ImgD.src;
        //alert(image.width);
        if (image.width > 0 && image.height > 0) {
            flag = true;
            if (image.width / image.height >= MaxWidth / MaxHeight) {
                if (image.width > MaxWidth) {
                    ImgD.width = MaxWidth;
                    ImgD.height = (image.height * MaxWidth) / image.width;
                } else {
                    ImgD.width = image.width;
                    ImgD.height = image.height;
                }
            }
            else {
                if (image.height > MaxHeight) {
                    ImgD.height = MaxHeight;
                    ImgD.width = (image.width * MaxHeight) / image.height;
                } else {
                    ImgD.width = image.width;
                    ImgD.height = image.height;
                }
            }
            var ImageSize = new Array();
            ImageSize[0] = ImgD.width;
            ImageSize[1] = ImgD.height;
            //alert(ImageSize[0] + "+" + ImageSize[1]);
            return ImageSize; //返回图片等比缩放后的高宽数组.
        }
        return 0;
    }
    function getNum(action) {
        currNum = parseInt($(".Pro_BigImage img").get(0).name);
        $(".Pro_Images img").each(function() {
            $(this).removeClass("active");
            this.style.filter = "alpha(opacity=30)";
            this.style.opacity = "0.3";
        })
        if (action == "prev") {
            if (currNum == 0) { currNum = maxNum };
            GetImages.src = $(".Pro_Images img").get(currNum - 1).src;
            $(".Pro_Images img").get(currNum - 1).className = "active";
            $(".Pro_Images img").get(currNum - 1).style.filter = "alpha(opacity=100)";
            $(".Pro_Images img").get(currNum - 1).style.opacity = "1";
            $(".Pro_BigImage img").hide();
            $(".Pro_BigImage img").get(0).src = imgUrl + $(".Pro_Images img").get(currNum - 1).name.split("||")[1];
            $(".Pro_BigImage img").get(0).name = $(".Pro_Images img").get(currNum - 1).name.split("||")[0];
            $(".Pro_BigImage img").get(0).width = DrawImage(GetImages, iMaxWidth, iMaxHeight)[0]; //等比缩放大图.
            $(".Pro_BigImage img").fadeIn();
            $("#page_1").html(currNum + "/" + maxNum);
            $("#page_2").html(currNum + "/" + maxNum);
        } else {
            if (currNum == maxNum - 1) { currNum = -1 };
            GetImages.src = $(".Pro_Images img").get(currNum + 1).src;
            $(".Pro_Images img").get(currNum + 1).className = "active";
            $(".Pro_Images img").get(currNum + 1).style.filter = "alpha(opacity=100)";
            $(".Pro_Images img").get(currNum + 1).style.opacity = "1";
            $(".Pro_BigImage img").hide();
            $(".Pro_BigImage img").get(0).src = imgUrl + $(".Pro_Images img").get(currNum + 1).name.split("||")[1];
            $(".Pro_BigImage img").get(0).name = $(".Pro_Images img").get(currNum + 1).name.split("||")[0];
            $(".Pro_BigImage img").get(0).width = DrawImage(GetImages, iMaxWidth, iMaxHeight)[0]; //等比缩放大图.
            $(".Pro_BigImage img").fadeIn();
            $("#page_1").html(parseInt(currNum + 2) + "/" + maxNum);
            $("#page_2").html(parseInt(currNum + 2) + "/" + maxNum);
        }
    }
    function initNum() {
        //把标签生成的图片代码重新追加到Pro_Images节点中.
        for (var i = 0; i < $(".listimg a").length; i++) {
            //GetImages.src = $(".listimg a").get(i).rel;
            $(".Pro_Images").append("<img name=" + i + "||" + $(".listimg a").get(i).rel + " src=" + $(".listimg a").get(i).rel + ">");
            //$(".Pro_Images").append("<img name=" + i + "||" + $(".listimg a").get(i).rel + " src=" + $(".listimg a").get(i).rel + " width=" + DrawImage(GetImages, isMaxWidth, isMaxHeight)[0] + " height=" + DrawImage(GetImages, isMaxWidth, isMaxHeight)[1] + ">");
        };
        maxNum = parseInt($(".Pro_Images img").length);
        imgUrl = "";
        GetImages.src = $(".Pro_Images img").get(0).src;
        $(".Pro_Images img").get(0).className = "active";
        //添加默认显示的大图.
        $(".Pro_BigImage").append("<img src='" + imgUrl + $(".Pro_Images img").get(0).name.split("||")[1] + "' name='" + $(".Pro_Images img").get(0).name.split("||")[0] + "' alt='点击查看下一张'" + "width='" + DrawImage(GetImages, iMaxWidth, iMaxHeight)[0] + "'>");
        $(".Pro_BigImage img").click(function() {
            getNum("next"); //添加点击大图的事件.
        })
        $("#page_1").html("1/" + maxNum);
        $("#page_2").html("1/" + maxNum);
    }
    $(function() {
        $(".ProLink").html($(".listimg a").get(0).title);//设置商品的标题
        initNum();
        $(".Pro_Images img").mouseover(function() {
            this.style.filter = "alpha(opacity=100)";
            this.style.opacity = "1";
        }).mouseout(function() {
            if (this.className != "active") {
                this.style.filter = "alpha(opacity=30)";
                this.style.opacity = "0.3";
            }
        }).click(function() {
            $(".Pro_Images img").each(function() {
                $(this).removeClass("active");
                this.style.filter = "alpha(opacity=30)";
                this.style.opacity = "0.3";
            })
            this.className = "active";
            this.style.filter = "alpha(opacity=100)";
            this.style.opacity = "1";
            GetImages.src = this.name.split("||")[1];
            $(".Pro_BigImage img").hide();
            $(".Pro_BigImage img").get(0).src = imgUrl + this.name.split("||")[1];
            $(".Pro_BigImage img").get(0).name = this.name.split("||")[0];
            $(".Pro_BigImage img").get(0).width = DrawImage(GetImages, iMaxWidth, iMaxHeight)[0]; //等比缩放大图.
            $(".Pro_BigImage img").fadeIn();
            $("#page_1").html(parseInt(this.name.split("||")[0]) + 1 + "/" + maxNum);
            $("#page_2").html(parseInt(this.name.split("||")[0]) + 1 + "/" + maxNum);
        })
    })
	
</script>
<title>商品相册</title>
</head>
<body>
    <form id="form1" runat="server">
    <div class="Pro_Info">
    <h1><a class="ProLink" href="javascript:history.back(-1);"></a></h1>
    <div class="Pro_Images"></div>
    <div class="Pro_Pagination"><a href="javascript:getNum('prev')">上一张</a>&nbsp;&nbsp;&nbsp;<em id="page_1"></em>&nbsp;&nbsp;&nbsp;<a href="javascript:getNum('next')">下一张</a></div>
    <div class="Pro_BigImage"></div>
    <div class="Pro_Pagination"><a href="javascript:getNum('prev')">上一张</a>&nbsp;&nbsp;&nbsp;<em id="page_2"></em>&nbsp;&nbsp;&nbsp;<a href="javascript:getNum('next')">下一张</a></div>
    </div>
    <div class="Pro_Link"><Hishop:SiteUrl UrlName="home" runat="server">返回首页</Hishop:SiteUrl>&nbsp;&nbsp;&nbsp;<a href="javascript:history.back(-1);">返回商品页</a></div>
    <div style="display:none" class="listimg"><Hishop:ProductImagePreview ID="displayImg"  runat="server"/></div>
    </form>
</body>
</html>
