jQuery Plugin To Create An Expandable Thumbnail Grid - slidebox

slidebox is a simple and small jQuery gallery plugin used to create a responsive compact thumbnail grid that expands into a full-sized image viewer when you click on a thumbnail image.

How to use it:

1. Load jQuery library together with the jQuery slidebox plugin's stylesheet and JavaScript files in the html page.

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

2. Load the Font Awesome 4 for zoom out and close icons.

<link rel="stylesheet" href="font-awesome.min.css">

3. Insert thumbnails to the grid and use data-zoom-image attribute to specify the sources of full-size images.

<div class="slidebox">
    <div class="slidebox-row">
      <div class="slidebox-image" data-zoom-image="1.jpg"> 
        <a href="#" title=""> <img src="thumb-1.jpg" alt=""> 
          <i class="slidebox-open fa fa-picture-o"></i> 
        </a> 
      </div>
      <div class="slidebox-image" data-zoom-image="2.jpg"> 
        <a href="#" title=""> <img src="thumb-2.jpg" alt=""> 
          <i class="slidebox-open fa fa-picture-o"></i> 
        </a> 
      </div>
      <div class="slidebox-image" data-zoom-image="3.jpg"> 
        <a href="#" title=""> <img src="thumb-3.jpg" alt=""> 
          <i class="slidebox-open fa fa-picture-o"></i> 
        </a> 
      </div>
      ...
    </div>
  </div>

4. Initialize the plugin.

$('.slidebox').slidebox();

5. There're two options to customize the close icon and animation speed.

$('.slidebox').slidebox({
  closeButtonContent: 'close',
  animationSpeed: 250
});

---

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