jQuery Plugin For Expanding Image Grid - Grid Accordian

Grid Accordian is a jQuery plugin to create an image grid that uses animate() method to smoothly expand/collapse images on mouse hover, much like an accordion.

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.

.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)", 

Change logs:

2015-04-25

• Fix a bug in showing briefs and descriptions

2015-04-23

• You can now add brief and description!

2015-04-18

• v0.0.2

---

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