I use this lightbox:
http://plugins.jquery.com/project/jquerylightbox_bal
And it works great with the easyslider. I took the easyslider demo 02 and added the above lightbox to it:
<!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>
<title>Easy Slider jQuery Plugin Demo</title>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/easySlider1.5.js"></script>
<script type="text/javascript" src="lightbox/js/jquery.lightbox.packed.js?show_info=true&show_extended_info=true&show_linkback=false&auto_scroll=fol low&speed=100"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#slider").easySlider();
});
</script>
<style type="text/css">
body {
background:#fff url(images/bg_body.gif) repeat-x;
font:80% Trebuchet MS, Arial, Helvetica, Sans-Serif;
color:#333;
line-height:180%;
margin:0;
padding:0;
text-align:center;
}
h1{
font-size:180%;
font-weight:normal;
margin:0;
padding:20px;
}
h2{
font-size:160%;
font-weight:normal;
}
h3{
font-size:140%;
font-weight:normal;
}
img{border:none;}
pre{
display:block;
font:12px "Courier New", Courier, monospace;
padding:10px;
border:1px solid #bae2f0;
background:#e3f4f9;
margin:.5em 0;
width:674px;
}
/* image replacement */
.graphic, #prevBtn, #nextBtn{
margin:0;
padding:0;
display:block;
overflow:hidden;
text-indent:-8000px;
}
/* // image replacement */
#container{
margin:0 auto;
position:relative;
text-align:left;
width:696px;
background:#fff;
margin-bottom:2em;
}
#header{
height:80px;
background:#5DC9E1;
color:#fff;
}
#content{
position:relative;
}
/* Easy Slider */
#slider{}
#slider ul, #slider li{
margin:0;
padding:0;
list-style:none;
}
#slider li{
/*
define width and height of list item (slide)
entire slider area will adjust according to the parameters provided here
*/
width:696px;
height:241px;
overflow:hidden;
}
#prevBtn, #nextBtn{
display:block;
width:30px;
height:77px;
position:absolute;
left:-30px;
top:71px;
}
#nextBtn{
left:696px;
}
#prevBtn a, #nextBtn a{
display:block;
width:30px;
height:77px;
background:url(images/btn_prev.gif) no-repeat 0 0;
}
#nextBtn a{
background:url(images/btn_next.gif) no-repeat 0 0;
}
/* // Easy Slider */
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>Easy Slider jQuery Plugin Demo - styled version</h1>
</div>
<div id="content">
<div id="slider">
<ul>
<li><a rel="lightbox-01" href="images/01.jpg"><img src="images/01.jpg" alt="Css Template Preview" /></a></li>
<li><a rel="lightbox-02" href="images/02.jpg"><img src="images/02.jpg" alt="Css Template Preview" /></a></li>
<li><a rel="lightbox-03" href="images/03.jpg"><img src="images/03.jpg" alt="Css Template Preview" /></a></li>
<li><a rel="lightbox-04" href="images/04.jpg"><img src="images/04.jpg" alt="Css Template Preview" /></a></li>
<li><a rel="lightbox-05" href="images/05.jpg"><img src="images/05.jpg" alt="Css Template Preview" /></a></li>
</ul>
</div>
<h3>Usage</h3>
<p><a href="http://cssglobe.com/post/4004/easy-slider-15-the-easiest-jquery-plugin-for-sliding" title="read more about this jquery plugin">back to the article</a></p>
<p><strong>Easy Slider</strong> jQuery Plugin is brought to you by <a href="http://cssglobe.com" title="web standards magazine and css news">Css Globe</a> and supported by <a href="http://templatica.com">Css Templates</a> by Templatica</p>
</div>
</div>
</body>
</html>
I can't really publish it so you can see it work but if you copy/paste that to your server and maybe tweak the paths to the plugins you should be able to get the demo to work and the incorporate that into your own site.