https://github.com/oriongunning/gridder
A jQuery plugin that displays a thumbnail grid expanding preview similar to the effect seen on Google Images.
https://github.com/oriongunning/gridder
gallery gridder jquery-plugin
Last synced: 2 months ago
JSON representation
A jQuery plugin that displays a thumbnail grid expanding preview similar to the effect seen on Google Images.
- Host: GitHub
- URL: https://github.com/oriongunning/gridder
- Owner: orion3dgames
- Created: 2013-07-24T08:05:11.000Z (almost 12 years ago)
- Default Branch: master
- Last Pushed: 2023-08-24T06:29:41.000Z (over 1 year ago)
- Last Synced: 2024-05-21T04:13:19.379Z (12 months ago)
- Topics: gallery, gridder, jquery-plugin
- Language: JavaScript
- Homepage: http://orion3dgames.github.io/gridder/
- Size: 3.57 MB
- Stars: 461
- Watchers: 34
- Forks: 130
- Open Issues: 20
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-web-effect - gridder - A jQuery plugin that displays a thumbnail grid expanding preview similar to the effect seen on Google Images.. (🚀 A series of exquisite and compact web page cool effects / Image Effect)
- fucking-awesome-web-effect - gridder - A jQuery plugin that displays a thumbnail grid expanding preview similar to the effect seen on Google Images.. (🚀 A series of exquisite and compact web page cool effects / Image Effect)
README
> **WARNING**: ⚠⚠ this version has been deprecated and a new fully JS version is being developed here: https://github.com/orion3dgames/gridder-js ⚠⚠
***
# jQuery GRIDDER 1.5.0 
[](https://www.unheap.com/media/galleries/gridder/) [](https://cdnjs.com/libraries/gridder)
=======
### A jQuery plugin that displays a thumbnail grid expanding preview similar to the effect seen on Google Images.
We have all searched images on Google, so you probably noticed the interesting expanding preview when you click on a thumbnail. It’s a very nice effect and practical, allowing you quickly see more details without having to reload a new page. This plugin allows you to recreate a similar effect on a thumbnail grid. The idea is to open a preview when clicking on a thumbnail and to show a larger image and some other content like a title, a description and a link
- Demo GRIDDER v1.4.0 : https://oriongunning.github.io/gridder/
- Alternative Demo : httsp://www.oriongunning.com/demo/gridder
=======
## Alternative version of Gridder that support html 5 pushstate (REQUIRES SERVER KNOWLEDGE)
Live demo GRIDDER v2 : https://www.oriongunning.com/demo/gridder-ajax/demo.php
- Github link for V2 : https://github.com/orion3dgames/gridder-ajax
=======
### NEW
*24 June 2015
You can now load content via ajax. Simply replace the #ID with an URL.
=======
### FEATURES
- Multiple instances
- Really easy to use and customize
- Expanding preview with details
- Smooth Scrolling
- Callbacks (so you can launch other plugins)
### Coming soon ...
- Hot Linking
=======
## Usage
1. Include jQuery:
```html
```
2. Include plugin's code:
```html
```
3. HTML
```html
```
3. Call the plugin:
```javascript
$(function() {
// Call Gridder
$('.gridder').gridderExpander({
scroll: true,
scrollOffset: 30,
scrollTo: "panel", // panel or listitem
animationSpeed: 400,
animationEasing: "easeInOutExpo",
showNav: true, // Show Navigation
nextText: "Next", // Next button text
prevText: "Previous", // Previous button text
closeText: "Close", // Close button text
onStart: function(){
//Gridder Inititialized
},
onContent: function(){
//Gridder Content Loaded
},
onClosed: function(){
//Gridder Closed
}
});
});
```
This work is licensed under a Creative Commons Attribution 3.0 Unported License.