Click here to Skip to main content
11,496,146 members (698 online)
The site is currently in read-only mode for maintenance. Posting of new items will be available again shortly.
See more: ASP.NET
hi all,,,

I displayed image in gridview from database

but image is small

i want to enlarge image on mouseover gridview field

this is my aspx code

<asp:GridView ID="GridView1" runat="server" 
     AutoGenerateColumns="False" Height="16px" 
     style="text-align: center" Width="92px">
     <Columns>
         <asp:ImageField DataImageUrlField="filepath" 
             ControlStyle-Width="100%"
             HeaderText="Attachment">
             <ControlStyle Width="100px" ></ControlStyle>
             <ItemStyle Width="100%"  />
         </asp:ImageField>
     </Columns>
</asp:GridView>
Posted 10-Apr-11 9:05am
Edited 10-Apr-11 19:03pm
v3
Comments
shms_rony at 10-Apr-11 16:02pm
   
any one help me
I have done a sample using jquery, that works.

<script language="javascript" type="text/javascript" >
    $().ready(function () {
        //alert("I am in the ready");
        //alert($("img").length);
        $("img").mouseover(function () { $(this).width(200); $(this).height(200) });
        $("img").mouseleave(function () { $(this).width(50); $(this).height(50) });
    })
</script>

Use a better selectors for finding only our specific images in the grid view.
The above code should trick on mouse over image resizing.
  Permalink  
Comments
shms_rony at 11-Apr-11 8:38am
   
how can i call it ??
i can't put onmouseover in my above code
corol1234 at 11-Apr-11 19:10pm
   
those above lines are using jquery, i have done the sample and I am able to fix it. I am not sure what do you mean by "i can't put onmouseover in my above code" in your lines
Considering you already have large Image and that You are showing in grid with much less dimensions.
And you want the Image to enlarge whenever the Image is clicked or hovered.

There are couple of ways from which you can achieve this. You can do this via JQuery and for more reference Search for the Term 'HighSlide' they have similar functionality as per your needs.
for any of the case you have to use already big image while binding to the grid to enlarge the image regardless of the proportionate dimension you want to show.

Follow any of the way, if you have any query afterward post here, I will be glad to assist you.
  Permalink  
Addition to above two answer you can also use JQuery. Please go through below link.
It has a complete example with demo.

Jquery Link[^]

Hope it helps.
  Permalink  
Hope this[^] might help you.
  Permalink  
Because you are using <asp:imagefield xmlns:asp="#unknown"> thats why you can not call any custom function. If you donot want to change it then go with the solution of "corol1234".

But If you can change it then follow the below steps
<script>
   function ShowFull(ctrl)
   {
    ctrl.style.height = '100px';
    ctrl.style.width = '200px';
   }
</script>
 

<asp:gridview id="GridView1" runat="server" autogeneratecolumns="False" height="16px">
        Style="text-align: center" Width="92px">
        <columns>
            <asp:templatefield>
                <itemtemplate>
                    <asp:image id="Image1" runat="server" onclick="ShowFull(this)" imageurl="<%#Eval("filepath") %>" />
                </itemtemplate>
            </asp:templatefield>
        </columns>
    </asp:gridview>
This should work for you
  Permalink  
Did you try with JQZoom? its is a javascript image magnifier built at the top of the popular jQuery javascript framework. jQzoom is a great and a really easy to use script to magnify what you want.
and it support most of the browsers...

http://www.mind-projects.it/projects/jqzoom/[^]
  Permalink  

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

  Print Answers RSS
0 RyanDev 230
1 Sergey Alexandrovich Kryukov 114
2 Richard Deeming 100
3 OriginalGriff 89
4 Mostafa Asaduzzaman 59
0 Sergey Alexandrovich Kryukov 10,401
1 OriginalGriff 8,910
2 Sascha Lefèvre 3,899
3 Maciej Los 3,422
4 Richard Deeming 2,600


Advertise | Privacy | Mobile
Web02 | 2.8.150520.1 | Last Updated 9 Oct 2012
Copyright © CodeProject, 1999-2015
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