hypejunction/elgg_lightbox

Enhanced lightbox for Elgg

Lightbox for Elgg

, _(*1)

Lightbox component for Elgg, _(*2)

Features

• Converts lightbox to AMD module
• Custom imageless theme

, _(*3)

Usage

As an AMD module:, _(*4)

define(function(require) {
    var lightbox = require('elgg/lightbox');
    var spinner = require('elgg/spinner');

    lightbox.open({
        html: '<p>You are welcome</p>',
        onClosed: function() {
            lightbox.open({
                onLoad: spinner.start,
                onComplete: spinner.stop,
                photo: true,
                href: 'https://www.petfinder.com/wp-content/uploads/2012/11/122163343-conditioning-dog-loud-noises-632x475.jpg',
            });
        }
    });
});

You can also add .elgg-lightbox or .elgg-lightbox-photo class to your HTML elements (with a href or src) attribute. Additional parameters can be passed with data-colorbox-opts as a json_encoded object., _(*5)

Note that for the rel options to take effect, you will need to call a colorbox on a selector, e.g., _(*6)

require(['elgg/lightbox'], function() {
    $('.elgg-lightbox-photo').colorbox({photo: true});
});

Notes

• This drop elgg.ui.lightbox namespace. Use AMD module instead.