pGallery Demo

https://github.com/shapeshifta78/pgallery

by shapeshifta

HTML

<h2>Gallery pins</h2>

<ul id="pins" class="pins"></ul>
<div class="cover">
    <div class="cover__image-area"></div>
</div>

CSS

body {
    background: #f8f8f2;
    padding: 20px;
}

.cover {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 5;
    width: 100%;
    height: 0;
    overflow: hidden;
    transition: opacity .5s ease-out;
    opacity: 0;
}

.cover.active {
    opacity: 1;
    height: 100%;
}

.cover__image-area {
    bottom: 0;
    display: block;
    height: 90%;
    left: 0;
    margin: 0 auto;
    position: absolute;
    right: 0;
    top: 5%;
    width: 340px;
    z-index: 10;
}

.cover__image-area img {
    width: 100%;
}

.pins {
    overflow: hidden;
}

.pins__thumb-img {
    float: left;
    width: 80px;
    height: 110px;
    margin: 0 10px 10px;
    overflow: hidden;
}

JavaScript

(function (factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD. Register as an anonymous module.
        define(['jquery'], factory);
    } else if (typeof module === 'object' && module.exports) {
        // Node/CommonJS
        module.exports = function( root, jQuery ) {
            if ( jQuery === undefined ) {
                if ( typeof window !== 'undefined' ) {
                    jQuery = require('jquery');
                }
                else {
                    jQuery = require('jquery')(root);
                }
            }
            factory(jQuery);
            return jQuery;
        };
    } else {
        // Browser globals
        factory(jQuery);
    }
}(function ($) {
    var pluginName = 'pgallery',
        defaults = {
            userName: 'horster',
            boardName: 'get-fit-or-get-out'
        };

    function Plugin(element, options) {
        this.element = element;
        this.options = $.extend({}, defaults, options);

        this._defaults = defaults;
        this._name = pluginName;

        this.init(this.options);
    }

    Plugin.prototype = {

        init: function(options) {
            options.boardUrl = [
                'https://api.pinterest.com/v3/pidgets/boards/',
                options.userName,
                '/',
                options.boardName,
                '/pins/'
            ].join('');
            this.handleRequest(options);
            this.handleOverlay(options);
        },

        template: function(templateString, data) {
            return templateString.replace(/%(\w*)%/g, function(m, key) {
                return data.hasOwnProperty(key) ? data[key] : "";
            })
        },

        handleRequest: function(options) {
            var that = this,
                request = $.get(options.boardUrl, 'jsonp');

            request.done(function(json) {
                var pins = json.data.pins;

                $.each(pins, function() {
                   ...