Showing image preview popup using div and javascript

There was a requirement to have a grid with the image thumbnail column and when we clicks that image, it should show the preview for same image in popup. That popup will have close button on right top.

Also if user selects the image as choice from combo the it should show real images if he selects the document then i need to show the one dummy image and on clicking that image it should open or save document.


Step 1:

<asp:GridView
...

<ItemTemplate>

<center>

<div runat="server" id="previewDocument" >

<a href="<%# DataBinder.Eval(Container.DataItem, "ItemUrl")%>" alt="Click to see preview." target="_blank" >

<img id="Img1" class="imgThumbnail" src="/_layouts/images/EgSpi/Default/document.gif" alt="Click to see preview." />

</a>

</div>

<div runat="server" id="previewImage" >

<img id="Img1" class="imgThumbnail" src="<%# DataBinder.Eval(Container.DataItem, "ItemUrl")%>" alt="Click to see preview." onclick="Large(this)" />

</div>

</center>

</ItemTemplate>

</asp:TemplateField>

....
</asp:GridView>

Step 2:

protected void grvResults_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
HtmlGenericControl docPreview = (HtmlGenericControl)e.Row.FindControl("previewDocument");
HtmlGenericControl imgPreview = (HtmlGenericControl)e.Row.FindControl("previewImage");

if (ddlObjectType.SelectedItem.Text == Enums.Object_Types.Document.ToString())
{
docPreview.Visible = true;
imgPreview.Visible = false;
}
else
{
docPreview.Visible = false;
imgPreview.Visible = true;
}
}
}

Step 3:

<script language="javascript">
function Large(obj) {
var imgHeight = 240;
var imgWidth = 240;
var imgBoxHeight = 250;

var imgbox = document.getElementById("imgbox");
imgbox.style.visibility = 'visible';

var divImageContainer = document.createElement("div");
divImageContainer.id = "imgContainer";
divImageContainer.innerHTML = '';

var divClose = document.createElement("div");
divClose.id = "imgclose";
divClose.innerHTML = "X";

if (divClose.addEventListener) {
divClose.addEventListener('onclick', Out, false);
} else {
divClose.attachEvent('onclick', Out);
}
imgbox.innerHTML = '';
imgbox.appendChild(divClose);

var img = document.createElement("img");
img.src = obj.src;

if ((img.height > imgHeight) || (img.width > imgWidth)) {
img.style.height = imgHeight + 'px';
img.style.width = imgWidth + 'px';
}
else {
divImageContainer.style.height = (imgBoxHeight - img.height) / 2 + 'px';
imgbox.appendChild(divImageContainer);
}

imgbox.appendChild(img);
imgbox.style.left = (obj.offsetParent.offsetLeft + 70) + 'px';
imgbox.style.top = (obj.offsetParent.offsetTop) + 'px';

}

function Out() {
document.getElementById("imgbox").style.visibility = 'hidden';
}

</script>

Step 4:

#imgbox
{
position: absolute;
border: 1px solid #999;
background: #FFFFFF;
filter: Alpha(Opacity=100);
visibility: hidden;
height: 250px;
width: 250px;
z-index: 50;
overflow: hidden;
text-align: center;
vertical-align:middle;
padding-top:5px;
padding-left:5px;
}

#imgclose
{
position: absolute;
top: 0px;
right: 0px;
background: #858585;
cursor: pointer;
padding: 6px;
font: bold 12px verdana, sans-serif;
color: white;
}

.imgThumbnail
{
border:none;
cursor:hand;
height:14px;
width:14px;
border: 1px solid #999;
padding:1px 1px 1px 1px;
}


----------------------------------- Enjoy ---------------------------------------