Elgg
Version 5.0
|
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 &¤tOpts.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... | |
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 &¤tOpts.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}',
In a plugin, override this view and override the registration for the lightbox JavaScript and CSS (
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 &¤tOpts.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 |
Bind colorbox lightbox click to HTML
{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() |
Open the colorbox
{object} | opts Colorbox options |
Close the colorbox
Resizes the colorbox