Click on a thumbnail to open the lightbox.
There aren't many open source plugins available on the market that allow you to build a image carousel with thumbs that open a lightbox on click.
Fortunately, you can combine two of the most widely used plugins in order to achieve this functionality:
flexslider2 and
lightbox.js
First, you'll want to integrate the flexslider with carousel thumbnails. Head over to their page for an
example or follow the one below.
Next I'll want to add lightbox functionality on the carousel thumbnails. For this, wrap the individual images into <a> tags with the data-lightbox attribute.
This will open up the lightbox gallery on click.
<![CDATA[
<div class="flexslider" id="carousel">
<ul class="slides">
<li>
<a data-lightbox="example" href="images/slide1.jpg"><img src="images/slide1.jpg" /></a></li>
<li>
<a data-lightbox="example" href="images/slide2.jpg"><img src="images/slide2.jpg" /></a></li>
<li>
<a data-lightbox="example" href="images/slide3.jpg"><img src="images/slide3.jpg" /></a></li>
</ul>
</div>
]]>
It's that simple.
Here is the full example: <![CDATA[ <!doctype html="">
<html id="content" lang="en">
<head>
<link href="flexslider.css" rel="stylesheet" />
<link href="lightbox.min.css" rel="stylesheet" />
</head>
<body>
<div class="flexslider" id="slider">
<ul class="slides">
<li>
<img src="images/slide1.jpg" /></li>
<li>
<img src="images/slide2.jpg" /></li>
<li>
<img src="images/slide3.jpg" /></li>
</ul>
</div>
<div class="flexslider" id="carousel">
<ul class="slides">
<li>
<a data-lightbox="example" href="images/slide1.jpg"><img src="images/slide1.jpg" /></a></li>
<li>
<a data-lightbox="example" href="images/slide2.jpg"><img src="images/slide2.jpg" /></a></li>
<li>
<a data-lightbox="example" href="images/slide3.jpg"><img src="images/slide3.jpg" /></a></li>
</ul>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script><script defer src="jquery.flexslider-min.js"></script><script defer src="lightbox.min.js"></script><script>
$(document).ready(function() {
$('#carousel').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: false,
itemWidth: 150,
itemMargin: 5,
asNavFor: '#slider'
});
$('#slider').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: false,
sync: "#carousel"
});
});
</script></body>
</html>
</!doctype>]]>