jQuery Plugin For Image Gallery Slider - Image Carousel Lightbox

Image Carousel Lightbox is a simple jQuery plugin for displaying an image gallery slider in a popup lightbox window.

How to use it:

1. Include the jQuery javascript library on the web page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

2. Inclcude the jQuery image carousel lightbox's JS and CSS on the web page.

<link href="css/lightbox-carousel.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="js/lightbox-carousel.js"></script>

3. Wrap the images in a wrapper with CSS class of 'main'.

<div class="main" style="position: relative; top: 100px;">
<div class="carousel-main"> <img title="Image 1" src="img/carousel/1.jpg" height="200px" width="200px" /> </div>
<div class="carousel-main"> <img title="Image 2" src="img/carousel/2.jpg" height="200px" width="200px" /> </div>
<div class="carousel-main"> <img title="Image 3" src="img/carousel/3.jpg" height="200px" width="200px" /> </div>
...
</div>

4. Call the plugin with default settings.

<script type="text/javascript">
$(function(){
$(".main").lightboxCarousel();
})
</script>

5. Available settings.

<script type="text/javascript">
$(function(){
$(".main").lightboxCarousel({
baseClass: ".carousel-main",
parentClass: ".main",
totalImages: 0,
activeImageIndex: 0,
imgTopOffset : 0,
divTopPadding: 40,
divLeftPadding: 20,
maxWidth: 600,
maxHeight: 600
});
})
</script>

Change log:

2016-04-22

• Refactor the code, added support for keyboard next and prev arrow navigation and lightbox close using escape key functionality.

---

This awesome jQuery plugin is developed by sanjayV. For more Advanced Usages, please check the demo page or visit the official website.