Grand Pack
Quick Start
Grand Pack includes 34 ready to use templates. You don't need to do much when you going to use one of them:
- Choose the template from Grand Pack.
- Copy html code from one of examples, add it to your page.
- Check that the structure of your JSON source is similar to the structure of the json file of the template.
- Add some changes to css.
- Add some changes to javascript.
How to change css
Every template has one or more css files, which located in the 'css' folder of the template folder.
One file has the same name as the template itself (the main css file). Other files, if any, have a suffix '-colors' in their names.
If you are going to change font size, font family, or other general css properties, you should change the main file.
If the template has one or more color files, these files contain color schemes. You can find there all color properties. The main file will contain the 'black-and-white' scheme.
If there is no 'color files' for the template, all css 'color properties' can be found in the main file.
You'd better not modify template css files. Create your own css file instead where you can override css properties.
How to choose a color scheme.
Some templates have color schemes. To enable them:
-
inclide an appropriate css file in your <head> section of the page
<link rel="stylesheet" href="../grand-pack/flip/bright/css/bright-colors.min.css"> -
Choose the color scheme. There are 30 color schemes in every css file with a suffix '-colors'.
You can apply a color scheme to every item in the grid or to the grid itself.
-
Apply the color scheme by using an appropriate css class.
If you want all items to have the single color scheme, you should add the scheme class to the root element of the grid:
<!--add the color class to the root element--> <div id="container" style="visibility:hidden" class="mmg-color-12"></div>If you want every item to have its own scheme you should do the same way as was done in the example of the template: you should specify in your json file the appropriate value for every 'classList' key.
{ "classList": "mmg-color-0", "href":"assets/img/pic1.jpg", "src":"assets/img/ikon1.jpg", "face":{ "title":"Your Title", "descr": "Your decribtion can be placed here" } }, { "classList": "mmg-color-12", "href":"assets/img/pic2.jpg", "src":"assets/img/ikon2.jpg", "face":{ "title":"Your Title", "descr": "Your decribtion can be placed here" } }
To disable colorscheme you chould remove 'classList' from your JSON.
What options can I change?
Let's take an example:
grid = new MMG.Grid.Grid({ //the new grid instance is created
retina: 2, //the Retina mode is switched on
grid: '#container', // the root element
url: 'assets/json/creative.json', //the JSON file
templateName: 'Creative', //the template name
twin: true, // the twin mode is switched on
gridClass: 'creative', //this class is added to the root element
canvasFilters: [['grayscale']], // the canvas filter array
svgFiltersId: 'grayscale', //the ID of the SVG filter
oldIEFilter: 'css', //the filter mode for IE8, IE9
lightbox: {
retina: true //the Retina mode is switched on for the lightbox
}
});Here is a typical javascript code that you can meet in many examples of template usage.
You must now that some options are not changeable without a damage for the template:
You can't disable 'twin' mode, for instance. You shouldn't change: 'grid', 'templateName', 'gridClass' options, if you don't want to change the template itself.
But you can modify other options. For example, you can change a size of images by defining the 'height' option, or you can modify a 'margin' option.
If you don't have images prepared for Retina, you can disable the 'Retina' mode.
You can change lightbox settings, or you can disable the lightbox at all.
You can do something with filters: you can use 'sepia' instead of 'grayscale', for instance.
Can I change the structure of the json file?
No you can not. You must use the same structure, as in the example.
If you can't change your JSON file and your JSON file structure is different, you should change the template itself.
Yes, you can!
From ver.2.5 you can use jsonParser function to change your own json schema.
How can I load more images by AJAX
Define a counter variable and increment it every time you are clicking on the 'load' button:
$(document).ready(function() {
var MMG, grid;
MMG = window.MMG;
var options = {
retina: 2,
grid: '#container',
url: 'assets/json/light1.json',
lightbox: {
retina: true
}
};
grid = MMG.Gallery('Light', options);
var pager = 2; //the counter
$('#load a').click(function() {
//new url for every ajax request: light2.json, light3.json
var url = 'assets/json/light'+pager+'.json';
var lastItem = $('.mmg-img').last();
var top = lastItem.offset().top;
grid.loadByAjax(url);
pager++;
//If we don't need this button anymore:
if(pager === 4) $(this).remove();
});
});
See example
If you use PHP to generate JSON:
$(document).ready(function() {
var MMG, grid;
MMG = window.MMG;
var options = {
retina: 2,
grid: '#container',
url: 'assets/json/light1.json',
lightbox: {
retina: true //the Retina mode is switched on for the lightbox
}
};
grid = MMG.Gallery('Light', options);
var pager = 2; //the counter
$('#load a').click(function() {
// a data object that must be converted to string
// and than be appended to the url:
var data = {
page: pager
};
// 3 arguments!
grid.loadByAjax('json.php', data, 'json');
pager++;
//If we don't need this button anymore:
if(pager === 4) $(this).remove();
});
});
Can I use html markup for building the grid?
Yes you can. You need define a parser function for this.
$(document).ready(function () {
var MMG, grid, parser;
MMG = window.MMG; //a global variable
/**
* the parser function for this grid
* @param {jQuery Object} root
* @returns {Object}
*/
parser = function(root) {
var NS, data;
data = [];
NS = this.meta.NS;
$('.mmg-img', root.get(0)).each(function(i, item) {
var elem, icon;
icon = $('.mmg-icon', item);
elem = {};
elem.face = {};
$(item).removeClass('mmg-img');
elem.classList = $(item).attr('class');
elem.src = $(icon).attr('src');
elem.href = $('.mmg-link', item).attr('href');
elem.title = $('.mmg-title', item).text();
elem.rightDescription = $('.mmg-descr-r', item).text();
elem.leftDescription = $('.mmg-descr-l', item).text();
elem.topDescription = $('.mmg-descr-t', item).text();
elem.bottomDescription = $('.mmg-descr-b', item).text();
data.push(elem);
});
root.empty(); // empties the container. Do not forget!
return data;
}
grid = new MMG.Grid.Grid({ //the new grid instance is created
retina: 2, //the Retina mode is switched on
grid: '#container', // the root element
templateName: 'Summer', //the template name
gridClass: 'summer', //this class is added to the root element
lightbox: {
retina: true //the Retina mode is switched on for the lightbox
},
parser: parser // the parser function
});
$('#load a').click(function () {
// loads new HTML file and adds new rows to the grid
grid.loadByAjax('assets/html/summer.html', {}, 'html');
});
});See the fool example here
Remember, that your parser function should return an object, which must have the same structure as the JSON file for the template!
Can I use an object for building the grid?
Yes you can. Your object must have the same structure as the JSON file for the template.
Can I make some changes in the template?
Yes you can.
The template object has the following structure:
// The general template object
MMG.Templates.Name = {};
// It contains a string of template markup
MMG.Templates.Name.template = "";
// and a callback function
MMG.Templates.Name.callback = function(){};
// The template object for mobile devices. Can be undefined.
MMG.Templates.mobile.Name = {};
MMG.Templates.mobile.Name.template = "";
MMG.Templates.mobile.Name.callback = function(){};
// The template object for IE9 and IE8. Can be undefined.
MMG.Templates.ie9.Name = {};
MMG.Templates.ie9.Name.template = "";
MMG.Templates.ie9.Name.callback = function(){};
// The template object for IE8. Can be undefined.
MMG.Templates.ie8.Name = {};
MMG.Templates.ie8.Name.template = "";
MMG.Templates.ie8.Name.callback = function(){};
You can override every element of this structure.
example
$(document).ready(function() {
var MMG, grid;
MMG = window.MMG; //a global variable
/*
let's add the special object fo mobile devices
to the 'Wind' template of Grand Pack
*/
MMG.Templates.Wind.mobile = {};
// this template overrides the general template
// I took MMG.Templates.Wind.ie8.template as a base
MMG.Templates.Wind.mobile.template =
"<div class='<%=meta.NS %>-img <%= data.classList %>' data-image-id='<%= imageId %>'>"+
"<a class='<%=meta.NS %>-link' href='<%= data.href %>'>"+
"<div class='<%=meta.NS %>-icon-wrapper <%=meta.NS %>-fs'>"+
"<div class='<%=meta.NS %>-icon-container <%=meta.NS %>-fs'>"+
"<img class='<%=meta.NS %>-icon <%=meta.NS %>-fs' src='<%= data.src %>'>"+
"</div>"+
"<div class='<%=meta.NS %>-icon-bg'></div>"+
"</div>"+
"<div class='<%=meta.NS %>-caption-wrapper'>"+
"<span></span>"+
"<div class='<%=meta.NS %>-f-caption'>"+
"<div class='<%=meta.NS %>-descr-t'><%= data.topDescription %></div>"+
"<h3 class='<%=meta.NS %>-title'><%= data.title %></h3>"+
"<div class='<%=meta.NS %>-descr-b'><%= data.bottomDescription %></div>"+
"</div>"+
"</div>"+
"</a>"+
"<%= lightbox %>"+
"</div>";
// We must override MMG.Templates.Wind.callback
MMG.Templates.Wind.mobile.callback = function(){}
grid = new MMG.Grid.Grid({ //the new grid instance is created
retina: 2, //the Retina mode is switched on
grid: '#container', // the root element
url: 'assets/json/good.json', //the JSON file
margin: 4, // margin-bottom and margin-right
canvasFilters: [['grayscale']], // the canvas filter array
twin: true, // the twin mode is switched on
svgFiltersId: 'grayscale', //the ID of the SVG filter
templateName: 'Wind', //the template name
gridClass: 'wind', //this class is added to the root element
oldIEFilter: 'css', //the filter mode for IE8, IE9
lightbox: {
retina: true //the Retina mode is switched on for the lightbox
}
});
$('#load a').click(function() {
// loads new JSON file and adds new rows to the grid
grid.loadByAjax('assets/json/good.json');
});
});See the fool example here
What to do if I want to create a custom template?
See this article.
How can I use other lightboxes
You can choose ColorBox, PrettyPhoto or PhotoSwipe by using the getExternalLightbox public method that gives a developer a simple way to integrate these lightboxes with Moon Mega Grid.
See getExternalLightbox for a description of the method and parameters
See Examples:
Colorbox example, PrettyPhoto example, Photoswipe example
The getExternalLightbox method is a factory fanction, that hides the code of integration under the hood.
If you need to integrate these lightboxes but you don't want to use the getExternalLightbox method, see these examples: