jQuery Plugin For Image Gallery Slider - Image Carousel Lightbox

jQuery Plugin For Image Gallery Slider - Image Carousel Lightbox
File Size: 2.46 MB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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.