Introduction
I am currently developing a website for a client and it required the LightBox control which would pull the information from the Microsoft SQL DB. This was challenging at first seeing the Lightbox control comes pretty standard and requires an embedded href tag to be enabled. I figured out a way around this limitation, I hope this article will be helpful.
What is LightBox
Lightbox is a JavaScript application used to display large images using modal dialogs.
How LightBox Works
On a Lightbox-enabled page, a user can click an image to have it magnified in a Lightbox window, which resizes itself according to the size of the image using a gliding animation. Lightbox determines which images will be shown in the modal window through the XHTML "rel" attribute, which is used on an <a> element wrapped around the <img> element. Lightbox also provides a way to attach captions to images and to run a slide show, which can be navigated using the arrow keys.
LightBox Functionality
Lightbox permits users to view larger versions of images without having to leave the current page, and is also able to display simple slideshows. The use of the dark background, which dims the page over which the image has been overlaid, also serves to highlight the image being viewed. While Lightbox is dependent upon a browser's compatibility with Prototype to function, Lightbox is triggered through a standard link tag. Thus browsers that do not support JavaScript simply load the image as a separate file, losing the Lightbox effect but still retaining the ability to display the full-sized image.
I won't go in detail with the LightBox script as this comes pretty standard. You can download the script and see if you can make any improvements.
DataBinding in Repeater Control
The Repeater control is used to display a repeated list of items that are bound to the control. Like any other Data Bound control, Repeater control supports DataSource property which allows you to bind any valid DataSource like sqlDataSource, XML file or any datasets which implement ICollection, IEnumerable or IListSource Interfaces. Once the DataBind method of the Repeater control is called, ASP.NET will loop through the DataReader (i.e. this was set through the DataSourceMode= "DataReader") and populate the Repeater with the data we specify. The Databinder.Eval method uses reflection to parse and evaluate a data-binding expression against an object at run time, in this case the object is our Repeater. So this line of code:
<a id="LightBox_Content" href="<%#DataBinder.Eval(Container.DataItem, "href")%>"
rel="<%#DataBinder.Eval(Container.DataItem, "rel")%>"
title="<%#DataBinder.Eval(Container.DataItem, "title")%>"></a>
will render the contents of the "href","rel" and "title" values retrieved from the SQL DB for each row in the DataReader.
The SqlDataSource
<asp:SqlDataSource ID="SqlDataLightBox" runat="server"
ConnectionString="<%$ ConnectionStrings:YourConnectionString %>"
SelectCommand="SELECT * FROM [LightBox]"
DataSourceMode="DataReader">
</asp:SqlDataSource>
The SqlDataSource control retrieves data whenever the Select method is called. This method provides programmatic access to the method that is specified by the SelectMethod property. The Select method is automatically called by controls that are bound to the SqlDataSource when their DataBind method is called. If you set the DataSourceID property of a data-bound control, the control automatically binds to data from the data source, as required. Setting the DataSourceID property is the recommended method for binding an ObjectDataSource control to a data-bound control. Alternatively, you can use the DataSource property, but then you must explicitly call the DataBind method of the data-bound control.
Using the Code
Simply download the attached LightBox Extended.zip file, open in Visual Studio, then Run the project. Another way to run this application is to load the unzipped version to the wwwroot folder normally located in C:\Inetpub\wwwroot, then create a Virtual Directory in IIS. Once this is done, simply go on the Default.aspx page and browse.
Here is How I Did It
Step 1
Create an SQL DB with the various attributes of the anchor tag.
E.g. href varchar(250), rel varchar(250), title varchar(250). Populate these with the same values you would have embedded in your page.
Step 2
In the Default.aspx page, create an SqlDataSource that connects to the DB. E.g.
<asp:sqldatasource selectcommand="SELECT * FROM [LightBox]"
connectionstring="<%$ ConnectionStrings:YOURConnectionString %>"
runat="server" id="SqlDataLightBox">
N.B. LightBox is the name of my database. You must have an appropriate connection string in the Web.config file in the ConnectionStrings property.
The magic actually happens at the Repeater Control.
Explanation: The tags are evaluated and bound to the columns retrieved from the SQL DB. The repeater control renders in HTML all of the literal values in the page when it loads. So there you go, you have successfully retrieved data from the DB and loaded to LightBox. You can embed one light box image, just as a hyperlink, ensure it has the same rel attribute as in your DB so it will group the images.
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Light Box Extended</title>
<link rel="stylesheet" href="LightBox/css/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="LightBox/js/prototype.js"></script>
<script type="text/javascript" src="LightBox/js/scriptaculous.js?load=effects,builder">
</script>
<script type="text/javascript" src="LightBox/js/lightbox.js"></script>
<style type="text/css">
#pic
{
width:200px;
height:200px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<div>
<a id="LightBoxImage" href="Images/Bear.jpg"
rel="lightbox[Photo]" title="my caption">
<img id="pic" src="Images/Bear.jpg" alt="No Pic Available!" />
</a>
</div>
<asp:Repeater ID="RepeaterLightBox" runat="server" DataSourceID="SqlDataLightBox">
<HeaderTemplate>
<table border="0" cellpadding="5" cellspacing="1">
</HeaderTemplate>
<ItemTemplate>
<tr>
<td>
<a id="LightBox_Content" href="<%#DataBinder.Eval(Container.DataItem,
"href")%>" rel="<%#DataBinder.Eval
(Container.DataItem, "rel")%>"
title="<%#DataBinder.Eval(Container.DataItem, "title")%>"></a>
</td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
</div>
<div>
<asp:SqlDataSource ID="SqlDataLightBox" runat="server"
ConnectionString="<%$ ConnectionStrings:YourConnectionString %>"
SelectCommand="SELECT * FROM [LightBox]">
</asp:SqlDataSource>
</div>
</form>
</body>
</html>
Points of Interest
Repeater controls repeat the literal values in HTML, it's a best practice to View Page Source as often as you possibly can to get some great ideas.
History
- 22nd February, 2010: Initial post
