jQuery.GI.TheWall.js

This plugin could be used to create easily an image gallery similar to the google image search

Demo


$('.GITheWall').GITheWall();

ajax text + image
ajax text
Inline content

Options Available


var wall = $('div.wall').GITheWall({
  // Callbacks API
  onBeforeInit: null,
  onReady: null,
  onViewPortUpdate: null,
  onItemChange: null,
  onDestroy: null,
  onShow: null,
  onHide: null,
  onContentLoading: null,
  onContentLoaded: null,
  margin: {
    top: 10,
    bottom: 10
  },
  scrollerElm: null,
  scrollOffset: 150,
  // settings
  arrows: true,
  closebutton: true,
  keyboardNavigation: true,
  animationSpeed: 300,
  autoscroll: true,
  responsive: true,
  initialWrapperHeight: 600,
  dynamicHeight: true,
  nextButtonClass: '',
  prevButtonClass: '',
  closeButtonClass: ''
});

Public API

Public API methods

```
refresh
```
Use this method once you have added or removed elements from the wall
```
showExpander
```
Open the expander div if it's closed otherwise just update the content inside
```
hideExpander
```
Hide the expander cleaning its inner html
```
update
```
Update the plugin DOM elements (css classes and positions)
```
updateElementsPosition
```
Update the elements position
```
updateExpanderPosition
```
Update the expander div position if it's visible
```
resizeHeight(newHeight)
```
Resize the height of the expander to any custom value
- newHeight {int} : the new height value that must be set to the expander wrapper
```
showItemByIndex(index)
```
Show the content of any brick by selecting it via index
- index {int} : index of the brick we want to show

next

```
prev
```
Show the previous brick to the one selected
```
bindAll
```
Bind all the plugin events
```
unbindAll
```
Remove all the plugin events
```
destroy
```
Remove all the plugin events and the plugin DOM elements

Installation


$ bower install jquery-gi-thewall -save