如何扩大点击网格视图图像它

Question

你好，我已经设置图片为缩略图网格视图

如何展开，当用户点击图片或悬停在它

<div class="row"> 
          <div class="col-md-12 table-responsive"> 

           <asp:GridView ID="gridprod" runat="server" AutoGenerateColumns="false" CssClass="table table-bordered text-nowrap" OnSelectedIndexChanged="gridprod_SelectedIndexChanged" OnRowDeleting="gridprod_RowDeleting"> 
            <Columns> 
             <asp:TemplateField HeaderText="Edit"> 
              <ItemTemplate> 
               <asp:LinkButton ID="LinkButton1" runat="server" CssClass="btn btn-primary btn-xs" CausesValidation="False" CommandName="Select" Text=""><i class="glyphicon glyphicon-pencil"></i></asp:LinkButton> 
              </ItemTemplate> 
              <ControlStyle CssClass="btn btn-primary" /> 
             </asp:TemplateField> 
             <asp:TemplateField HeaderText="Delete"> 
              <ItemTemplate> 
               <asp:LinkButton ID="LinkButton2" runat="server" CausesValidation="False" OnClientClick="return confirm('Are you sure you want to delete this record ?');" CssClass="btn btn-primary btn-xs" CommandName="Delete" Text="Delete"><i class="glyphicon glyphicon-trash"></i></asp:LinkButton> 
              </ItemTemplate> 
              <ControlStyle CssClass="btn btn-danger" /> 
             </asp:TemplateField> 
             <asp:BoundField DataField="Product ID" HeaderText="Product ID" SortExpression="Product ID" /> 
             <asp:BoundField DataField="Supplier ID" HeaderText="Supplier ID" ItemStyle-CssClass="hiddencol" HeaderStyle-CssClass="hiddencol" SortExpression="Supplier ID" /> 
             <asp:BoundField DataField="Supplier Name" HeaderText="Supplier Name" SortExpression="Supplier Name" /> 
             <asp:BoundField DataField="Cat ID" HeaderText="Cat ID" ItemStyle-CssClass="hiddencol" HeaderStyle-CssClass="hiddencol" SortExpression="Cat ID" /> 
             <asp:BoundField DataField="Category" HeaderText="Category" SortExpression="Category" /> 
             <asp:BoundField DataField="Product Name" HeaderText="Product Name" SortExpression="Product Name" /> 
             <asp:BoundField DataField="Unit Price" HeaderText="Unit Price" SortExpression="Unit Price" /> 
             <asp:BoundField DataField="Quantity" HeaderText="Quantity" SortExpression="Quantity" /> 
             <asp:TemplateField HeaderText=Image"> 
              <ItemTemplate> 
               <asp:ImageButton ID="ImageButton1" runat="server" 
                ImageUrl='<%# Eval("Image")%>' Width="100px" 
                Height="100px" /> 
              </ItemTemplate> 
             </asp:TemplateField> 
            </Columns> 
            <SelectedRowStyle BackColor="#D1DDF1" ForeColor="#333333" /> 
           </asp:GridView> 

          </div> 
         </div> 

网查看数据源来自该方法返回的数据表

gridprod.DataSource = d.getprod(); 
gridprod.DataBind(); 

Answer 1

您可以使用jQuery

$(document).ready(function() { 

$('[id*="ImageButton1"]').click(function() { 

$(this).width(1000); 
}); 

或

想寻找一个灯箱插件一样的fancybox

http://fancybox.net/