****Start Script*****
[head id="Head1" 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]
****End Script***
***Css Start ***
[style type="text/css"]
****End Script***
***Css Start ***
[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]
***End Css***
***Start Body ***
[body]
[form id="form1" runat="server"]
[div]
[br /]
[asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
Font-Names="Arial"]
[Columns]
[asp:TemplateField HeaderText="Preview Image"]
[ItemTemplate]
[asp:ImageButton ID="ImageButton1" runat="server"
ImageUrl='<%# Eval("p_image")%>' Width="50px"
Height="50px" 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]
***End Css***
***Start Body ***
[body]
[form id="form1" runat="server"]
[div]
[br /]
[asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
Font-Names="Arial"]
[Columns]
[asp:TemplateField HeaderText="Preview Image"]
[ItemTemplate]
[asp:ImageButton ID="ImageButton1" runat="server"
ImageUrl='<%# Eval("p_image")%>' Width="50px"
Height="50px" 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]
No comments:
Post a Comment