Zooming an images in GataGrid binding

Hi,

Some times it is very diffecult to check image clearity or resolution after binding in data grid. also user uable to see is clearly. This code is very usefull to check image after binding in DataGrid. It will bind DataBase Content with image path and then we can zoom that images on click.

Follow the below steps:

1)Add below script and style within <HEAD> tag:



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

<style type="text/css">
body
{
margin:0;
padding:0;
height:100%;
overflow-y:auto;
}
.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: 200px;
width: 200px;
padding: 3px;
border: solid 1px black;
}
* html #divImage {position:absolute;}
</style>



2) Add below HTML code within <FORM> tag:




<div>
<br />
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false"
Font-Names="Arial">
<Columns>
<asp:BoundField DataField="contentID" HeaderText="ID" />
<asp:BoundField DataField="Title" HeaderText="Image Name" />
<asp:TemplateField HeaderText="Preview_50x50">
<ItemTemplate>
<asp:ImageButton ID="ImageButton1" runat="server"
ImageUrl='<%# Eval("Preview_200x200")%>'
Style="cursor: pointer"
OnClientClick = "return LoadDiv(this.src);" Width="50" Height="50"
/>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>

<div id="divBackground" class="modal">
</div>
<div id="divImage" class = "info">
<img id="imgLoader" alt="" src="images/loader.gif" />
<img id="imgFull" runat="server" alt="" src='<%# Eval("Preview_200x200")%>' style="display: none; height: 200;width:00" />
<input id="btnClose" type="button" value="close" onclick="HideDiv()"/>
</div>



3)Add these in Code Behind :



Dim com1 As New SqlCommand("SELECT top 4 Title, contentid, category,preview_200x200, preview_50x50,RefNo FROM TableName order by newid()) order by category asc", con)
Dim ada1 As New SqlDataAdapter(com1)
Dim dset1 As New DataSet
ada1.Fill(dset1)
GridView1.DataSource = dset1
GridView1.DataBind()





I hope it will usefull to u...

Thanks & Regards
Nilesh


Comments

Author: mithun29 Dec 2009 Member Level: Bronze   Points : 2

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";
}
}




ImageUrl="~/Image/test.jpg" Width="100px"
Height="100px" Style="cursor: pointer"
OnClientClick = "return LoadDiv(this.src);"
/>













src="" />
style="display: none;
height: 500px;width: 590px" />

onclick="HideDiv()"/>

Author: praveen27 Sep 2010 Member Level: Gold   Points : 0

can u provide source code file ..



  • Do not include your name, "with regards" etc in the comment. Write detailed comment, relevant to the topic.
  • No HTML formatting and links to other web sites are allowed.
  • This is a strictly moderated site. Absolutely no spam allowed.
  • Name:
    Email: