Hi everyone!
I'm using asp.net and I need help in modifying my codes in javascript where I used to display and enlarge image after clicking the listview row. I have tried using image button in the listview control and it works using the codes below when you click the image button. But, I want to remove the image button from the listview and I just want to click the IDLabel of the listview control to display and enlarge the image which is located in my "Images" root folder.As of now all
I've got is an enlarge blank image after clicking the row.Please help me modify my codes to display the image. Thanks...Here's my codes below for your reference.
Javascript:
Code:
<script src="scripts/jquery-1.4.3.min.js" type="text/javascript"></script>
<script type="text/javascript" >
var row;
var id,fname;
function Display(rowval)
{
row = $(rowval).parent().parent();
row.addClass("highlightRow");
var idLabel = rowval.id;
var fnameLabel = rowval.id.replace("IDLabel","FilenameLabel");
id = $('#' + idLabel).text();
fname = $('#' + fnameLabel).text();
var img = new Image();
var bcgDiv = document.getElementById("divBackground");
var imgDiv = document.getElementById("divImage");
var imgFull = document.getElementById("imgFull");
img.onload = function() {
img.src = "~/Images/" + fname;
imgFull.src = img.src;
imgFull.style.display = "block";
};
img.src= rowval;
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>
Used to display enlarge image:
Code:
<div id="divBackground" class="modal">
</div>
<div id="divImage">
<table style="height: 100%; width: 100%">
<tr>
<td valign="middle" align="center">
<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>
Asp.Net codes from the Listview item template:
Code:
<ItemTemplate>
<tr style="background-color:#DCDCDC;color: #000000;">
<td>
<asp:Label ID="IDLabel" runat="server" Text='<%# Eval("ID") %>' style = "cursor : pointer " onclick = "return Display(this);" />
</td>
<td>
<asp:Label ID="NameLabel" runat="server" Text='<%# Eval("Name") %>' />
</td>
<td>
<asp:Label ID="AddressLabel" runat="server" Text='<%# Eval("Address") %>' />
</td>
<td>
<asp:Label ID="GenderLabel" runat="server" Text='<%# Eval("Gender") %>' />
</td>
<td>
<asp:Label ID="AgeLabel" runat="server" Text='<%# Eval("Age") %>' />
</td>
<td>
<asp:Label ID="FilenameLabel" runat="server" Text='<%# Eval("Filename") %>' />
</td>
</tr>
</ItemTemplate>
Additional reference: If I used this asp.net codes <asp:Label ID="IDLabel" runat="server" Text='<%# Eval("ID") %>' style = "cursor : pointer " onclick = "return Display(this.src);" />
I will get this runtime error below
Microsoft JScript runtime error: 'id' is null or not an object.