Click here to Skip to main content
11,485,334 members (77,720 online)
Rate this: bad
good
Please Sign up or sign in to vote.
See more: ASP.NET
I am displaying images in gridview i want to zoom image and open in center when pointer goes to on that image. How can i do this?
Posted 19-Jan-13 5:38am
Comments
Gittu Dash at 19-Jan-13 15:00pm
   
How are you providing data to GridView ?

I mean if you are Customizing columns manually Writing Templates then your requirement could be possible to achieve.

But if you are just using DataSet or any Data Source to automatically provide dat then I don't think your requirement could be achievable.

So plz rply here how you filling up data in GridView ?
Jigar Sangoi at 20-Jan-13 2:44am
   
I am using dataset but it is possible by using template then tell how can I do this
Gittu Dash at 20-Jan-13 4:55am
   
Let me try it.
If getting Successful will post the Code here.

1 solution

Rate this: bad
good
Please Sign up or sign in to vote.

Solution 1

This solution will provide you zooming of the image present in GridView whenever mouse pointer hovers over it.

Step-1: Add GridView & Databinding for it according to your requirement.Change "AutoGenerateColumns" property of Gridview to False.
I hope you know how to use Templates to Show data in GridView.
So now add an Image control under Item Template as following:

<asp:TemplateField HeaderText="Employee Image">
  <ItemTemplate>
    <asp:Image ID="gvImg" runat="server" ImageUrl="~/Images/1.jpg" CssClass="default" />
  </ItemTemplate>
</asp:TemplateField>

I've used a CSS Class, which I've provided below & an Image just for demo.You can use them according to your requirement.

Step-2: Write the following jQuery code in your page under Head section:
<style>
  .default 
   {
     width: 75px;
     height: 75px;
   }
</style>
 
<script src="Scripts/jquery-1.8.3.js"></script>
<script>
  $(document).ready(function () {
    //Using default CSS Class here for capturing the hover event
    $('.default').each(function () {
      $(this).hover(function () {
        $(this).animate({ width:100,height:120 }, 500);
      },
      function () {
        $(this).animate({ width:75,height:75 }, 250);
      });
    });
  });
</script>

Hover event takes 2 Functions.1st one when mouse pointer comes over Image & 2nd Function when mouse pointer goes out of Image control.

Now whenever mouse pointer will come over the Image control present in GridView, it'll zoom in & when mouse pointer goes out it'll zoom out.

Still you didn't get any point feel free to ask.
  Permalink  
Comments
Jigar Sangoi at 24-Jan-13 1:16am
   
This code works good but problem is that images are resize in that template field only i want to display images in to new window using hover or onclick
Gittu Dash at 24-Jan-13 2:05am
   
See For New Window I don't Have Much Idea.
But Yes if you know how to use Ajax Control Toolkit, then you can use Popup Extender Control for this Purpose.

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 380
1 Maciej Los 365
2 Mehdi Gholam 210
3 Frankie-C 134
4 OriginalGriff 134
0 Sergey Alexandrovich Kryukov 8,819
1 OriginalGriff 7,982
2 Sascha Lefèvre 3,199
3 Maciej Los 2,841
4 Richard Deeming 2,370


Advertise | Privacy | Mobile
Web02 | 2.8.150520.1 | Last Updated 22 Jan 2013
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