lightbox.js File Reference

Go to the source code of this file.

Functions
	define (['jquery', 'elgg', 'elgg/Ajax', 'elgg/hooks', 'jquery.colorbox'], function($, elgg, Ajax, hooks){var lightbox={getOptions:function(opts){if(!$.isPlainObject(opts)){opts={};}var defaults=elgg.data.lightbox;if(!defaults.reposition){defaults.reposition=$(window).height() > 600;}var settings=$.extend({}, defaults, opts);return hooks.trigger('getOptions', 'ui.lightbox', null, settings);}, bind:function(selector, opts, use_element_data){if(!$.isPlainObject(opts)){opts={};}if(use_element_data===false){$(selector).colorbox(lightbox.getOptions(opts));return;}$(document).off('click.lightbox', selector).on('click.lightbox', selector, function(e){$(document).click();$('.elgg-system-messages.elgg-message').remove();e.preventDefault();var $this=$(this), href=$this.prop('href')||$this.prop('src'), dataOpts=$this.data('colorboxOpts'), currentOpts={};if(!$.isPlainObject(dataOpts)){dataOpts={};}if(!dataOpts.href &&href){dataOpts.href=href;}$.extend(currentOpts, opts, dataOpts);if(currentOpts.inline &&currentOpts.href){currentOpts.href=elgg.getSelectorFromUrlFragment(currentOpts.href);}if(currentOpts.photo||currentOpts.inline||currentOpts.iframe||currentOpts.html){lightbox.open(currentOpts);return;}currentOpts.ajaxLoadWithDependencies=true;lightbox.open(currentOpts);});$(window).off('resize.lightbox').on('resize.lightbox', function(){elgg.data.lightbox.reposition=$(window).height() > 600;lightbox.resize();});}, open:function(opts){var currentOpts=lightbox.getOptions(opts);if(!currentOpts.ajaxLoadWithDependencies){$.colorbox(currentOpts);return;}var href=currentOpts.href;currentOpts.href=false;var data=currentOpts.data;currentOpts.data=undefined;$.colorbox(currentOpts);var ajax=new Ajax(false);ajax.path(href,{data:data}).done(function(output){currentOpts.html=output;$.colorbox(currentOpts);currentOpts.html=undefined;});}, close:$.colorbox.close, resize:$.colorbox.resize};lightbox.bind(".elgg-lightbox");lightbox.bind(".elgg-lightbox-photo",{photo:true});lightbox.bind(".elgg-lightbox-inline",{inline:true});lightbox.bind(".elgg-lightbox-iframe",{iframe:true});return lightbox;})
	Lightbox module. More...

Function Documentation

define

(

function($, elgg, Ajax, hooks){var lightbox={getOptions:function(opts){if(!$.isPlainObject(opts)){opts={};}var defaults=elgg.data.lightbox;if(!defaults.reposition){defaults.reposition=$(window).height() > 600;}var settings=$.extend({}, defaults, opts);return hooks.trigger('getOptions', 'ui.lightbox', null, settings);}, bind:function(selector, opts, use_element_data){if(!$.isPlainObject(opts)){opts={};}if(use_element_data===false){$(selector).colorbox(lightbox.getOptions(opts));return;}$(document).off('click.lightbox', selector).on('click.lightbox', selector, function(e){$(document).click();$('.elgg-system-messages.elgg-message').remove();e.preventDefault();var $this=$(this), href=$this.prop('href')||$this.prop('src'), dataOpts=$this.data('colorboxOpts'), currentOpts={};if(!$.isPlainObject(dataOpts)){dataOpts={};}if(!dataOpts.href &&href){dataOpts.href=href;}$.extend(currentOpts, opts, dataOpts);if(currentOpts.inline &&currentOpts.href){currentOpts.href=elgg.getSelectorFromUrlFragment(currentOpts.href);}if(currentOpts.photo||currentOpts.inline||currentOpts.iframe||currentOpts.html){lightbox.open(currentOpts);return;}currentOpts.ajaxLoadWithDependencies=true;lightbox.open(currentOpts);});$(window).off('resize.lightbox').on('resize.lightbox', function(){elgg.data.lightbox.reposition=$(window).height() > 600;lightbox.resize();});}, open:function(opts){var currentOpts=lightbox.getOptions(opts);if(!currentOpts.ajaxLoadWithDependencies){$.colorbox(currentOpts);return;}var href=currentOpts.href;currentOpts.href=false;var data=currentOpts.data;currentOpts.data=undefined;$.colorbox(currentOpts);var ajax=new Ajax(false);ajax.path(href,{data:data}).done(function(output){currentOpts.html=output;$.colorbox(currentOpts);currentOpts.html=undefined;});}, close:$.colorbox.close, resize:$.colorbox.resize};lightbox.bind(".elgg-lightbox");lightbox.bind(".elgg-lightbox-photo",{photo:true});lightbox.bind(".elgg-lightbox-inline",{inline:true});lightbox.bind(".elgg-lightbox-iframe",{iframe:true});return lightbox;}

)

