Moon Mega Grid plus Grand Pack

Moon Mega Grid plus Grand Pack

Create your unique artistic spectacular gallery for your photos with variety of beautiful animated hover effects, using templates and examples, color schemes, svg and canvas photo filters and other tools!

Masonry grid jQuery plugin

is a multipurpose horizontal masonry grid building solution:

  • low-level suport of Flickr API
  • strong memory saving algorithm
  • perfect for mobile devices
  • templating tools with many options
  • 2 retina modes
  • built-in lightbox with retina support
  • high-level support of PhotoSwipe, ColorBox, PrettyPhoto
  • works either with json or html formats (custom parsers)
  • integrated support for canvas and svg filters

Horisontal masonry gallery (grid) templates

is a collection of 34 beautiful templates:

  • beautiful unique design
  • greyscale and sepia effects
  • spectacular animated hover effects
  • mouse hover effect simulation for mobile devices
  • separated code for every template (coffeescript/javascript, less/css)
  • more than 100 well-commented examples

Best for Mobile Devices

Masonry grid for Mobile Devices

Hover effect simulation

Usually there are two ways for arranging ‘hover’ effect on mobile devices: you can ignore it (first) or you can use buttons (second).

I suggest the third way: simulation of a ‘hover’ effect after the first touching an icon. After the second touching a ‘click’ event is simulated.

This approach is fully realized in the Grand Pack.

Of course, You can abandon this approach by simplifying of an appropriate template.

Separate templates

It is obvious, that the grid opened on mobile devices will differ from the grid opened on the PC. So Moon Mega Grid gives the possibility to make different templates for PC and for mobile devices.


Due to memory optimization Moon Mega Grid gives the possibility to show up to several thousand items on one page. Even if you have thousand items on your device, crash is hardly to happen if you rotated the screen and the view was rebuilt.


There are 2 Retina modes:

  1. The width and the height of the item will be a half of the native sizes, regardless whether the device has got Retina screen or not.
  2. If your device doesn’t have Retina screen the src will stay unchanged. But if it is a Retina device, the src attribute will be changed and ’@2x’ suffix will be inserted before the file extension.

Of course, you can switch off Retina mode at all.

Strong Memory Optimization

Masonry grid with Strong Memory Optimization

Usually grids eat resources. There are a lot of DOM elements. Thera are heavy images.

Moon Mega Grid is based on principles, which allow minimize the mentioned above effects:

  • All information is not stored in DOM-structure but in the special object.
  • All items which are not on the screen at the moment are removed from the DOM.

Because of that you can place up to several thousands images on one page even while using devices with Retina screen and photo filters.

Grand Pack: 34 artistic templates

34 artistic templates for masonry grid (inage gallery)

It is an unprecedented set of wonderful templates with original animated captions.

Every template has been tested on various mobile devices and simulates the ‘hover’ effect for them.

Many templates give possibility to choose a color schema.

Every template is stored in its own folder with coffeescript, javascript, less and css files. So it’s easy to create custom template on the base of existing one.

Photo Filters

Photo Filters with Masonry Grid (gallery)

All SVG-filters are supported. They will add artistry to your page.

Moon Mega Grid has its own small library for canvas filtering.

The list of supported canvas filters: grayscale, sepia, colorize, contrast, saturate, vibrance, noise, brightness.

You can use combination of canvas filters.

In most circumstances SVG-filters are preferable because they are faster.

From the other side, canvas filters works well on old versions of Android. IE8, IE9 support them too.

You can set Moon Mega Grid to use SVG-filters in browsers which support SVG-filters. Otherwise the browser will use canvas filters.

There is another possibility for IE8, IE9: you can use native MS-filters.

Templating Tools

You can create your own templates or modify templates from Grand Pack.

Template object includes a markup string and a callback function.

It can include additional objects of templates for mobile devices, IE9 and IE8, IE8.

The template tool is based on the Underscore.js template function.

Custom templates can be stored in separate files.

Code Quality

Initially the whole script was written on CoffeeScript that guarantees a high level of code quality.

Source files include CoffeeScript files, structured by classes, as well as less files and css files.

If you don’t like CoffeScript, you will find the uncompressed javascript bundle file.

Every template of the Grand Pack has its own folder.

Masonry grid (gallery) with Flickr support

Change log

22 July, 2016

Moon Mega Grid v2.8:

  • new possibility to add custom swipe parameters to the lightbox
  • added the loader object that lets developers to observe the process of images loading
  • fixed a bug in ie8 for the lightbox
29 June, 2016

Moon Mega Grid v2.7:

  • Added new functionality to the LightboxSwipe class
23 June, 2016

Moon Mega Grid v2.6:

  • Added the new functionality to the LightboxSwipe class
  • Fixed some bugs
9 June, 2016

Moon Mega Grid v2.5:

  • Added the new LightboxSwipe class
  • Fixed some bugs

Grand Pack v1.4: Made changes in accordance with new Moon Mega Grid ver. 2.5

6 May, 2016

Moon Mega Grid v2.4:

  • Fixed a bug in the Lightbox
  • Added the ‘jsonParser’ callback function
  • Added 5 examples of low-level integration with Flickr API

Grand Pack v1.3: Fixed a bug in the Light template

19 April, 2016

Moon Mega Grid v2.3:

  • Added high-level support for ColorBox, PrettyBox, PhotoSwipe
  • Added some changes into the built-in lightbox
  • Added the ‘afterLoad’ event
  • Added the public ‘getExternalLightbox’ method
4 April, 2016

Moon Mega Grid v2.2: Bug fixed. New example.

31 March, 2016

Moon Mega Grid v2.1: The factory function was added that can be used instead of the constructor

Grand Pack v1.2: All templates have been changed to add this new functionality

5 February, 2016

Grand Pack v1.2: fixed the bug in Windows 10