This time I will share jQuery Plugin and tutorial about jQuery Plugin For Thumbnail Grid Expanding Preview – Gridder, hope it will help you in programming stack.
Gridder is a cool jQuery gallery & thumbnail grid plugin to create a Google Image Search like expanding preview effect when you click on a thumbnail, allowing you quickly see more details without the need of opening a new page/browser tab. This plugin is licensed under a Creative Commons Attribution 3.0 Unported License.
How to use it:
1. Load the jQuery Gridder plugin’s stylesheet for core styles.
1 |
<link href="css/jquery.gridder.min.css" rel="stylesheet"> |
2. Load the jQuery Gridder plugin’s script at the bottom of the document, after jQuery JavaScript library.
1 |
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script> |
2 |
<script src="js/jquery.gridder.min.js"></script> |
3. The Html structure for the expanding thumbnail grid.
03 |
<li class="gridder-list"> |
04 |
<div class="gridder-thumb"> |
05 |
<div class="image"><img src="thumb-1.jpg" /></div> |
06 |
<span class="title">Item 1</span> <span class="description">Description 1</span> </div> |
07 |
<div class="gridder-content"> |
08 |
Larger image and some other content ... |
11 |
<li class="gridder-list"> |
12 |
<div class="gridder-thumb"> |
13 |
<div class="image"><img src="thumb-2.jpg" /></div> |
14 |
<span class="title">Item 2</span> <span class="description">Description 2</span> </div> |
15 |
<div class="gridder-content"> |
16 |
Larger image and some other content ... |
19 |
<li class="gridder-list"> |
20 |
<div class="gridder-thumb"> |
21 |
<div class="image"><img src="thumb-3.jpg" /></div> |
22 |
<span class="title">Item 3</span> <span class="description">Description 3</span> </div> |
23 |
<div class="gridder-content"> |
24 |
Larger image and some other content ... |
4. Initialize the plugin with options.
01 |
jQuery(document).ready(function($) { |
04 |
$(".gridder").gridderExpander({ |
08 |
animationEasing: "easeInOutExpo", |
10 |
console.log("Gridder Inititialized"); |
12 |
onExpanded: function(object){ |
13 |
console.log("Gridder Expanded"); |
14 |
$(".carousel").carousel(); |
16 |
onChanged: function(object){ |
17 |
console.log("Gridder Changed"); |
20 |
console.log("Gridder Closed"); |
Changelog:
2019-10-08
2017-01-04
- Using GET instead of POST.
2016-03-08
- Fixed: Dynamic item would not expand. (click was not delegated)
2015-09-10
2015-06-24
- Allowing AJAX content to be loaded
About author:
Author: Orion Gunning
Website: http://www.oriongunning.com/
This awesome jQuery plugin is developed by oriongunning. For more Advanced Usages, please check the demo page or visit the official website.
