Wondering what’s next for npm?Check out our public roadmap! »

    material-photo-gallery

    0.1.1 • Public • Published

    Material Photo Gallery

    A vanilla javascript photo gallery plugin inspired by Google Photos.

    Demo

    View demo

    Install

    NPM

    npm install material-photo-gallery --save-dev
    

    Usage

    var MaterialPhotoGallery = require('material-photo-gallery');
     
    var elem = document.querySelector('.m-p-g');
    var gallery = new MaterialPhotoGallery(elem);

    Include Script

    <script src="material-photo-gallery.min.js"></script>

    Include Stylesheet

    <link rel="stylesheet" href="material-photo-gallery.css" />

    HTML

    <div class="m-p-g">
     
        <div class="m-p-g__thumbs" data-google-image-layout data-max-height="350">
                <img src="http://unsplash.it/600/400?image=198" data-full="http://unsplash.it/1200/800?image=198" class="m-p-g__thumbs-img" />
                <!-- Rest of your thumbnails... -->
        </div>
     
        <div class="m-p-g__fullscreen"></div>
    </div>

    Specify the path to the full size images with the data-full attribute on the thumbnail images.

    Initialize Plugin

    // Select gallery element.
    var elem = document.querySelector('.m-p-g');
     
    // Init gallery
    var gallery = new Gallery(elem);

    Browser Support

    • Latest Edge
    • Latest Chrome
    • Latest Firefox
    • Latest Safari

    Credits

    This project uses imagesLoaded by David DeSandro, and Google Image Layout by ptgamr.

    License

    MIT license.

    Install

    npm i material-photo-gallery

    DownloadsWeekly Downloads

    4

    Version

    0.1.1

    License

    MIT

    Last publish

    Collaborators

    • avatar