How to Create Google Like Image Search View using jquery
In this post, I will show you how to create Google like Image Search View using Jquery Plugin jQuery.GI.TheWall.js.
Take a look at the demo and download the complete code to try yourself.
Options Available
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
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: '' }); |
|
1 2 3 4 5 |
<h2 id="public-api">Public API</h2> <p>Public API methods</p> <ul class="api"> <li> <pre><b>showExpander</b> |
Open the expander div if it’s closed otherwise just update the content inside
|
1 |
<b>hideExpander</b> |
Hide the expander cleaning its inner html
|
1 |
<b>update</b> |
Update the plugin DOM elements (css classes and positions)
|
1 |
<b>updateElementsPosition</b> |
Update the elements position
|
1 |
<b>updateExpanderPosition</b> |
Update the expander div position if it’s visible
|
1 |
<b>resizeHeight(newHeight)</b> |
Resize the height of the expander to any custom value
- newHeight {int} : the new height value that must be set to the expander wrapper
|
1 |
<b>showItemByIndex(index)</b> |
Show the content of any brick by selecting it via index
- index {int} : index of the brick we want to show
|
1 |
<b>next</b> |
Show the next brick to the one selected
|
1 |
<b>prev</b> |
Show the previous brick to the one selected
|
1 |
<b>bindAll</b> |
Bind all the plugin events
|
1 |
<b>unbindAll</b> |
Remove all the plugin events
|
1 |
<b>destroy</b> |
Remove all the plugin events and the plugin DOM elements
Leave a Reply