hypejunction/elgg_lightbox

Enhanced lightbox for Elgg

Installs: 83

Dependents: 0

Suggesters: 0

Stars: 1

Watchers: 1

Forks: 1

Open Issues: 0

Language:JavaScript

Type:elgg-plugin

2.1.2 2016-04-26 15:07 UTC

README

Elgg 2.0

Lightbox component for Elgg

Features

  • Converts lightbox to AMD module
  • Custom imageless theme

Lightbox

Usage

As an AMD module:

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.

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

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

Notes

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