Light up Your Website

If your website includes a photo gallery (almost every site does today)

displaying images of products, etc then the interface of your site should be

appealing enough and at the same time easy to browse.

Lightbox 2 is a JavaScrip application that can help you overlay images on

your site that looks elegant.  Once installed, Lightbox allows you to view a

larger version of images without leaving the webpage it's on.Once a user clicks

on the link or thumbnail of an image , it opens up into a Lightbox window that

resizes according to the displayed image. Besides resizing with animation, the

background of the browser is also blurred to highlight the image. If you have a

single or multiple sequence of images, users can easily navigate through those

images from their mouse or arrows on their keyboard.

Implementation



Let's implement Lightbox in an ASP based website. We would start by

downloading 'lightbox2.o4.zip' file  from  the link given in the Direct Hit box.

The zip file contains required  JavaScript and style sheet files needed for

displaying images. Second step is to create a blank ASP.NET website in Visual

Studio by clicking on 'File>New>Web Site' and selecting 'ASP.NET Web Site' from

template window (we named it 'WebSite2'). Now add three folders (CSS, images and

Javascript )in this site using solution explorer by right clicking and selecting

'New Folder'. Next step is to fill these folders by downloaded Javascript and

CSS files and putting the  images to be displayed in the 'images' folder. It's

time to add reference in 'Default.aspx' file. Here is the code snippet that adds

reference of Javascript  and CSS files and displays a single image in your

browser window:

<%@ Page Language="C#"

AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>



"http://www.w3.org/ TR/xhtml1/DTD/ xhtml1-transitional.dtd">

Single Image








width="60" height="60" alt="publive-image" title="publive-image" />

From the above code, Lightbox determines which images will

be shown in the modal window through the XHTML "rel" attribute, which is used on

an element wrapped around the element.   One interesting point to know
here is that the 'roadtrip' is used to group similar images and display them in
sequence. Below is the XHTML code to do same:

The output of ASP based website with Lightbox for elegantly displaying images and image sequence.

title="Calvin & Hobbes1">













title="Calvin & Hobbes2">













title="Calvin & Hobbes3">       height="60" alt="publive-image" title="publive-image" />


 

Here we are displaying the other set of images using

'roadtrip2' in 'rel' attribute. Besides image, it's caption is also displayed:

Add three folders (CSS, images and Javascript ) in this 'WebSite2' using solution explorer byselecting 'New Folder'.

 
title="Calvin & Hobbes1">




alt="publive-image" title="publive-image" />










title="Calvin & Hobbes2">













title="Calvin & Hobbes3">













title="Calvin & Hobbes4">













title="Calvin & Hobbes5">













rel="lightbox"



title="Calvin & Hobbes6">

Once you have made all the above mentioned changes, hit

'F5' and click on single or sequence of images to see Lightbox effect.