Using Lightbox in an ASP.NET Application in VB.NET

Lightbox 2 is a free download made available by Lokesh Dhakar on this website:

http://www.huddletogether.com/projects/lightbox2/

The site describes Lightbox as, "... a simple, unobtrusive script used to overlay images on the current page." It delivers a nice, professional looking method for displaying images as overlays through the use of hyperlinks. Implementation of Lightbox is quite simple involving nothing more that adding some JavaScript and a style sheet to the page and then adding some simple attributes to each link where the effect is to be used. The download includes all of the images, style sheets, and JavaScript necessary to implement Lightbox.

Lightbox allows the developer the option of displaying images singly or in sequence. Images grouped into sequences may be viewed by the user in a slideshow like presentation that the user can control with either the mouse or the left and right arrow keys. All in all, it is a nice way to present a image gallery of thumbnails. As each image is displayed, the control is resized to fit the image and the image is centered on the page. If the image is too large, it will overrun the page so it is important to resize the images so that they will fit within the space available. Once the image is displayed, the user may click off the image or hit the Escape key in order to return to the page.

Figure 1: Lightbox in Use within an ASP.NET Web Application

Figure 2: Lightbox at Rest within an ASP.NET Web Application

(Clicking a link or an image will launch the image into Lightbox)

In order to get started, unzip the included project and save it to your hard drive. Open the web application and examine the contents in the solution explorer.

Figure 3: Solution Explorer

The solution contains a single web application entitled, "LightBoxDemoVB". The solution contains three added folders: css, images, and js. These folders contain the style sheet, images, and JavaScript provided with the Lightbox download. Additional images were added to the images folder to support the demonstration project. If starting a new project, just create the three folders using these folder names and then copy the contents over into each of the folders from the Lightbox 2 download.

No additional code was provided to the default page's code behind file. It is in its default condition and is shown here to illustrate that no coding is required to make use of Lightbox 2.

Code: Default.aspx

What little work is required to implement Lightbox 2 is contained in the Default.aspx file itself.

The markup starts with the following unmodified, default code:

Next up, within the form, the first example shows using a simple link to an image; the "rel" tag defines the relationship to the Lightbox style sheet and that is pretty much all that you need to do to evoke the effect.