Google Style Expanding Thumbnail Grid Plugin With jQuery - Mg-Space
File Size: | 59.7 KB |
---|---|
Views Total: | 12776 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.