by February 1, 2010 0 comments

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.

Direct Hit!

Applies To: Web Developers
USP: Use standard Javascript files for better visual
Link: Engine Keywords: Lightbox2

Let’s implement Lightbox in an ASP based website. We would start by
downloading ‘’ 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" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
" TR/xhtml1/DTD/ xhtml1-transitional.dtd">
<html xmlns="">
<head id="Head1" runat="server">
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<title>Lightbox Demo</title>
<body bgcolor="Black">
<form id="form1" runat="server" style="background-color: #000000; color:White">
<div>Single Image<br/><br/><br/>
<a href="/2010/images/image-1.jpg" rel="lightbox" title="Plant Life"><img src="/2010/images/image-1.jpg"
width="60" height="60" alt="" /></a>
<br /><br />

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 <a> element wrapped around the <img> 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.

Calvin & Hobbes Part-1<br /><br />
<a href="/2010/images/ch900101.gif" rel="lightbox[roadtrip1]"
title="Calvin & Hobbes1">
<img src="/2010/images/ch900101.gif" width="60" height="60" alt="" />
<a href="/2010/images/ch900102.gif" rel="lightbox[roadtrip1]"
title="Calvin & Hobbes2">
<img src="/2010/images/ch900102.gif" width="60" height="60" alt="" />
<a href="/2010/images/ch900103.gif" rel="lightbox[roadtrip1]"
title="Calvin & Hobbes3">       <img src="/2010/images/ch900103.gif" width="60"
height="60" alt="" /></a>
<br />
<br />
<br />
<br />

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’.

Calvin & Hobbes Part-2<br /><br />
 <a href="/2010/images/1.gif" rel="lightbox[roadtrip2]"
title="Calvin & Hobbes1">
<img src="/2010/images/1.gif" width="60" height="60"
alt="" />
<a href="/2010/images/2.gif" rel="lightbox[roadtrip2]"
title="Calvin & Hobbes2">
<img src="/2010/images/2.gif" width="60" height="60" alt="" />
<a href="/2010/images/3.gif" rel="lightbox[roadtrip2]"
title="Calvin & Hobbes3">
<img src="/2010/images/3.gif" width="60" height="60" alt="" />
<a href="/2010/images/4.gif" rel="lightbox[roadtrip2]"
title="Calvin & Hobbes4">
<img src="/2010/images/4.gif" width="60" height="60" alt="" />
<a href="/2010/images/5.gif" rel="lightbox[roadtrip2]"
title="Calvin & Hobbes5">
<img src="/2010/images/5.gif" width="60" height="60" alt="" />
<a href="/2010/images/6.gif"
title="Calvin & Hobbes6">
<img src="/2010/images/6.gif" width="60" height="60" alt="" />

Once you have made all the above mentioned changes, hit
‘F5’ and click on single or sequence of images to see Lightbox effect.

No Comments so far

Jump into a conversation

No Comments Yet!

You can be the one to start a conversation.