FlexSlider click on pictures to bring up LightBox like ability - image

Question

I have a FlexSlider/Carousel plug in working great on my site. Now, I would like to be able to click on the Slider image to bring up a lightbox like plug in so I can 'blow up' the images to be able to see more detail. I have read and tried to implement a lightbox: true attribute which sounds like it is supposed to do what I am looking for, but it doesn't seem to work. I can't click on the slider image to do anything.
<div id="main" role="main">
<section class="slider">
<div id="slider" class="flexslider">
<ul class="slides">
<li>
<img src="~/Images/Products/WoodenSign/PNG/1-AMORE.PNG" />
</li>
<li>
<img src="~/Images/Products/WoodenSign/PNG/2-LOVE.PNG" />
</li>
</ul>
</div>
<div id="carousel" class="flexslider">
<ul class="slides">
<li>
<img src="~/Images/Products/WoodenSign/PNG/1-AMORE.PNG" />
</li>
<li>
<img src="~/Images/Products/WoodenSign/PNG/2-LOVE.PNG" />
</li>
</ul>
</div>
</section>
</div>
<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.min.js">\x3C/script>')</script>
<!-- FlexSlider -->
<script defer src="~/Scripts/jquery.flexslider.js"></script>
<script type="text/javascript">
$(function(){
SyntaxHighlighter.all();
});
$(window).load(function(){
$('#carousel').flexslider({
animation: "slide",
controlNav: false,
animationLoop: true,
slideshow: true,
itemWidth: 100,
itemMargin: 0,
asNavFor: '#slider'
});
$('#slider').flexslider({
animation: "slide",
controlNav: false,
animationLoop: true,
slideshow: true,
sync: "#carousel",
start: function(slider){
$('body').removeClass('loading');
},
lightbox: true
});
});

Answer 1

Just in case someone needs this. Try this:
<div id="slider" class="flexslider">
<ul class="slides">
<li>
<a href="~/Images/Products/WoodenSign/PNG/1-AMORE.PNG" data-lightbox="1000 500">
<img src="~/Images/Products/WoodenSign/PNG/1-AMORE.PNG" />
</a>
</li>
<li>
<img src="~/Images/Products/WoodenSign/PNG/2-LOVE.PNG" />
</li>
</ul>
</div>

Answer 2

A solution I'm using on a current WordPress project is "Responsive Lightbox" by dFactory. It uses the HTML element rel="lightbox" as a hook. Instant lightbox galleries!
<div class="flexslider">
<ul class="slides">
<li>
<a href="large-image-01.jpg" rel="lightbox">
<img src="thumb-image-01.jpg" />
</a>
</li>
<li>
<a href="large-image-01.jpg" rel="lightbox">
<img src="thumb-image-01.jpg" />
</a>
</li>
</ul>
</div>

Answer 3

<div class="flexslider">
<ul class="slides">
<li>
<a href="large-image-01.jpg" rel="lightbox">
<img src="thumb-image-01.jpg" />
</a>
</li>
<li>
<a href="large-image-01.jpg" rel="lightbox">
<img src="thumb-image-01.jpg" />
</a>
</li>
</ul> </div>
This is the one that worked for me - I also added a target="blank" to open a new window.