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.
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:
Of course, you can switch off Retina mode at all.
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:
Because of that you can place up to several thousands images on one page even while using devices with Retina screen and photo filters.
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.
Moon Mega Grid has his own lightbox with novel animation and great possibilities for customization. It works well in all modern browsers (Internet Explorer from IE8) and mobile devices. It has very simple interface (the 'close' button is absent).
Nevertheless, if you don't like it, you can use PhotoSwipe or ColorBox instead.
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.
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.
There are 3 ways to load data:
Since this program stores all information in the special object (not in markup), first two ways are preferable.
But you can define the parser for your html-markup if you need.
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.
