I am showing thumbnail images in dataList on a page of my website. When i click on any image they open in big size. How i will share(Facebook). that particular big size image. My code is given below:
<script type="text/javascript">
var CurrentPage = 1;
function GetImageIndex(obj) {
while (obj.parentNode.tagName != "TD")
obj = obj.parentNode;
var td = obj.parentNode;
var tr = td.parentNode;
if (td.rowIndex % 3 == 0) {
return td.cellIndex + tr.rowIndex;
}
else {
return td.cellIndex + (tr.rowIndex * 3);
}
}
//
function LoadTextDiv(url, lnk) {
debugger;
var img = new Image();
var bcgDiv = document.getElementById("divBackground");
var imgDiv = document.getElementById("divImage");
var imgFull = document.getElementById("imgFull");
var imgLoader = document.getElementById("imgLoader");
var dl = document.getElementById("<%=dList.ClientID%>");
var imgs = dl.getElementsByTagName("img");
CurrentPage = GetImageIndex(lnk.parentNode) + 1;
imgLoader.style.display = "block";
img.onload = function () {
imgFull.src = img.src;
document.getElementById("hdnId").value = imgFull.src;
imgFull.style.display = "block";
imgLoader.style.display = "none";
};
img.src = url;
Prepare_Pager(imgs.length);
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";
//
ProductGallery.getProductName(img.src, retC);
return true;
function retC(response) {
document.getElementById("lblPdtName").innerHTML = response.value;
document.getElementById("hdnPdtName").innerHTML = response.value;
}
return false;
}
//
function LoadDiv(url, lnk) {
debugger;
var img = new Image();
var bcgDiv = document.getElementById("divBackground");
var imgDiv = document.getElementById("divImage");
var imgFull = document.getElementById("imgFull");
var imgLoader = document.getElementById("imgLoader");
var dl = document.getElementById("<%=dList.ClientID%>");
var imgs = dl.getElementsByTagName("img");
CurrentPage = GetImageIndex(lnk.parentNode) + 1;
imgLoader.style.display = "block";
img.onload = function () {
imgFull.src = img.src;
document.getElementById("hdnId").value = imgFull.src;
imgFull.style.display = "block";
imgLoader.style.display = "none";
};
img.src = url;
Prepare_Pager(imgs.length);
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";
//
ProductGallery.getProductName(img.src, retC);
return true;
function retC(response) {
document.getElementById("lblPdtName").innerHTML = response.value;
document.getElementById("hdnPdtName").innerHTML = response.value;
}
return false;
}
function HideDiv() {
var bcgDiv = document.getElementById("divBackground");
var imgDiv = document.getElementById("divImage");
var imgFull = document.getElementById("imgFull");
bcgDiv.style.display = "none";
imgDiv.style.display = "none";
imgFull.style.display = "none";
}
function doPaging(lnk) {
// debugger;
var dl = document.getElementById("<%=dList.ClientID%>");
var imgs = dl.getElementsByTagName("img");
var imgLoader = document.getElementById("imgLoader");
var imgFull = document.getElementById("imgFull");
var pdtName = document.getElementById("lblPdtName");
var img = new Image();
if (lnk.id == "Next") {
if (CurrentPage < imgs.length) {
CurrentPage++;
imgLoader.style.display = "block";
imgFull.style.display = "none";
img.onload = function () {
imgFull.src = imgs[CurrentPage - 1].src;
imgFull.style.display = "block";
imgLoader.style.display = "none";
document.getElementById("hdnId").value = imgFull.src;
ProductGallery.getProductName(imgFull.src, retB);
return true;
};
function retB(response) {
document.getElementById("lblPdtName").innerHTML = response.value;
document.getElementById("hdnPdtName").innerHTML = response.value;
}
}
}
else {
if (CurrentPage > 1) {
CurrentPage--;
imgLoader.style.display = "block";
imgLoader.style.display = "none";
img.onload = function () {
imgFull.src = imgs[CurrentPage - 1].src;
imgFull.style.display = "block";
imgLoader.style.display = "none";
document.getElementById("hdnId").value = imgFull.src;
ProductGallery.getProductName(imgFull.src, retA);
return true;
};
function retA(response) {
document.getElementById("lblPdtName").innerHTML = response.value;
document.getElementById("hdnPdtName").innerHTML = response.value;
}
}
}
Prepare_Pager(imgs.length);
img.src = imgs[CurrentPage - 1].src;
}
function Prepare_Pager(imgCount) {
var Previous = document.getElementById("Previous");
var Next = document.getElementById("Next");
var lblPrevious = document.getElementById("lblPrevious");
var lblNext = document.getElementById("lblNext");
if (CurrentPage < imgCount) {
lblNext.style.display = "none";
Next.style.display = "block";
}
else {
lblNext.style.display = "block";
Next.style.display = "none";
}
if (CurrentPage > 1) {
Previous.style.display = "block";
lblPrevious.style.display = "none";
}
else {
Previous.style.display = "none";
lblPrevious.style.display = "block";
}
}
</script>
<style type = "text/css">
.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: 630px;
padding: 3px;
border: solid 1px black;
}
.dlTable
{
width:144px;
text-align:left;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="main"><!-- Main starts here -->
<div><Overlay:OverlayWindow ID="overlay" runat ="server" /></div>
<div><FHeader:Header ID="Fheader1" runat="server" /></div>
<div><!----Start body Container---->
<div id="BodyHolder"><!--Start of Body holder-->
<!----------------------------Body code start Here---------------------------------------->
<div id="pagePath"><a href="Homepage"> Home</a> -> Product Gallery</div><!--page path-->
<div id="titlecont_photogallery"><!--open title cont -->
<div id="pagetitle">Product Gallery</div>
<div id="smallicons"><!--Open small icons -->
<%-- <a href="#"><img src="images/fav_ico.gif" alt="My favorites" width="21" height="19" title="My favorites" /></a>
<a id="friendemail" href="#"><img src="images/sentto_ico.gif" alt="Send to Friend" width="21" height="19" title="Send to Friend" /></a> --%>
<MyFavourate:MyFav ID="Favourate" runat="server" />
</div><!--Close small icons -->
</div><!--Close title cont -->
<div id="blocksContainer_photogallery"><!-- Open Blocks Container -->
<div id="column">
<asp:DataList ID="dList" runat="server" RepeatColumns="3" RepeatDirection="Horizontal" RepeatLayout="Table" DataKeyField="PId"
>
<ItemTemplate>
<div id="block">-
<table class="dlTable">
<tr>
<td width="277" align="left">
<img id="Image1" src="images/Product/Gallery/<%#Eval("Image")%>" onclick ="javascript:LoadDiv(this.src, this); return false;" height="210px" width="277px" alt='<%#Eval("Sona")%>' style ="cursor:pointer"></img>
<div id="blacktxt" class="IEblacktxt" >
<a href='images/Product/Gallery/<%#Eval("Image")%>' onclick="javascript:LoadTextDiv(this.href, this); return false;"><asp:Label ID="lblCatName" runat="server" Text='<%#Eval("Sona")%>'></asp:Label>
</div>
</td>
</tr>
</table>
<%--div>--%>
</ItemTemplate>
</asp:DataList>
<%--</td></tr></table>--%>
</div>
<table border="0" align="left" id="counter" runat="server" cellpadding="0" cellspacing="0" style="margin-left:35px; width:865px">
<tr>
<td><br/><br /></td>
</tr>
<tr>
<td><hr/></td>
</tr>
<tr>
<td>
<table width="0%" border="0" align="right" cellpadding="0" cellspacing="0" >
<tr>
<td><asp:Label ID="lblPageInfo" runat="server"></asp:Label></td>
<td width="20px"></td>
<td><asp:LinkButton ID="lbtnFirst" Text="lblFirst" runat="server" CausesValidation="false" OnClick="lbtnFirst_Click" ToolTip="First Page"><img src="images/first.jpg" width="13" height="13" alt="First Page" /></asp:LinkButton></td>
<td> <asp:LinkButton ID="lbtnPrevious" runat="server" CausesValidation="false" OnClick="lbtnPrevious_Click" ToolTip="Previous Page"><img src="images/previous.jpg" width="13" height="13" alt="Previous Page"/></asp:LinkButton> </td>
<td><asp:LinkButton ID="lbtnNext" runat="server" CausesValidation="false" OnClick="lbtnNext_Click" ToolTip="Next Page"><img src="images/next.jpg" width="13" height="13" alt="Next Page" /></asp:LinkButton></td>
<td><asp:LinkButton ID="lbtnLast" runat="server" CausesValidation="false" OnClick="lbtnLast_Click" ToolTip="Last Page"><img src="images/last_page.jpg" width="13" height="13" alt="Last Page" /></asp:LinkButton></td>
</tr>
</table>
</td>
</tr>
<tr><td><br /><br /><br /><br /></td></tr>
</table>
</div><!--Close block-->
</div><!--Close Blocks Container -->
<!----------------------------Body Code End Here---------------------------------------->
<div id="divBackground" class="modal">
</div>
<div id="divImage" >
<table style="height: 100%; width: 100%">
<tr>
<td valign="middle" align="center" colspan ="4" style ="height:468px;">
<img id="imgLoader" runat="server" alt=""
src="images/loader.gif" />
<img id="imgFull" alt="" src="" runat="server"
style="display: none;
height: 468px;width: 617px" />
</td>
</tr>
<tr><td colspan="3" align="center"><asp:Label ID="lblPdtName" runat="server" Text=""></asp:Label></td></tr>
<tr>
<td align = "left" style="padding:10px;width:100px" valign="middle" >
<a id = "Previous" href ="javascript:" onclick ="javascript:doPaging(this); return false;"><img src="images/Arrows-Left-round-icon.png" width="20" height="20" alt="Previous" title="Previous"/></a>
<span id = "lblPrevious" style ="display:none"><img src="images/Arrows-Left-round-icon.png" width="20" height="20" alt="Previous" title="Previous"/></span>
</td>
<td align ="left" valign="middle" style="padding:10px;width:217px" ><asp:HiddenField runat="server" ID="hdnId" /><asp:HiddenField runat="server" ID="hdnPdtName" />
<asp:ImageButton ID="imgDownLoad" runat="server" ToolTip="Download" ImageUrl="images/download.jpg" onclick="Download_Click" AlternateText="Download" />
</td>
<td align="right" valign="middle" style ="padding:10px;width:200px">
<a href="#"> <img id="btnClose" onclick="HideDiv()" src="images/close-round-icon.png" alt="Close" title="Close" width="20" height="20"/></a>
</td>
<td align = "right" valign="middle" style ="padding:10px;width:100px">
<a id = "Next" href ="javascript:" onclick ="javascript:doPaging(this); return false;" style="text-decoration:none; font-size:10px" ><img src="images/Arrows-right-round-icon.png" width="20" height="20" alt="Next" title="Next" /></a>
<span id = "lblNext" style ="display:none"><img src="images/Arrows-right-round-icon.png" width="20" height="20" alt="Next" title="Next" /></span>
</td>
</tr>
</table>
</div>
</div><!--End of Body holder -->
<%--</div><!--close body Container --> --%>
<div><FFooter:Footer ID="Footer1" runat="server" /></div>
</div>
</form>
</body>
</html>
