Introduction
ShowImages
is a simple user control built to facilitate the display of your images/photos stored on a web server.
Using the code
ShowImages
is a simple user control built to facilitate image display. To see how this user control really works, please visit my site.
ShowImages
shows thumbnails, generated by the page getThumbnail.aspx (included in the project), using a DataList
. Using ShowImages
properties, it is possible set up the Item
DataList
, and width and height of thumbnails.
Properties of ShowImages
are displayed in the following code:
public string FontName
{
set
{
fontName = value;
}
}
public string FontSize
{
set
{
fontSize = value;
}
}
public Boolean FontBold
{
set
{
fontBold = value;
}
}
public int ThumbsHeight
{
set
{
thumbnailHeight = value;
}
}
public int ThumbsWidth
{
set
{
thumbnailWidth = value;
}
}
public int Columns
{
set
{
columns = value;
}
}
public string DefaultDir
{
set
{
imagespath = value;
}
}
public string SearchPattern
{
set
{
string [] split = null;
split = value.Split(';');
foreach (string s in split)
{
searchPatternList.Add(s);
}
}
}
ShowImages
uses the DefaultDir
property to start to navigate inside your image directories. It shows images filtered by the SearchPattern
property; if sub-directories are present, ShowImages
shows folder entries so you can navigate them.
The following function fills the DataList
with images' data.
private void BuildImagesList()
{
DataTable myDataTable = new DataTable();
DataColumn myColumn;
DataRow myRow;
myColumn = new DataColumn();
myColumn.DataType = System.Type.GetType("System.String");
myColumn.ColumnName = "filename";
myDataTable.Columns.Add(myColumn);
myColumn = new DataColumn();
myColumn.DataType = Type.GetType("System.Int32");
myColumn.ColumnName = "type";
myDataTable.Columns.Add(myColumn);
physicalpath = Server.MapPath(imagespath);
string[] dirList;
try
{
dirList = Directory.GetDirectories(physicalpath);
if (! isMainDir)
{
myRow = myDataTable.NewRow();
myRow["filename"] = getParentDirName(imagespath);
myRow["type"] = 0;
myDataTable.Rows.Add(myRow);
}
foreach (string s in Directory.GetDirectories(physicalpath))
{
myRow = myDataTable.NewRow();
myRow["filename"] = addFolderToString(imagespath,
Path.GetFileName(s));
myRow["type"] = 1;
myDataTable.Rows.Add(myRow);
}
for (int i=0; i < searchPatternList.Count; i++)
{
foreach (string s in Directory.GetFiles(physicalpath,
searchPatternList[i].ToString()))
{
myRow = myDataTable.NewRow();
myRow["filename"] = addFolderToString(imagespath,
Path.GetFileName(s));
myRow["type"] = 2;
myDataTable.Rows.Add(myRow);
}
}
DataView sortedView = new DataView(myDataTable);
sortedView.Sort = "type, filename asc";
dlImages.RepeatColumns = columns;
dlImages.DataSource = sortedView;
dlImages.DataBind();
sortedView = null;
myDataTable = null;
}
catch (Exception ex)
{}
finally
{}
}
User control DataList
has the following item template:
...
<ItemTemplate>
<br>
<a
href="" runat= "server" id= "imgLink"><img runat="server" border="0"
id="imgThumbnail" align="middle">
</a>
<br>
<asp:Label Runat="server" ID="imgName" Font-Bold="True" ></asp:Label>
</ItemTemplate>
...
Which is filled with correct data using the ItemDataBound
event:
private void dlImages_ItemDataBound(Object sender,
System.Web.UI.WebControls.DataListItemEventArgs e)
{
System.Web.UI.HtmlControls.HtmlImage img = null;
System.Web.UI.HtmlControls.HtmlAnchor imgLink = null;
System.Web.UI.WebControls.Label imgName = null;
if ( (e.Item.ItemType == ListItemType.Item) ||
(e.Item.ItemType == ListItemType.AlternatingItem) )
{
img = (System.Web.UI.HtmlControls.HtmlImage)
(e.Item.FindControl("imgThumbnail"));
imgLink = (System.Web.UI.HtmlControls.HtmlAnchor)
(e.Item.FindControl("imgLink"));
imgName = (System.Web.UI.WebControls.Label)
(e.Item.FindControl("imgName"));
imgName.Font.Bold = fontBold;
if ( fontName.Length > 0)
{
imgName.Font.Names = fontName.Split(',');
}
if (fontSize.Length > 0)
{
FontUnit fu = new FontUnit(fontSize);
imgName.Font.Size = fu;
}
if ((((System.Data.DataRowView)
(e.Item.DataItem))[1]).ToString() == "0")
{
imgLink.HRef = Request.Url.AbsolutePath + "?path=" +
(((System.Data.DataRowView)(e.Item.DataItem))[0]).ToString();
img.Src = "cartella.bmp";
imgName.Width = thumbnailWidth;
imgName.Text = "..";
img.Alt = "Come back to parent folder";
}
else if ((((System.Data.DataRowView)
(e.Item.DataItem))[1]).ToString() == "1")
{
imgLink.HRef = Request.Url.AbsolutePath + "?path=" +
(((System.Data.DataRowView)(e.Item.DataItem))[0]).ToString();
img.Src = "cartella.bmp";
imgName.Text = getFileName((((System.Data.DataRowView)
(e.Item.DataItem))[0]).ToString());
img.Alt = "Click to explore dir\n" + imgName.Text;
}
else
{
imgLink.HRef =
(((System.Data.DataRowView)(e.Item.DataItem))[0]).ToString();
imgLink.Target = "_balnk";
img.Src = "getThumbnail.aspx?img=" +
(((System.Data.DataRowView)(e.Item.DataItem))[0]).ToString() +
((thumbnailHeight>0)?"&height="+
thumbnailHeight.ToString():"") +
((thumbnailWidth>0)?"&width="+
thumbnailWidth.ToString():"");
imgName.Text = getFileName((((System.Data.DataRowView)
(e.Item.DataItem))[0]).ToString());
img.Alt = "Click to zoom\n" + imgName.Text;
}
}
}
Using the user control is very easy. You have to insert a Register
directive, and a code like the following, in your aspx page.
...
<uc1:ShowImages id="ShowImages1" runat="server"
ThumbsHeight="100" ThumbsWidth="170" FontBold="false"
FontSize="xx-small" FontName="verdana"
SearchPattern="*.jpg;*.gif" DefaultDir="/webimages">
</uc1:showimages>
...
Note
Source code includes a Visual Studio Solution named "webalbum". Unzip it in your hard disk and create a web site, on port 8081, pointing to webalbum directory. That's all.
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.