Click here to Skip to main content
Rate this: bad
good
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
Edited 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 at 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 at 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 at 28-Aug-14 7:20am
   
Do you realize that the question is 4+ years old?
Jaimin H. Soni at 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)



Advertise | Privacy | Mobile
Web04 | 2.8.141022.2 | Last Updated 28 Aug 2014
Copyright © CodeProject, 1999-2014
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