Click here to Skip to main content
12,403,812 members (68,303 online)
Rate this:
 
Please Sign up or sign in to vote.
See more: C# ASP.NET jQuery
How can i popup image which is small in gridview and when it hovers it should be large...

how can i do this using jquery..
Posted 18-Feb-11 21:00pm
Updated 18-Feb-11 21:02pm
v2
Rate this: bad
 
good
Please Sign up or sign in to vote.

Solution 1

It's not built into jQuery itself, but you can use a plugin like jquery-plugin-tooltip[^]
Its basically an absolute positioned div on top of everything else.
  Permalink  
Comments
Vineet_2109 19-Feb-11 3:11am
   
thanks for your comments but it doesn't inside grid i tried. so if possible can you suggest some other idea. or you can help using example..
Rate this: bad
 
good
Please Sign up or sign in to vote.

Solution 2

Have a look Here[^]
  Permalink  
Comments
Vineet_2109 21-Feb-11 4:02am
   
thanks...i did it.. but its too slow with large data ... so jquery might increase speed..if you can find would be great ...
Rate this: bad
 
good
Please Sign up or sign in to vote.

Solution 3

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
        <Columns>
            <asp:TemplateField>
                <HeaderTemplate>
                    image
                </HeaderTemplate>
                <ItemTemplate>
                    <asp:Image CssClass="Image1" ImageUrl='<%# Eval("Image") %>' runat="server" />
                </ItemTemplate>
            </asp:TemplateField>
 
        </Columns>
    </asp:GridView>
////////////////////////////////////////////////////////////////////////////////////////
use this jquery for display image on mousehover
$('#<%=GridView1.ClientID %>').find('img[class$="Image1"]').mouseover(function () {
   $('#<%=GridView1.ClientID %>').find('img[class$="Image1"]').width(500);
   $('#<%=GridView1.ClientID %>').find('img[class$="Image1"]').height(500);
});
 
$('#<%=GridView1.ClientID %>').find('img[class$="Image1"]').mouseout(function () {
   $('#<%=GridView1.ClientID %>').find('img[class$="Image1"]').width(100);
   $('#<%=GridView1.ClientID %>').find('img[class$="Image1"]').height(100);
});
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
put your dialog box open code in mouseover and mouseout event...
  Permalink  
v3
Comments
Nelek 28-Aug-14 7:20am
   
Do you realize that the question is 4+ years old?
Jaimin H. Soni 28-Aug-14 7:30am
   
Its 3+ years old...

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month


Advertise | Privacy | Mobile
Web02 | 2.8.160721.1 | Last Updated 28 Aug 2014
Copyright © CodeProject, 1999-2016
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100