Lightbox functionality is not working......

[baluparamaraj]

1) Script Title:
Lightbox functionality is not working......

2) Script URL (on DD):
http://www.dynamicdrive.com/forums/newthread.php?do=newthread&f=2

3) Describe problem:
I have applied the lightbox function for a website where we need to view a group of photos.Even though we had given the right path the functionality is not working.. When we click on the photo it takes us to a new page and the photo gets opened(as in the old format).I have given below the css script for ur reference.........

CSS File:
1)Please mention where we need to do the changes..
BODY {
MARGIN: 0px; FONT: 75% Lucida Sans, Arial, Helvetica, sans-serif; BACKGROUND-COLOR: #e9e9e9
}
H2.page {
FONT-SIZE: 3em; COLOR: #ed1c24; FONT-FAMILY: Arial, Helvetica, sans-serif
}
H1 {
FONT-WEIGHT: lighter; MARGIN: 0px; FONT-FAMILY: Arial, Helvetica, sans-serif
}
H2 {
FONT-WEIGHT: lighter; MARGIN: 0px; FONT-FAMILY: Arial, Helvetica, sans-serif
}
H3 {
FONT-WEIGHT: lighter; FONT-SIZE: 3em; MARGIN: 10px 0px; FONT-STYLE: italic; FONT-FAMILY: Georgia, "Times New Roman", Times, serif
}
H4 {
FONT-WEIGHT: lighter; FONT-SIZE: 1.5em; MARGIN: 0px; FONT-FAMILY: Arial, Helvetica, sans-serif
}
P {
MARGIN: 10px 0px
}
.image {
PADDING-RIGHT: 7px; PADDING-LEFT: 7px; BACKGROUND: url(../images/new/th_bg_bot.gif) no-repeat 50% bottom; PADDING-BOTTOM: 50px; OVERFLOW: hidden; WIDTH: 180px; PADDING-TOP: 22px; HEIGHT: 125px
}
.polaroid {
BACKGROUND: url(../images/new/th_bg_top.gif) no-repeat; FLOAT: left; MARGIN: 0px 15px 15px 0px; paddin: 0
}
.content {
PADDING-RIGHT: 15px; PADDING-LEFT: 15px; PADDING-BOTTOM: 15px; PADDING-TOP: 15px
}
.container {
BORDER-RIGHT: #c9c9c9 1px solid
}
.clear {
CLEAR: both; OVERFLOW: hidden; HEIGHT: 1px
}
.articles {
FONT-SIZE: 90%; WIDTH: 200px; FONT-FAMILY: Tahoma, Verdana, Arial, Sans-Serif; TEXT-ALIGN: left
}
.article_list {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
.article_list UL {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
.article_list A {
PADDING-RIGHT: 19px; BORDER-TOP: #999 1px dotted; DISPLAY: block; PADDING-LEFT: 5px; FLOAT: left; PADDING-BOTTOM: 10px; MARGIN: 0px; WIDTH: 100%; COLOR: #666; PADDING-TOP: 10px; TEXT-ALIGN: left; TEXT-DECORATION: none
}
.article_list A:visited {
FLOAT: left; COLOR: #666
}
.article_list A.current {
FONT-WEIGHT: bold; BACKGROUND: url(../images/arrow.gif) no-repeat right center; FLOAT: left
}
.article_list A.current:hover {
FONT-WEIGHT: bold; FLOAT: left; BACKGROUND-COLOR: #fff
}
.article_list LI {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 0px; WIDTH: 100%; PADDING-TOP: 0px; TEXT-ALIGN: justify
}
.article_list LI A:hover {
BACKGROUND: url(../images/arrow.gif) no-repeat right center; FLOAT: left; MARGIN: 0px; COLOR: #000
}
#lightbox {
Z-INDEX: 100; LEFT: 0px; WIDTH: 100%; LINE-HEIGHT: 0; POSITION: absolute; TOP: 40px; TEXT-ALIGN: center
}
#lightbox A IMG {
BORDER-TOP-STYLE: none; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; BORDER-BOTTOM-STYLE: none
}
#outerImageContainer {
MARGIN: 0px auto; WIDTH: 250px; POSITION: relative; HEIGHT: 250px; BACKGROUND-COLOR: #fff
}
#imageContainer {
PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 10px; PADDING-TOP: 10px
}
#loading {
LEFT: 0%; WIDTH: 100%; LINE-HEIGHT: 0; POSITION: absolute; TOP: 40%; HEIGHT: 25%; TEXT-ALIGN: center
}
#hoverNav {
Z-INDEX: 10; LEFT: 0px; WIDTH: 100%; POSITION: absolute; TOP: 0px; HEIGHT: 100%
}
UNKNOWN {
LEFT: 0px
}
#hoverNav A {
outline: none
}
#prevLink {
DISPLAY: block; BACKGROUND: url(../images/blank.gif) no-repeat; WIDTH: 49%; HEIGHT: 100%
}
#nextLink {
DISPLAY: block; BACKGROUND: url(../images/blank.gif) no-repeat; WIDTH: 49%; HEIGHT: 100%
}
#prevLink {
LEFT: 0px; FLOAT: left
}
#nextLink {
RIGHT: 0px; FLOAT: right
}
#prevLink:hover {
BACKGROUND: url(../images/prevlabel.gif) no-repeat left 15%
}
#prevLink:hover {
BACKGROUND: url(../images/prevlabel.gif) no-repeat left 15%
}
#nextLink:hover {
BACKGROUND: url(../images/nextlabel.gif) no-repeat right 15%
}
#nextLink:hover {
BACKGROUND: url(../images/nextlabel.gif) no-repeat right 15%
}
#imageDataContainer {
MARGIN: 0px auto; FONT: 10px/1.4em Verdana, Helvetica, sans-serif; BACKGROUND-COLOR: #fff
}
#imageData {
PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px
}
#imageData #imageDetails {
FLOAT: left; WIDTH: 70%; TEXT-ALIGN: left
}
#imageData #caption {
FONT-WEIGHT: bold
}
#imageData #numberDisplay {
CLEAR: left; DISPLAY: block; PADDING-BOTTOM: 1em
}
#imageData #bottomNavClose {
FLOAT: right; PADDING-BOTTOM: 0.7em; WIDTH: 66px
}
#overlay {
Z-INDEX: 90; FILTER: alpha(opacity=60); LEFT: 0px; WIDTH: 100%; POSITION: absolute; TOP: 0px; HEIGHT: 500px; BACKGROUND-COLOR: #000; moz-opacity: 0.6; opacity: 0.6
}
.clearfix:unknown {
CLEAR: both; DISPLAY: block; VISIBILITY: hidden; HEIGHT: 0px; content: "."
}
UNKNOWN {
DISPLAY: inline-block; WIDTH: 100%
}
HTML .clearfix {
HEIGHT: 1%
}
Note:
Due to this issue in lightbox technique we have used Thumbnail method to view the photos,but it is working fine..

Any ways to link the thumbnail with lightbox technique????????????????