jQuery Plugin To Create An Expandable Thumbnail Grid - slidebox
File Size: | 11 KB |
---|---|
Views Total: | 3508 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.