Easy image carousel with lightbox using Flexslider2 and Lightbox.js
dateAugust 05 2016 | comments 0 comments
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. 
<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: <!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>
 

dateAugust 05 2016 | comments 0 comments

Easy image carousel with lightbox using Flexslider2 and Lightbox.js
Comments
Blog post currently doesn't have any comments.
Leave comment



 Security code