How to use it:

1. Insert your images into the grid like this:

<div id="demo" class="ga-accordian">
  <div class="ga-item">
    <a href="#">
      <img class="ga-background" src="img/1.jpg" />
    </a>
  </div>
  <div class="ga-item">
    <a href="#">
      <img class="ga-background" src="img/2.jpg" />
    </a>
  </div>
  <div class="ga-item">
    <a href="#">
      <img class="ga-background" src="img/3.jpg" />
    </a>
  </div>
  <div class="ga-item">
    <a href="#">
      <img class="ga-background" src="img/4.jpg" />
    </a>
  </div>
  <div class="ga-item">
    <a href="#">
      <img class="ga-background" src="img/5.jpg" />
    </a>
  </div>
  <div class="ga-item">
    <a href="#">
      <img class="ga-background" src="img/6.jpg" />
    </a>
  </div>
  ...
</div>

2. The basic styles for the image grid.
1
	.ga-accordian { display: block; }
	.ga-item {
	  overflow: hidden;
	  display: block;
	  position: absolute;
	}

	.ga-background { }

3. Include jQuery lirbary and the jQuery Grid Accordian plugin at the bottom of the webpage.

	<script src="//code.jquery.com/jquery-2.1.3.min.js"></script>
	<script src="js/grid-accordian.js"></script>

4. Call the plugin on the parent container.

	$(document).ready(function() {
	  $("#my-ga").GridAccordian({
	    cols: 4, // default 2
	    speed: 600 // animation speed
	  })
	})

5. Full plugin options.

	speed: 600,
	margin: 2,
 
	// your settings are equal to their value if window's width equal to this value
	baseWindowSize: 1400,
	baseFontSize: 14,
	briefOffset: 2,
	briefFontColor: "rgba(0, 0, 0, 1.0)",

	// background-color
	briefBGColor: "rgba(127, 127, 127, 0.8)",