Responsive Image Lightbox & Carousel Plugin - jQuery slideBox.js

slideBox.js is a jQuery plugin that enables you to create responsive carousel and/or gallery lightbox from a group of images you specify.

How to use it:

1. Include jQuery library together with the jQuery slideBox.js plugin's files on the html page.

<link rel="stylesheet" href="slidebox.css">
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="slidebox-min.js"></script>

2. Initialize the plugin and you're ready to go.

initSlides();

3. The html structure to create an image grid gallery that will display the images in a carousel popup when you click on a thumbnail.

<div class="slide-box box-active">

  <img class="slide" src="1.jpg" alt="Alt 1">
  <img class="slide" src="2.jpg" alt="Alt 2">
  <img class="slide" src="3.jpg" alt="Alt 3">
  <img class="slide" src="4.jpg" alt="Alt 4">
  <img class="slide" src="5.jpg" alt="Alt 5">
    ...

  <div class="controls">
    <a class="widget widget-hide close" href="#">Close</a>
    <a class="widget widget-hide arrow prev disabled" href="#">Previous</a>
    <a class="widget widget-hide arrow next" href="#">Next</a>
  </div>

</div>

4. If you want to basic carousel that displays one image at a time:

<div class="slide-box slide-box-carousel box-active"> 
  
  <img class="slide slide-carousel slide-active" src="1.jpg" alt="Alt 1">
  <img class="slide slide-carousel slide-next" src="2.jpg" alt="Alt 2">
  <img class="slide slide-carousel" src="3.jpg" alt="Alt 3">
  <img class="slide slide-carousel" src="4.jpg" alt="Alt 4">
  <img class="slide slide-carousel" src="51.jpg" alt="Alt 5">

  <div class="controls">
    <a class="widget widget-hide close" href="#">Close</a>
    <a class="widget widget-hide arrow prev disabled" href="#">Previous</a>
    <a class="widget widget-hide arrow next" href="#">Next</a>
  </div>
  
  <ul class="pager pager-inline">     
    <li><a class="number 1 active" href="#" title="1">1</a></li>      
    <li><a class="number 2" href="#" title="2">2</a></li>     
    <li><a class="number 3" href="#" title="3">3</a></li>     
    <li><a class="number 4" href="#" title="4">4</a></li>
    <li><a class="number 5" href="#" title="5">5</a></li>
  </ul>

</div>

5. Default plugin options.

{
  container : '.slide-box', 
  slideBox  : '.slide-box',
  slide     : '.slide',
  slideBoxClick : false,
  setPath   : false,
  wrapSlides  : false,
  loopSlides  : false,
  interval  : 5000,
  debug : debug
}

Change log:

2018-04-06

• v1.6.3: Applied same media type across media queries.

2018-03-27

• Smoothed out slideshow animations on Carousels and zoomed slideBoxes.

2018-03-18

• Cleaned up external functions.

2017-11-08

• Moved global variables debug, mobile, and imgDirDefault to a separate file (src/plugin/includes/slidebox-globals.js).
• Some cleaning up of CSS styles.

2017-08-09

• Added examples and setup for automatic looping.

---

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