Google Image Search Style Photo Wall Gallery Plugin For jQuery - GI.TheWall.js

GI.TheWall.js is a jQuery plugin that allows you to show a photo wall gallery or any other content in a "Google Image Search" user interaction way. When an image is clicked, an image slider slides up from the bottom that allows you to cycle through large images with keyboard and arrows navigation.

How to use it:

1. Include the required Font Awesome 4 for the navigation & close icons.

<link href="http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

2. Create a photo wall gallery from a list of images with Html5 data-* attributes.

• data-contenttype: Content type. image or ajax
• data-href: Path to your large image or ajax file

<div class="GITheWall">
  <ul>
    <li data-contenttype="image" data-href="large.jpg"> <img src="thumb.jpg" /> </li>
    <li data-contenttype="ajax" data-href="ajax.html"> ajax text + image </li>
    ...
  </ul>
</div>

3. The required CSS to style the photo wall gallery.

.GITheWall ul {
  list-style: none;
  padding: 20px 0;
  margin: 0 auto;
  text-align: left;
  width: 100%;
}

.GITheWall ul li {
  display: inline-block;
  margin: 10px 5px 0 5px;
  vertical-align: top;
  width: 200px;
}

.GITheWall ul li.GI_TW_Selected_Row {
  -webkit-transition: margin-bottom 0.3s ease-in;
  -moz-transition: margin-bottom 0.3s ease-in;
  -o-transition: margin-bottom 0.3s ease-in;
  transition: margin-bottom 0.3s ease-in;
}

.GI_TW_expander {
  position: absolute;
  z-index: 1;
  top: 0;
  background: black;
  left: 0;
  width: 100%;
  margin-top: 10px;
  height: 0;
  overflow: hidden;
  -webkit-transition: height 0.3s ease-in;
  -moz-transition: height 0.3s ease-in;
  -o-transition: height 0.3s ease-in;
  transition: height 0.3s ease-in;
}

.GI_TW_expander.animating { overflow: hidden !important; }

.GI_TW_expander.opened { overflow: visible; }

.GI_TW_expander .GI_TW_pointer {
  position: absolute;
  margin-left: -20px;
  margin-top: -20px;
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-bottom: 20px solid black;
  -webkit-transition: left 0.3s ease-in;
  -moz-transition: left 0.3s ease-in;
  -o-transition: left 0.3s ease-in;
  transition: left 0.3s ease-in;
}

.GI_TW_expander .GI_TW_expander-inner {
  width: 80%;
  height: 560px;
  margin: 0 auto;
  overflow: hidden;
}

.GI_TW_expander .GI_TW_expander-inner .GI_TW_fullimg {
  position: relative;
  width: 100%;
  height: 580px;
  margin: 10px 0 0;
  text-align: center;
  overflow: hidden;
}

.GI_TW_expander .GI_TW_expander-inner .GI_TW_fullimg img { position: relative; }

.GI_TW_expander .GI_TW_Controls { z-index: 1; }

.GI_TW_expander .GI_TW_close {
  position: absolute;
  width: 40px;
  height: 40px;
  top: 20px;
  right: 20px;
  cursor: pointer;
}

.GI_TW_expander .GI_TW_arrow {
  position: absolute;
  top: 50%;
  cursor: pointer;
}

.GI_TW_expander .GI_TW_arrow.GI_TW_hidden { display: none; }

.GI_TW_expander .GI_TW_arrow.GI_TW_next { right: 30px; }

.GI_TW_expander .GI_TW_arrow.GI_TW_prev { left: 30px; }

.GI_TW_expander .GI_TW_loading {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #ddd;
  box-shadow: 0 0 1px #cccccc, 15px 30px 1px #cccccc, -15px 30px 1px #cccccc;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -25px 0 0;
  -webkit-animation: loader 0.5s infinite ease-in-out both;
  -moz-animation: loader 0.5s infinite ease-in-out both;
  -ms-animation: loader 0.5s infinite ease-in-out both;
  -o-animation: loader 0.5s infinite ease-in-out both;
  animation: loader 0.5s infinite ease-in-out both;
}
 @-moz-keyframes 
loader {  0% {
 background: #ddd;
}
 33% {
 background: #ccc;
 box-shadow: 0 0 1px #cccccc, 15px 30px 1px #cccccc, -15px 30px 1px #dddddd;
}
 66% {
 background: #ccc;
 box-shadow: 0 0 1px #cccccc, 15px 30px 1px #dddddd, -15px 30px 1px #cccccc;
}
}
 @-webkit-keyframes 
loader {  0% {
 background: #ddd;
}
 33% {
 background: #ccc;
 box-shadow: 0 0 1px #cccccc, 15px 30px 1px #cccccc, -15px 30px 1px #dddddd;
}
 66% {
 background: #ccc;
 box-shadow: 0 0 1px #cccccc, 15px 30px 1px #dddddd, -15px 30px 1px #cccccc;
}
}
 @-o-keyframes 
loader {  0% {
 background: #ddd;
}
 33% {
 background: #ccc;
 box-shadow: 0 0 1px #cccccc, 15px 30px 1px #cccccc, -15px 30px 1px #dddddd;
}
 66% {
 background: #ccc;
 box-shadow: 0 0 1px #cccccc, 15px 30px 1px #dddddd, -15px 30px 1px #cccccc;
}
}
 @-ms-keyframes 
loader {  0% {
 background: #ddd;
}
 33% {
 background: #ccc;
 box-shadow: 0 0 1px #cccccc, 15px 30px 1px #cccccc, -15px 30px 1px #dddddd;
}
 66% {
 background: #ccc;
 box-shadow: 0 0 1px #cccccc, 15px 30px 1px #dddddd, -15px 30px 1px #cccccc;
}
}
 @keyframes 
loader {  0% {
 background: #ddd;
}
 33% {
 background: #ccc;
 box-shadow: 0 0 1px #cccccc, 15px 30px 1px #cccccc, -15px 30px 1px #dddddd;
}
 66% {
 background: #ccc;
 box-shadow: 0 0 1px #cccccc, 15px 30px 1px #dddddd, -15px 30px 1px #cccccc;
}
}

4. Initialize the plugin to enable the gallery.

$('.GITheWall').GITheWall({
nextButtonClass: 'fa fa-arrow-right',
prevButtonClass: 'fa fa-arrow-left',
closeButtonClass: 'fa fa-times'
});

5. Available options and defaults.

// 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: ''

6. Public API methods.

• 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)
• updateElementsPositioshowExpander: 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
• showItemByIndex(index): Show the content of any brick by selecting it via index
• next: Show the next brick to the one selected
• 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
• n: 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
• showItemByIndex(index): Show the content of any brick by selecting it via index
• next: Show the next brick to the one selected
• 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

Change logs:

2015-04-28

• fix to the toggle close event

2015-04-20

• small bug fix

2014-11-11

• new release.

2014-10-18

• fixed bugs.

2014-09-05

• fixed bugs.

---

This awesome jQuery plugin is developed by Goldinteractive. For more Advanced Usages, please check the demo page or visit the official website.