Responsive Image Lightbox Gallery Plugin with jQuery - cobox

jQuery cobox is a lightweight jQuery plugin that helps you create responsive popup image galleries with a fullscreen modal overlay effect.

Features:

• Allows you to navigate between images through arrow keys.
• Image loading indicator.
• Smoothly adapts to any screen size.
• Smooth open / close / switch animations.
• Auto generates image captions from title or data-title attributes.

How to use it:

1. Load jQuery library and the jQuery cobox plugin's stylesheet & JS files in the html page.

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

2. Add links to your thumbnails that point to the full size images. The plugin will automatically generate image captions from <a> tag's title or data-title attributes.

<a href="images/1.jpg" title="Photo by Skyler Smith">
  <img src="images/thumb-1.jpg" alt="example-1">
</a>

<a href="images/2.jpg" title="Photo by Skyler Smith">
  <img src="images/thumb-2.jpg" alt="example-2">
</a>

<a href="images/3.jpg" data-title="Photo by Skyler Smith">
  <img src="images/thumb-3.jpg" alt="example-3">
</a>

...

3. That's it. The plugin will look up all the images on your webpage and display them in a gallery lightbox with next / prev navigation arrows. You can override the default options by editing the cobox.js file.

this.outerBorder = 8;
this.minLeft     = 10;  
this.minTop      = 60; 
this.fadeSpeed   = 300; 
this.speed       = 400; 
this.nextClick   = true; 
this.textShow    = true; 

---

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