JQuery: making a masonry gallery for free
When you want to make a photo gallery you will likely find the Moon Mega Grid Plugin among others. It’s a great tool for building galleries with a bulk of templates and settings. But it’s not free.
Fortunately, there is a free version of this plugin: the Moon Gallery. It has the same functionality. But there are only two simple templates in the Free Pack. If you need something special you ought to create a template by yourself.
Features
- integrated support for canvas and svg filters
- perfect for mobile devices
- simple templating tools
- built-in lightbox with retina support
- 2 retina modes
- memory saving algorithm
- works either with json or html formats (custom parsers)
Quick Start
It’s very simple to make your first gallery using this plugin:
- Download Free Pack
- Upload moon-gallery folder to your server
- Include all dependencies to your
<head>section of the page:<link rel="stylesheet" href="moon-gallery/dest/css/mmg.css"> <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <script type="text/javascript" src="moon-gallery/lib/jquery.scrollstop.min.js"></script> <script type="text/javascript" src="moon-gallery/lib/underscore-min.js"></script> <script type="text/javascript" src="moon-gallery/dest/js/moon-mega-grid.min.js"></script> - If you use a Template, add it too:
<link rel="stylesheet" href="moon-gallery/templates/classica.min.css"> <script type="text/javascript" src="moon-gallery/templates/classica.min.js"></script> - Prepare a JSON file that describes your gallery:
[ { "src":"assets/img/ikon1.jpg", "href":"assets/img/pic1.jpg", "title":"Your Title", "description": "Your decription can be placed here" }, ..... { "src":"assets/img/ikon2.jpg", "title":"Your Title", "href":"assets/img/pic2.jpg", "description": "Your decription can be placed here" } ] - Create new Grid instance in your script:
$(document).ready(function() { var MMG; MMG = window.MMG; MMG.Gallery('Classica', { grid: '#container', url: 'assets/simple.json', lightbox: { swipe: true } }); });
Of course, it’s the simplest sample of usage of this plugin. But it demonstrates how easy you can make a gallery with lightbox.
Page with Comments