Click here to Skip to main content
12,950,084 members (61,565 online)
Rate this:
 
Please Sign up or sign in to vote.
See more:
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
OriginalGriff 5,829
CHill60 3,460
Maciej Los 2,953
Jochen Arndt 1,975
ppolymorphe 1,820


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