Lightbox with multiple instances on a page
Apologies to start, this is the first time I'm trying the lightbox with more than one on a page.
I can't seem to get my second lightbox to launch into the lightbox. The first instance is fine and working perfectly. I'm assuming its some kind of code in the header to make it work but not sure at all. Can someone guide me please?
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title>Laura Bohn Design Associates</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/corpomino.js"></script>
<!--[if ie]>
<link href="ie.css" rel="stylesheet" type="text/css" />
<![endif]-->
<!--[if lt ie 7]>
<link href="ie6.css" rel="stylesheet" type="text/css" />
<![endif]-->
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />
<script type="text/javascript">
$(function() {
$('#gallery a').lightBox();
});
</script>
</head>
<body>
<div id="containerWrapper">
<div id="container">
<div id="contentInner">
<h6>Magazines </h6>
<div id="gallery">
<ul>
<li> <a href="press/New York Home/nyhome0.jpg" rel="lightbox" title="New York Home Magazine">
<img src="press/New York Home/nyhome0-sm.jpg" alt="" width="114" height="144" class="entryPic" />
</a> </li>
<a href="press/New York Home/nyhome1.jpg" title="New York Home Magazine"></a>
<a href="press/New York Home/nyhome2.jpg" title="New York Home Magazine"></a>
<a href="press/New York Home/nyhome3.jpg" title="New York Home Magazine"></a>
<a href="press/New York Home/nyhome4.jpg" title="New York Home Magazine"></a>
<a href="press/New York Home/nyhome5.jpg" title="New York Home Magazine"></a>
<a href="press/New York Home/nyhome6.jpg" title="New York Home Magazine"></a>
<a href="press/New York Home/nyhome7.jpg" title="New York Home Magazine"></a>
<a href="press/New York Home/nyhome8.jpg" title="New York Home Magazine"></a>
</ul>
</div>
<h1 class="topPadding12"><a href="#">New York Home</a> </h1>
<p>July 2005</p>
<p class="gallery_clickimage">[ click image to see gallery ]</p>
<div class="clearfix"></div>
<div class="minusMargin20ie6"></div>
<div class="border"></div>
<div id="gallery">
<ul>
<li> <a href="press/ElleDecor/elle0.jpg" rel="lightbox" title="Elle Decor">
<img src="press/ElleDecor/elle0-sm.jpg" alt="" width="114" height="144" class="entryPic" />
</a> </li>
<a href="press/ElleDecor/elle1.jpg" title="Elle Decor"></a>
</ul>
</div>
<h1 class="topPadding12"><a href="#">Elle Decor</a> </h1>
<p>January 2005</p>
<p class="gallery_clickimage">[ click image to see gallery ]</p>
<div class="clearfix"></div>
<div class="minusMargin20ie6"></div>
<div class="border"></div>
<div class="clearfix"></div>
</div><!--contentInner-->
</div><!--container-->
</div><!--containerWrapper-->
</body>
</html>