<script type="text/javascript" src="../Scripts/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="../Scripts/slimbox2.js"></script>
<link rel="stylesheet" href="../Styles/slimbox2.css" type="text/css" media="screen" />
It is rather straightforward to display images by using Slimbox 2 and static html. The images to be displayed take the following format:
<a href="../images/imageLarge.jpg"
rel="lightbox-group" title="Photo 38">
<img src="../images/imageThumb.jpg" style="border-width:4px; border-color:#666666;" />
</a>
<img src="../images/imageThumb.jpg" style="border-width:4px; border-color:#666666;" />
</a>
However, when the list of images comes from a data source, the above
html has to be generated dynamically for
each image. One approach would be to place
an html table in the .aspx page and place an <asp:Literal> control which will
hold the <tr></tr> and <td></td> tags needed to hold
the rows and cells for images:
<table border="0" cellpadding="2"
cellspacing="2" style="width:auto">
<asp:Literal ID="litThumbnails"
runat="server"></asp:Literal>
</table>
The literal control is populated by the method in
page's code-behind, which can be called in the Page_Load event handler:
protected void Page_Load(object sender, EventArgs e)
{
if
(!Page.IsPostBack)
{
GenerateThumbnailHtml();
}
}
private void GenerateThumbnailHtml()
{
StringBuilder strBld = new StringBuilder();
//We need to generate html similar to the code below for each image:
//<td
align="left" valign="bottom">
// <a href="Images/38.jpg"
rel="lightbox-group" title="Photo 38">
// <img
src="Images/38_th.jpg"
// style="border-width:4px;
border-color:#666666;" />
// </a>
//</td>
//Get the image urls from DB:
MyImageList imageList = DataAccessLayer. ImageDB.GetList ();
if (imageList
!= null)
{
if (imageList.Count > 1)
{
int intNumOfImages = imageList.Count;
const int intNumOfDesiredImagesPerRow =
8;
int intCountOfImagesInCurrentRow = 0;
strBld.Append("<tr>");
for (int ct = 1; ct <=
intNumOfImages; ct++)
{
//MyImage is a custom object with properties:
//mi.SmallImageFile:
//Thumbnail image’s relative path e.g.: ../images/myThumb.jpg
//mi.LargeImageFile:
//Large image’s relative path e.g.: ../images/myThumb.jpg
// mi.Description: Image’s description
MyImage mi = imageList[ct - 1];
strBld.Append(String.Format(@"<td
align=""left""
valign=""bottom"">
<a href=""{0}""
rel=""lightbox-group""
title=""{1}"">
<img src=""{2}""
style=""border-width:4px; border-color:#778899;""
/>
</a></td>", mi.LargeImageFile, mi.Description, mi.SmallImageFile));
intCountOfImagesInCurrentRow++;
//8 Images per row:
if (ct < intNumOfImages)
{
if (ct % intNumOfDesiredImagesPerRow == 0)
{
strBld.Append("</tr><tr>");
intCountOfImagesInCurrentRow = 0;
}
}
else if (ct == intNumOfImages)
{
if (ct % intNumOfDesiredImagesPerRow == 0)
{
strBld.Append("</tr>");
}
else
{
strBld.Append(String.Format("<td colspan=\"{0}\">",
intNumOfDesiredImagesPerRow - intCountOfImagesInCurrentRow));
strBld.Append("</td></tr>");
}
}
}
if
(strBld.Length == 4) // Contains only <tr> so far
{
this.litThumbnails.Text = "";
}
else
{
this.litThumbnails.Text = strBld.ToString();
}
this.litThumbnails.Visible = true;
}
else
{
this.litThumbnails.Visible = false;
}
}
else
{
this.litThumbnails.Visible =
false;
}
}
The list of images is retrieved from Db and the <tr>
and <td> tags are generated dynamically for each image in the list. When
the list is completed, the contents of the StringBuilder object containing the
generated html is assigned to the .Text property of the Literal control.
this.litThumbnails.Text = strBld.ToString();
See the results below:
See the results below:
No comments:
Post a Comment