Responsive and Tidy jQuery Modal Box Plugin - Smoothbox

Smoothbox is a lightweight jQuery lightbox plugin for creating simple and clean modal boxes with image gallery, smooth CSS3 transitions and image preload support. The plugin works with all the modern browsers which support CSS3 transition property and it still downgrades gracefully.

How to use it:

1. Include the jQuery Smoothbox's stylesheet in the head section of the page.

<link rel="stylesheet" href="css/smoothbox.css">

2. Create a group of images with the same class 'sb'. The plugin uses the title attribute for image captions.

<a class="sb" href="images/1.jpg" title="Caption One">Image One</a><br>
<a class="sb" href="images/2.jpg" title="Caption Two">Image Two</a><br>
<a class="sb" href="images/3.jpg" title="Caption Three">Image Three</a><br>
<a class="sb" href="images/4.jpg" title="Caption Four">Image Four</a>

3. Include the latest jQuery javascript library and jQuery Smoothbox plugin on the page.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.js"></script> 
<script type="text/javascript" src="js/smoothbox.jquery2.js"></script>

4. If you're using jQuery 1.8.x for support of IE8, include the smoothbox.js instead of smoothbox.jquery2.js.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.js"></script> 
<script type="text/javascript" src="js/smoothbox.js"></script>

---

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