Software Tips & Tricks: Image Gallery => Image Enlarge ( Display Images in GridView Preview )

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>GridView Images Example</title>

<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: 550px;
width: 600px;
padding: 3px;
border: solid 1px black;
}
* html #divImage {position:absolute;}
</style>

</head>
<body>
<form id="form1" runat="server">
<div>
<br />
<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>
</div>

<div id="divBackground" class="modal">
</div>
<div id="divImage" class = "info">
<table style="height: 100%; width: 100%">
<tr>
<td valign="middle" align="center">
<img id="imgLoader" alt=""
src="images/loader.gif" />
<img id="imgFull" runat="server" 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>
</form>
</body>
</html>

Software Tips & Tricks

Wednesday, June 24, 2015

Image Gallery => Image Enlarge ( Display Images in GridView Preview )

No comments:

Post a Comment