RSS

Image Zoom or enlarge using ASP.Net GridView control

30 Jul

In this Article you see  Image enlarge or zooming to an click on  Image  column on ASP.Net GridView control.

if you want to see small size image  of Gridview Row to see enlarge then this article very helpfull for you.if this helpful then kindly comment about that.

9e45058b

Concept of Idea

Here I’ll be adding Zoom functionality to all the images in the GridView so that user can click on that and view the enlarged image in a modal div .

 

Add DIV

First you need to add the two DIV on Asp.net page where you place gridview.

 

<div id=”divBackground”>

</div>

<div id=”divImage”>

    <table style=”height: 100%; width: 100%”>

        <tr>

            <td valign=”middle” align=”center”>

                <img id=”imgLoader” alt=””

                 src=”images/loader.gif” />

                <img id=”imgFull” alt=”” src=””

                 style=”display: none;

                height: 500px;width: 590px” />

            </td>

        </tr>

        <tr>

            <td align=”center” valign=”bottom”>

                <input id=”btnClose” type=”button” value=”close”

                 onclick=”HideDiv()”/>

            </td>

        </tr>

    </table>

</div>

 

 

The First DIV divBackground will act as a modal DIV and will freeze the screen. The second DIV divImage will be used to display the enlarged image. You will notice the image which I have added to provide a loading in progress until the image is completely loaded. The below image displays the loading of an image.

 

when you Click to enlarge image

a156c83d-40a1-41fb-bca1-c84a049b10ff

Adding the CSS

You will need to add the following CSS in the head section of the page or in the CSS file

 

<style type=”text/css”>

     body

     {

        margin:0;

        padding:0;

        height:100%;

     }

     .modal

     {

        display: none;

        position: absolute;

        top: 0px;

        left: 0px;

        background-color:black;

        z-index:100;

        opacity: 0.8;

        filter: alpha(opacity=60);

        -moz-opacity:0.8;

        min-height: 100%;

     }

     #divImage

     {

        display: none;

        z-index: 1000;

        position: fixed;

        top: 0;

        left: 0;

        background-color:White;

        height: 550px;

        width: 600px;

        padding: 3px;

        border: solid 1px black;

     }

   </style>

 

Adding the JavaScript on Same Page

JavaScript function that will display the modal DIV when the Image in the ASP.Net GridView Control is clicked.

<script type=”text/javascript”>

 function LoadDiv(url)

 {

    var img = new Image();

    var bcgDiv = document.getElementById(“divBackground”);

    var imgDiv = document.getElementById(“divImage”);

    var imgFull = document.getElementById(“imgFull”);

    var imgLoader= document.getElementById(“imgLoader”);

 

    imgLoader.style.display = “block”;

    img.onload = function() {

        imgFull.src = img.src;

        imgFull.style.display = “block”;

        imgLoader.style.display = “none”;

    };

    img.src= url;

    var width = document.body.clientWidth;

    if (document.body.clientHeight > document.body.scrollHeight)

    {

        bcgDiv.style.height = document.body.clientHeight + “px”;

    }

    else

    {

        bcgDiv.style.height = document.body.scrollHeight + “px” ;

    }

 

    imgDiv.style.left = (width-650)/2 + “px”;

    imgDiv.style.top =  “20px”;

    bcgDiv.style.width=”100%”;

   

    bcgDiv.style.display=”block”;

    imgDiv.style.display=”block”;

    return false;

 }

 function HideDiv()

 {

    var bcgDiv = document.getElementById(“divBackground”);

   var imgDiv = document.getElementById(“divImage”);

    var imgFull = document.getElementById(“imgFull”);

    if (bcgDiv != null)

    {

        bcgDiv.style.display=”none”;

        imgDiv.style.display=”none”;

        imgFull.style.display = “none”;

    }

 }

</script>

Above are the two functions that will take care of all the functions needed. The LoadDiv function as the name that loads the modal background DIV and the Image DIV with the enlarged image. This function gets called when the Image in the GridView is clicked.

An important line I need to point out is this

imgDiv.style.left = (width-650)/2 + “px”;

 

As you will notice I have used a number 650 here. 650 is the width of the Image DIV in order to align it at the center of the screen I am subtracting it from the browser Viewport width and then taking the average.

The HideDiv function simply gets called when the Close Button is clicked on the Image DIV. It simply hides the DIV and unfreezes the screen.

 

Calling JavaScript from ASP.Net GridView Control

The only difference from my previous article is that I have used Image Control in Template Field instead of ImageField. Refer the GridView below

 

 

 

<asp:GridView ID=”GridView1″ runat=”server” AutoGenerateColumns=”false”

  Font-Names=”Arial”>

<Columns>

    <asp:BoundField DataField=”ID” HeaderText=”ID” />

    <asp:BoundField DataField=”FileName” HeaderText=”Image Name” />

    <asp:TemplateField HeaderText=”Preview Image”>

        <ItemTemplate>

            <asp:ImageButton ID=”ImageButton1″ runat=”server”

            ImageUrl='<%# Eval(“FilePath”)%>’ Width=”100px”

            Height=”100px” Style=”cursor: pointer”

            OnClientClick = “return LoadDiv(this.src);”

            />

        </ItemTemplate>

    </asp:TemplateField>

</Columns>

</asp:GridView>

 

 

 

when you  calling the LoadDiv function in the OnClientClick event of ASP.Net ImageButton. It is important to return false from the JavaScript function to avoid postbacks. In the figure below you can view the enlarged image being displayed

 

Click to enlarge image

 

 

 

Zoom

 

That’s it we come to an end. Hope you liked it. Download the related source code using the link below.

https://skydrive.live.com/?cid=fcca6a631a7ce903#cid=FCCA6A631A7CE903&id=FCCA6A631A7CE903!883

 

Advertisements
 
Leave a comment

Posted by on July 30, 2013 in ASP Dot Net C#

 

Tags: , , , , , ,

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: