Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
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
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 1

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
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 4

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  
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 3

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  
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 2

Hope this[^] might help you.
  Permalink  
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 5

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  
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 6

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 Sergey Alexandrovich Kryukov 609
1 OriginalGriff 587
2 Maciej Los 325
3 Mathew Soji 195
4 BillWoodruff 190
0 OriginalGriff 7,356
1 Sergey Alexandrovich Kryukov 6,712
2 DamithSL 5,461
3 Manas Bhardwaj 4,916
4 Maciej Los 4,475


Advertise | Privacy | Mobile
Web04 | 2.8.1411023.1 | Last Updated 9 Oct 2012
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