<%@ Page Language="C#" AutoEventWireup="true" Inherits="ImgManagement.ImageShow,alimnmy"  %>
<%@ Register Assembly="AspNetPager" Namespace="Wuqi.Webdiyer" TagPrefix="webdiyer" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>双击选择图片</title>
<style>
* { margin:0; padding:0; }
img { vertical-align:bottom; border:none; }
body {  height:450px; font-family:Arial; font-size:12px; position:relative;}
ul { list-style:none; }
a{ color:#000;}
ul#gallery { width:480px;padding-bottom:10px; border:1px solid #d3d3d3; background:#fff; overflow:hidden; height:350px; }
ul#gallery li { width:100px; height:100px; float:left;padding:10px; display:inline; }
ul#gallery li a.smallimage {  display:block; width:90px; height:90px; }
a:hover{ cursor:pointer;} 
#bigimage { position:absolute; display:none; }
#bigimage img {  max-width:250px; padding:1px; background:#fff; border:1px solid #60F;}
#bod{ position:absolute;left:50%;margin-left:-225px;width:480px;height:450px;}
img.sml{ width:90px;height:90px;	}
#add{width: 350px; height:200px; border: 1px solid #999;background:#FFF;position: absolute;left: 50%;margin-left: -175px;top: 50%;margin-top: -100px; display:none;}
#show{  width:100%; height:100%; position:fixed;  top:0; left:0; background:#ccc;filter:alpha(opacity=50); /* IE */ ; -moz-opacity:0.5; /* Moz + FF */ ; opacity: 0.5; display:none;}
    .style1
    {   margin:10px;
		width:100%;
        border-style: solid;
        border-width: 0;
    }
    .style2
    {
        height: 25px;
        width:100px;
		text-align:right;
    }
</style>
    <script src="../js/Img.js"></script>
    <script src="../js/jquery.min.js"></script>
    <script>
        //<![CDATA[
        $(function() {
            var x = 22;
            var y = 20;

            $("a.smallimage").hover(function(e) {
                $("body").append('<p id="bigimage"><img src="' + this.rel + '" alt="" /></p>');
                $(this).find('img').stop().fadeTo('slow', 0.5);
                widthJudge(e);
                $("#bigimage").fadeIn('fast');
            }, function() {
                $(this).find('img').stop().fadeTo('slow', 1);
                $("#bigimage").remove();
            });

            $("a.smallimage").mousemove(function(e) {
                widthJudge(e);
            });

            function widthJudge(e) {
                var marginRight = document.documentElement.clientWidth - e.pageX;
                var imageWidth = $("#bigimage").width();
                if (marginRight < imageWidth) {
                    x = imageWidth + 22;
                    $("#bigimage").css({ top: (e.pageY - y) + 'px', left: (e.pageX - x) + 'px' });
                } else {
                    x = 22;
                    $("#bigimage").css({ top: (e.pageY - y) + 'px', left: (e.pageX + x) + 'px' });
                };
            }
        });
        //]]>
</script>
    <script language="javascript">
        var oldhtm;
        function addnon() {
            document.getElementById("add").style.display = "none";
            document.getElementById("show").style.display = "none";
			document.getElementById("name").value="";
			document.getElementById("Altt").value="";
        }
        function showadd() {
            setTimeout("newhtm()", 800);
        }

        function newhtm() {
            document.getElementById("show").style.display = "block";
             document.getElementById("add").style.display = "block";
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div id="bod">
        <p>
             <span style=" font-size:16px;" >图片搜索：</span><asp:TextBox ID="Textsou" runat="server"></asp:TextBox><asp:Button 
                 ID="Btns" runat="server" Text="搜索" onclick="Btns_Click" />
        </p>
        <p  style="padding-top:10px;">
        <%--<asp:CheckBox ID="ChBQ"  Text="全选" runat="server" AutoPostBack="True" oncheckedchanged="ChBQ_CheckedChanged" />--%>
                               <script language="javascript">
                          function selectAll(flag) {
                              {
                                  var myForm = window.document.forms[0];
                                  if (document.form1.btnJSSelectAll.value == "JS全选") {
                                      for (var i = 0; i < myForm.length; i++) {
                                          c = myForm.elements[i].type;
                                          if (c == "checkbox") {
                                              myForm.elements[i].checked = true;
                                          }
                                      }
                                      document.form1.btnJSSelectAll.value = "JS全不选";
                                  }
                                  else {
                                      for (var i = 0; i < myForm.length; i++) {
                                          c = myForm.elements[i].type;
                                          if (c == "checkbox") {
                                              myForm.elements[i].checked = false;
                                          }
                                      }
                                      document.form1.btnJSSelectAll.value = "JS全选";
                                  }
                              }
                              }
                 </script>
                  <input id="btnJSSelectAll" type="checkbox" onclick="selectAll(1)" value="JS全选" />
                 <a onclick="selectAll(1)" href="javascript:void(0)">全选</a>
        &nbsp;&nbsp;&nbsp;
        <a onclick="showadd()" >添加</a>&nbsp;&nbsp;&nbsp;
        <asp:LinkButton ID="LinkButton2" runat="server"  OnClientClick="return confirm('您确认删除该图片,删除后无法恢复？')" onclick="LinkButton2_Click">删除</asp:LinkButton>
        </p>
        <asp:Repeater ID="Repeater1" runat="server">
               <HeaderTemplate>
                         <ul id="gallery">
               </HeaderTemplate>
            <ItemTemplate>
               <li>
                <a  class="smallimage" rel="<%# Eval("imgurl") %> " onDblClick="ReturnValue('<%# Eval("imgurl") %>')"><img class="sml" src="<%# Eval("imgurl") %>" title="双击选择图片" ></a>
                <asp:CheckBox ID="ChB" runat="server"  Text='<%# Fun.substr( Eval("title").ToString(),6)%>' />
                <asp:LinkButton ID="LkbtD" CommandArgument='<%# Eval("id") %>' runat="server"></asp:LinkButton>
               </li>
                
            </ItemTemplate>
            <FooterTemplate></ul></FooterTemplate>
        </asp:Repeater>
           <webdiyer:aspnetpager id="AspNetPager1" runat="server"  horizontalalign="Center" onpagechanged="AspNetPager1_PageChanged" width="100%" PageSize="12"></webdiyer:aspnetpager>
         </div>
         <div id="show" runat="server"></div>
         <div id="add" runat="server">
            
             <table cellpadding="0" cellspacing="0" class="style1">
                 <tr>
                     <td class="style2">
                         图片名称：</td>
                     <td >
                         <asp:TextBox ID="name" runat="server" MaxLength="9" Width="120px"></asp:TextBox>
                     </td>
                 </tr>
                 <tr>
                     <td class="style2">
                         选择图片：</td>
                     <td>
                         <asp:FileUpload ID="FileUpload1" runat="server" />
                     </td>
                 </tr>
                 <tr>
                     <td class="style2">
                         图片描述：</td>
                     <td>
                         <asp:TextBox ID="Altt" runat="server" Height="93px" TextMode="MultiLine" 
                             Width="180px"></asp:TextBox>
                     </td>
                 </tr>
                 <tr>
                     <td>&nbsp;
                         </td>
                     <td>
                         <asp:Button ID="Button1" runat="server" Text="上传" onclick="Button1_Click" /> &nbsp; &nbsp;<input type="button" onclick="addnon()" value="取消" />
                     </td>
                 </tr>
             </table>
            
         </div>
    </form>
</body>

</html>
