In the first part I explained how to use ASP.Net DataList control to build an Image or Picture Gallery. I also explained how to implement pagination at stored procedure level in the ASP.Net DataList control.
Now I’ll explain how to convert the basic Image Gallery to an advanced one with Preview and Slide Show facility where you can page the image preview too. Now let’s have a look how it’s done.
DataList
Below is the DataList being used to create the Image or Picture Gallery, it is the same used in the previous article the only difference is I am calling LoadDiv JavaScript function onclick event of the ASP.Net Image Control which will open up the Modal PopUp to display the larger or Zoomed Image.
<asp:DataList ID="DataList1" runat="server" RepeatColumns = "2" RepeatLayout = "Table" Width = "500px">
<ItemTemplate>
<br />
<table cellpadding = "5px" cellspacing = "0" class="dlTable">
<tr>
<td>
<asp:Image ID="Image1" runat="server" ImageUrl = '<%# Eval("FilePath")%>'
Width = "200px" Height = "200px" onclick = "LoadDiv(this.src, this)" style ="cursor:pointer" />
</td>
</tr>
</table>
<br />
</ItemTemplate>
</asp:DataList>
CSS for Modal Background
You’ll need to do is to place this CSS in the head section of your page or Master Page. The CSS will be used by the PopUp to open up with a Modal background and thus blocking the screen until it is closed.
<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: 610px;
padding: 3px;
border: solid 1px black;
}
.dlTable
{
border:double 1px #D9D9D9;
width:200px;
text-align:left;
}
</style>
PopUp to Preview the Image
First thing I’ll do is add a DIV which will act as a PopUp to Preview the images
<div id="divImage" >
<table style="height: 100%; width: 100%">
<tr>
<td valign="middle" align="center" colspan = "3" style ="height:500px;">
<img id="imgLoader" runat="server" alt=""
src="images/loader.gif" />
<img id="imgFull" alt="" src=""
style="display: none;
height: 500px;width: 600px" />
</td>
</tr>
<tr>
<td align = "left" style="padding:10px;width:200px">
<a id = "Previous" href = "javascript:" onclick = "doPaging(this)" style ="display:none">Previous</a>
<span id = "lblPrevious">Previous</span>
</td>
<td align="center" valign="middle" style ="width:200px">
<input id="btnClose" type="button" value="close"
onclick="HideDiv()"/>
</td>
<td align = "right" style ="padding:10px;width:200px">
<a id = "Next" href = "javascript:" onclick = "doPaging(this)">Next</a>
<span id = "lblNext" style ="display:none">Next</span>
</td>
</tr>
</table>
</div><div id="divBackground" class="modal">
</div>
As you’ll notice I have added two hyperlinks which will do the second level paging using JavaScript and a button to close the PopUp. The other div divBackground is used to block the screen
Opening the Modal PopUp
To display our Modal PopUp I am calling the LoadDiv JavaScript function given below. The main Job of the function is to display the Modal PopUp, Block the screen and Load the Image.
function LoadDiv(url, lnk)
{
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("<%=DataList1.ClientID%>");
var imgs = dl.getElementsByTagName("img");
CurrentPage = GetImageIndex(lnk.parentNode) + 1;
imgLoader.style.display = "block";
img.onload = function() {
imgFull.src = img.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";
return false;
}
Closing the Modal PopUp
If a PopUp is opened you’ll also need to close it The HideDiv JavaScript function does it for you. It is being called up when you click close button on the PopUp.
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";
}
Second Level JavaScript Paging in the PopUp
Basically I tried to create an Image Previewer just like in our Windows which allows us to page through the Images in a particular folder without returning to the folder. Same way here when you open the PopUp once there is no need for you to close it, you can simply use the secondary pager to page and view all the images present on that page of the DataList. And what make it possible are the functions below
This function allows getting the reference of the Image Control within the DataList control.
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%2==0)
{
return td.cellIndex+tr.rowIndex;
}
else
{
return td.cellIndex+(tr.rowIndex*2);
}
}
As the name suggest the function below prepares the Secondary JavaScript pager for pagination. Basically it enables or disables the Previous or Next Hyperlinks based on the count of Images
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";
}
}
And this is the function that actually does the Paging when the Previous or Next Hypelinks are clicked.
function doPaging(lnk)
{
var dl = document.getElementById("<%=DataList1.ClientID%>");
var imgs = dl.getElementsByTagName("img");
var imgLoader= document.getElementById("imgLoader");
var imgFull = document.getElementById("imgFull");
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";
};
}
}
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";
};
}
}
Prepare_Pager(imgs.length);
img.src= imgs[CurrentPage-1].src;
}
All these JavaScript functions together help to create what looks as below.
Click to View the larger Image
Try the LIVE Demo here
With this the second and the final part of the Image or Picture Gallery in ASP.Net using DataList comes to an end. Hope you liked it. You can download the related source code in VB.Net and C# using the link below.
Image Gallery using DataList.zip (13.82 kb)