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/

如何在单击时在网格视图中展开图像

1 个答案: