Naughty Programmer's Madness

    grid-gallery

    2.0.1 • Public • Published

    grid-gallery

    JavaScript grid gallery to produce un-equal cols grid

    Build Status Coverage Status Dependency Status devDependency Status

    Installation:

    1. via npm grid gallery can be used via CommonJS or AMD after installation via npm.

      $ npm install --save grid-gallery
      
    2. bower

      $ bower install --save grid-gallery
      

    usage:

    the container must have grid-gallery class and the grid items grid-gallery__item

    in browser

      <link rel="stylesheet" href="path/to/grid-gallery/dist/css/grid-gallery.min.css">
      ...
      <!-- grid container -->
      <div id="container" class="grid-gallery">
        <!-- grid item -->
        <div class="grid-gallery__item">
          <div>
            <!-- some content -->
          </div>
        </div>
     
        <!-- grid item -->
        <div class="grid-gallery__item">
          <div>
            <!-- some content -->
          </div>
        </div>
        ....
      </div>
     
      ...
      <script src="path/to/grid-gallery/dist/js/grid-gallery.js"></script> 

    CJs

      var GridGallery = require('grid-gallery');
      var options = { ... }
     
      var myGrid = new GridGallery(document.getElementById('container'), options);

    ES6

      import GridGallery from 'grid-gallery';
     
      var options = { ... }
      var myGrid = new GridGallery(document.getElementById('container'), options);

    AMD

        require(['grid-gallery'], (GridGallery) => {
          var options = { ... }
          var myGrid = new GridGallery(document.getElementById('container'), options);
        })

    options:

    var options = {
      direction: 'right', // left is default for ltr and right for rtl.
      watch: true,        // false by default, and if set to true
                          // it will watch DOM changes
                          // and update positions if grid item inserted/removed
     
      // callbacks
      onInitialize:  () => { ... }, // called before init.
      onInitialized: () => { ... }, // called after init.
      onUpdate:      () => { ... }, // called before update after 'resize' event as example.
      onUpdated:     () => { ... }, // called after updated.
      onPosition:    () => { ... }, // called before setting position of grid items
      onPositioned:  () => { ... }, // called after positioning the grid items
    }

    methods

    1. update it will reposition the grid items
    2. destroy it will clear the positions, reset all options and remove event handlers.

    Install

    npm i grid-gallery

    DownloadsWeekly Downloads

    3

    Version

    2.0.1

    License

    MIT

    Last publish

    Collaborators

    • pencilpix