JQuery: making a masonry gallery for free

JQuery: making a masonry gallery for free

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:

  1. Download Free Pack
  2. Upload moon-gallery folder to your server
  3. 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>
    
  4. 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>
    
  5. 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"
      }
    ]
    
    
  6. 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.

 

See Demo

See on GitHub

 

 

 

Please follow and like us:

About Alexandre Kremlianski

Scala / Scala.js / JavaScript programmer

Page with Comments

Leave a Reply

Your email address will not be published. Required fields are marked *