Lightbox module.

Elgg is distributed with the Colorbox jQuery library. Please go to http://www.jacklmoore.com/colorbox for more information on the options of this lightbox.

Use .elgg-lightbox or .elgg-lightbox-photo class on your anchor element to bind it to a lightbox.

You may apply colorbox options to an individual .elgg-lightbox element by setting the attribute data-colorbox-opts to a JSON settings object. You can use "getOptions", "ui.lightbox" plugin hook to filter options before they are passed to $.colorbox().

To support a hidden div as the source, add "inline: true" as a data-colorbox-opts option. For example, using the output/url view, add: 'data-colorbox-opts' => '{"inline": true}',

Overriding with a different lightbox

In a plugin, override this view and override the registration for the lightbox JavaScript and CSS (

See also

elgg_views_boot()).

Parameters

function($,elgg,Ajax,hooks){var

lightbox={getOptions:function(opts){if(!$.isPlainObject(opts)){opts={};}var defaults=elgg.data.lightbox;if(!defaults.reposition){defaults.reposition=.height() > 600;}var settings=$.extend({}, defaults, opts);return hooks.trigger('getOptions', 'ui.lightbox', null, settings);}, bind:function(selector, opts, use_element_data){if(!$.isPlainObject(opts)){opts={};}if(use_element_data===false){.colorbox(lightbox.getOptions(opts));return;}.off('click.lightbox', selector).on('click.lightbox', selector, function(e){.click();$('.elgg-system-messages.elgg-message').remove();e.preventDefault();var $this=, href=$this.prop('href')||$this.prop('src'), dataOpts=$this.data('colorboxOpts'), currentOpts={};if(!$.isPlainObject(dataOpts)){dataOpts={};}if(!dataOpts.href &&href){dataOpts.href=href;}$.extend(currentOpts, opts, dataOpts);if(currentOpts.inline &&currentOpts.href){currentOpts.href=elgg.getSelectorFromUrlFragment(currentOpts.href);}if(currentOpts.photo||currentOpts.inline||currentOpts.iframe||currentOpts.html){lightbox.open(currentOpts);return;}currentOpts.ajaxLoadWithDependencies=true;lightbox.open(currentOpts);});.off('resize.lightbox').on('resize.lightbox', function(){elgg.data.lightbox.reposition=.height() > 600;lightbox.resize();});}, open:function(opts){var currentOpts=lightbox.getOptions(opts);if(!currentOpts.ajaxLoadWithDependencies){$.colorbox(currentOpts);return;}var href=currentOpts.href;currentOpts.href=false;var data=currentOpts.data;currentOpts.data=undefined;$.colorbox(currentOpts);var ajax=new Ajax(false);ajax.path(href,{data:data}).done(function(output){currentOpts.html=output;$.colorbox(currentOpts);currentOpts.html=undefined;});}, close:$.colorbox.close, resize:$.colorbox.resize};lightbox.bind(".elgg-lightbox");lightbox.bind(".elgg-lightbox-photo",{photo:true});lightbox.bind(".elgg-lightbox-inline",{inline:true});lightbox.bind(".elgg-lightbox-iframe",{iframe:true});return lightbox;} Returns lightbox settings

{Object}

opts Additional options

Returns

{Object}

Bind colorbox lightbox click to HTML

Parameters

{Object}	selector CSS selector matching colorbox openers
{Object}	opts Colorbox options. These are overridden by data-colorbox-opts options
{Boolean}	use_element_data If set to false, selector will be bound directly as .colorbox()

Returns

void

Open the colorbox

Parameters

{object}

opts Colorbox options

Returns

void

Close the colorbox

Returns

void

Resizes the colorbox

Returns

void