Google Style Expanding Thumbnail Grid Plugin With jQuery - Mg-Space

Mg-Space is a jQuery plugin to create a responsive photo gallery that allows to open an expanding thumbnail grid when clicking on an image like an accordion. Inspired by Google Images Search.

How to use it:

1. Import the jQuery Mg-Space plugin's JavaScript and Stylesheet into your html document.

<link rel="stylesheet" href="mg-space.css">
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery.mg-space.js"></script>

2. Place your images and thumbnails in straight rows as follows:

<div class="mg-space-init">
  <div class="mg-rows row">
      <div class="xs-6 sm-4 lg-3">
          <a href="#" title="MG Row" class="mg-trigger">
          <img class="img-responsive" src="1.jpg" alt=""></a>
      </div>
      <div class="xs-6 sm-4 lg-3">
          <a href="#" title="MG Row" class="mg-trigger">
          <img class="img-responsive" src="2.jpg" alt=""></a>
      </div>
      <div class="xs-6 sm-4 lg-3">
          <a href="#" title="MG Row" class="mg-trigger">
          <img class="img-responsive" src="3.jpg" alt=""></a>
      </div>
  </div>
  <div class="mg-targets row">
      <div class="">
          <div class="container">
              <div class="row row-flex">
                  <div class="xs-6 sm-3 lg-3 demo-item">
                      <img src="thumb-1.jpg" alt="Content">
                      <span>Lorem ipsum dolor sit amet.</span>
                  </div>
                  <div class="xs-6 sm-3 lg-3 demo-item">
                      <img src="thumb-2.jpg" alt="Content">
                      <span>Lorem ipsum dolor sit amet.</span>
                  </div>
                  <div class="xs-6 sm-3 lg-3 demo-item">
                      <img src="thumb-3.jpg" alt="Content">
                      <span>Lorem ipsum dolor sit amet.</span>
                  </div>
              </div>
          </div>
      </div>
      <div class="">
          <div class="container">
              <div class="row row-flex">
                  <div class="xs-6 sm-3 lg-3 demo-item">
                      <img src="thumb-1.jpg" alt="Content">
                      <span>Lorem ipsum dolor sit amet.</span>
                  </div>
                  <div class="xs-6 sm-3 lg-3 demo-item">
                      <img src="thumb-2.jpg" alt="Content">
                      <span>Lorem ipsum dolor sit amet.</span>
                  </div>
                  <div class="xs-6 sm-3 lg-3 demo-item">
                      <img src="thumb-3.jpg" alt="Content">
                      <span>Lorem ipsum dolor sit amet.</span>
                  </div>
              </div>
          </div>
      </div>
      <div class="">
          <div class="container">
              <div class="row row-flex">
                  <div class="xs-6 sm-3 lg-3 demo-item">
                      <img src="thumb-1.jpg" alt="Content">
                      <span>Lorem ipsum dolor sit amet.</span>
                  </div>
                  <div class="xs-6 sm-3 lg-3 demo-item">
                      <img src="thumb-2.jpg" alt="Content">
                      <span>Lorem ipsum dolor sit amet.</span>
                  </div>
                  <div class="xs-6 sm-3 lg-3 demo-item">
                      <img src="thumb-3.jpg" alt="Content">
                      <span>Lorem ipsum dolor sit amet.</span>
                  </div>
              </div>
          </div>
      </div>
      
  </div>
</div>

3. Initialize the gallery by calling the function on the top container.

$('.mg-space-init').mgSpace();

4. Default plugin options.

$('.mg-space-init').mgSpace({
  // Breakpoints at which the accordian changes # of columns
  breakpointColumns: [
      {
          breakpoint: 0,
          column: 1
      },
      {
          breakpoint: 568,
          column: 2
      },
      {
          breakpoint: 768,
          column: 3
      },
      {
          breakpoint: 1200,
          column: 4
      }
  ],

  // Default selectors
  rowWrapper: ".mg-rows",
  row: ".mg-row",
  targetWrapper: ".mg-targets",
  target: ".mg-target",
  trigger: ".mg-trigger",
  close: ".mg-close",

  // Default target padding top/bottom and row bottom margin
  rowMargin: 25, // Set to zero for gridless
  targetPadding: 120, // Padding top/bottom inside target gets divided by 2

  useHash: false, // Set to true for history
  useOnpageHash: false, // Set true for onpage history
  hashTitle: "#/item-", // Must include `#` hash symbol

  // MISC          
  useIndicator: true
  
});

5. Events.

$('.mg-space-init').on('beforeChange', function(event, mgSpace, trigger, rowItem){
  //$(rowItem).addClass('event-fired');
  console.log('Fire Before Everything');
});

$('.mg-space-init').on('afterChange', function(event, mgSpace, trigger, rowItem){
  //$(rowItem).addClass('event-fired').siblings().removeClass('event-fired');
  console.log('Fire After Everything');
});        

$('.mg-space-init').on('beforeOpenRow', function(event, mgSpace, rowItem){
  console.log('Fire Before Open Row');
});

$('.mg-space-init').on('afterOpenRow', function(event, mgSpace, rowItem){
  console.log('Fire After Open Row');
});

Change log:

2018-04-21

• JS update

2016-11-10

• minor code fix

---

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