Enlarge image on mouseover gridview image field

Question

1.00/5 (1 vote)

See more:

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

XML

<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 8:05am

shms_rony

Updated 10-Apr-11 18:03pm

Ramalinga Koushik

v3

Add a Solution

Comments

shms_rony 10-Apr-11 16:02pm

any one help me

6 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

Ramu Sangabathula Original · Answer 1 · 2011-04-10T15:06:00

I have done a sample using jquery, that works.

XML

<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.

Gandalf_TheWhite · Answer 2 · 2011-04-27T03:24:00

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.

raju melveetilpurayil · Answer 3 · 2011-04-27T15:01:00

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/[^]

Posted 27-Apr-11 15:01pm

raju melveetilpurayil

^That's **Aragon** · Answer 4 · 2011-04-10T19:09:00

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.

Posted 10-Apr-11 19:09pm

^That's Aragon

Ramalinga Koushik · Answer 5 · 2011-04-10T18:05:00

Solution 2

Hope this[^] might help you.

Posted 10-Apr-11 18:05pm

Ramalinga Koushik

nit_singh · Answer 6 · 2011-04-27T04:00:00

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

<code>
<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></code>

This should work for you