Click here to Skip to main content
15,867,453 members
Articles / Web Development / XHTML

LightBox Connected to Microsoft SQL DB

Rate me:
Please Sign up or sign in to vote.
4.00/5 (3 votes)
22 Feb 2010CPOL4 min read 40.8K   1K   23   14
The lightbox control reads data from your backend SQL Server

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:

ASP.NET
<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.NET
<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.NET
<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.

ASP.NET
<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

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer OAC Enterprise Solutions
Jamaica Jamaica
I've been programming in ASP.Net/C#.Net since early 2009 and I am loving it. I have started my own Software Development Business that provide solutions for small/medium companies.

My new found interest is XAML.

'...We have the power to shrink our dreams to fit reality or the power to stretch our reality to fit our dreams..'

Comments and Discussions

 
QuestionPicture size coming to be big Pin
Inderjeet Kaur29-Aug-12 6:35
Inderjeet Kaur29-Aug-12 6:35 
AnswerRe: Picture size coming to be big Pin
Orane Cole29-Aug-12 6:55
Orane Cole29-Aug-12 6:55 
QuestionGroup Image Pin
lenartie7-Jun-12 7:44
lenartie7-Jun-12 7:44 
QuestionHello guys Pin
Member 817759821-Aug-11 17:43
Member 817759821-Aug-11 17:43 
AnswerRe: Hello guys Pin
Orane Cole24-Aug-11 10:42
Orane Cole24-Aug-11 10:42 
Generaldoes not work in IE 8 Pin
harikamat12-Jan-11 0:43
harikamat12-Jan-11 0:43 
GeneralImage stored in SQL DB Pin
Paul Lockett20-Sep-10 6:30
Paul Lockett20-Sep-10 6:30 
Generalrepeater not showing image Pin
nskumar_3628-May-10 16:27
nskumar_3628-May-10 16:27 
AnswerRe: repeater not showing image Pin
Orane Cole29-May-10 3:36
Orane Cole29-May-10 3:36 
GeneralPlease help! My Repeater could not show the image Pin
phamtasmic2-Mar-10 7:06
phamtasmic2-Mar-10 7:06 
GeneralRe: Please help! My Repeater could not show the image Pin
Orane Cole2-Mar-10 15:08
Orane Cole2-Mar-10 15:08 
GeneralRe: Please help! My Repeater could not show the image Pin
phamtasmic2-Mar-10 15:46
phamtasmic2-Mar-10 15:46 
GeneralRe: Please help! My Repeater could not show the image Pin
Orane Cole3-Mar-10 2:54
Orane Cole3-Mar-10 2:54 
AnswerRe: Please help! My Repeater could not show the image Pin
Orane Cole4-Mar-10 6:03
Orane Cole4-Mar-10 6:03 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.