Google Images Inspired Thumbnail Grid Plugin For jQuery - Expansion Grid

Expansion Grid is a lightweight and easy-to-use jQuery plugin for generating an expanding thumbnail grid/gallery where the users are able to view more details when they click on a grid item. Similar to the Google's image search result page.

How to use it:

1. Make sure expansion-grid.css, jQuery library and expansion-grid.js are included & loaded correctly as follow.

<link rel="stylesheet" href="expansion-grid.css">
<script src="//code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="expansion-grid.js"></script>

2. Create an html list for the thumbnail grid and then fill up your custom content as this:

<ul class="expansion-grid">
  <li>
    <button class="expansion-grid-switch"><span></span></button>
    <div class="expansion-grid-reveal">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eget sollicitudin tellus. Cras at posuere augue. Ut vitae urna gravida, molestie diam in, sollicitudin augue. Nam blandit bibendum massa, vel tincidunt dui dignissim vitae. Nulla facilisi. Nam a pharetra nulla, nec tincidunt leo. Integer sit amet odio eget est pretium porttitor. Ut sit amet turpis eu mi rutrum maximus id dictum ipsum. Vestibulum neque diam, condimentum condimentum hendrerit in, ultrices in justo. Integer hendrerit nisi lacus, id facilisis quam imperdiet eget. Cras nec leo ornare, finibus urna eu, tincidunt risus. Donec non dignissim eros. Nam ut libero dictum, cursus nibh non, lobortis risus. Nulla quis gravida nulla. Nunc nisi justo, dignissim quis imperdiet vel, pretium sed diam.</p>
    </div>
  </li>
  <li>
    <button class="expansion-grid-switch"><span></span></button>
    <div class="expansion-grid-reveal">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pharetra nisl vel interdum sagittis. Suspendisse sed consectetur erat, vitae porttitor massa.</p>
      <p>Mauris tincidunt orci nec sem convallis efficitur. In faucibus rutrum vehicula. Nullam bibendum urna a massa convallis, et pellentesque risus efficitur. Sed rutrum est ut lacinia dapibus. Duis in lectus vitae nisi venenatis tincidunt et id enim. Cras tempus venenatis neque non pharetra. Cras fermentum scelerisque nibh eu suscipit.</p>
    </div>
  </li>
  <li>
    <button class="expansion-grid-switch"><span></span></button>
    <div class="expansion-grid-reveal">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eget sollicitudin tellus. Cras at posuere augue. Ut vitae urna gravida, molestie diam in, sollicitudin augue. Nam blandit bibendum massa, vel tincidunt dui dignissim vitae. Nulla facilisi. Nam a pharetra nulla, nec tincidunt leo. Integer sit amet odio eget est pretium porttitor. Ut sit amet turpis eu mi rutrum maximus id dictum ipsum. Vestibulum neque diam, condimentum condimentum hendrerit in, ultrices in justo. Integer hendrerit nisi lacus, id facilisis quam imperdiet eget. Cras nec leo ornare, finibus urna eu, tincidunt risus. Donec non dignissim eros. Nam ut libero dictum, cursus nibh non, lobortis risus. Nulla quis gravida nulla. Nunc nisi justo, dignissim quis imperdiet vel, pretium sed diam.</p>
    </div>
  </li>
  <li>
    <button class="expansion-grid-switch"><span></span></button>
    <div class="expansion-grid-reveal">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pharetra nisl vel interdum sagittis. Suspendisse sed consectetur erat, vitae porttitor massa.</p>
      <p>Mauris tincidunt orci nec sem convallis efficitur. In faucibus rutrum vehicula. Nullam bibendum urna a massa convallis, et pellentesque risus efficitur. Sed rutrum est ut lacinia dapibus. Duis in lectus vitae nisi venenatis tincidunt et id enim. Cras tempus venenatis neque non pharetra. Cras fermentum scelerisque nibh eu suscipit.</p>
    </div>
  </li>
  <li>
    <button class="expansion-grid-switch"><span></span></button>
    <div class="expansion-grid-reveal">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eget sollicitudin tellus. Cras at posuere augue. Ut vitae urna gravida, molestie diam in, sollicitudin augue. Nam blandit bibendum massa, vel tincidunt dui dignissim vitae. Nulla facilisi. Nam a pharetra nulla, nec tincidunt leo. Integer sit amet odio eget est pretium porttitor. Ut sit amet turpis eu mi rutrum maximus id dictum ipsum. Vestibulum neque diam, condimentum condimentum hendrerit in, ultrices in justo. Integer hendrerit nisi lacus, id facilisis quam imperdiet eget. Cras nec leo ornare, finibus urna eu, tincidunt risus. Donec non dignissim eros. Nam ut libero dictum, cursus nibh non, lobortis risus. Nulla quis gravida nulla. Nunc nisi justo, dignissim quis imperdiet vel, pretium sed diam.</p>
    </div>
  </li>
  <li>
    <button class="expansion-grid-switch"><span></span></button>
    <div class="expansion-grid-reveal">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pharetra nisl vel interdum sagittis. Suspendisse sed consectetur erat, vitae porttitor massa.</p>
      <p>Mauris tincidunt orci nec sem convallis efficitur. In faucibus rutrum vehicula. Nullam bibendum urna a massa convallis, et pellentesque risus efficitur. Sed rutrum est ut lacinia dapibus. Duis in lectus vitae nisi venenatis tincidunt et id enim. Cras tempus venenatis neque non pharetra. Cras fermentum scelerisque nibh eu suscipit.</p>
    </div>
  </li>
  <li>
    <button class="expansion-grid-switch"><span></span></button>
    <div class="expansion-grid-reveal">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eget sollicitudin tellus. Cras at posuere augue. Ut vitae urna gravida, molestie diam in, sollicitudin augue. Nam blandit bibendum massa, vel tincidunt dui dignissim vitae. Nulla facilisi. Nam a pharetra nulla, nec tincidunt leo. Integer sit amet odio eget est pretium porttitor. Ut sit amet turpis eu mi rutrum maximus id dictum ipsum. Vestibulum neque diam, condimentum condimentum hendrerit in, ultrices in justo. Integer hendrerit nisi lacus, id facilisis quam imperdiet eget. Cras nec leo ornare, finibus urna eu, tincidunt risus. Donec non dignissim eros. Nam ut libero dictum, cursus nibh non, lobortis risus. Nulla quis gravida nulla. Nunc nisi justo, dignissim quis imperdiet vel, pretium sed diam.</p>
    </div>
  </li>
  <li>
    <button class="expansion-grid-switch"><span></span></button>
    <div class="expansion-grid-reveal">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pharetra nisl vel interdum sagittis. Suspendisse sed consectetur erat, vitae porttitor massa.</p>
      <p>Mauris tincidunt orci nec sem convallis efficitur. In faucibus rutrum vehicula. Nullam bibendum urna a massa convallis, et pellentesque risus efficitur. Sed rutrum est ut lacinia dapibus. Duis in lectus vitae nisi venenatis tincidunt et id enim. Cras tempus venenatis neque non pharetra. Cras fermentum scelerisque nibh eu suscipit.</p>
    </div>
  </li>
</ul>

3. Call the expansionGrid() function on the html list and done.

$('.expansion-grid').expansionGrid();

4. Make the window automatically scroll to opened grid item.

$('.expansion-grid').expansionGrid({
  position: true
});

5. Specify the top position in pixels when auto positioning.

$('.expansion-grid').expansionGrid({
  position: true,
  positionOffset: -6
});

Change log:

2016-11-28

• JS cleanup

---

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