fix(lightbox): Correctly applies color box options on each element

Whatever colorbox options were on the data- attribute of the first element
get copied to all the other elements. This fixes that.

Fixes #6107

views/default/js/lightbox.php

@@ -46,8 +46,7 @@ function registerDeprecationError() {
 		elgg.register_error("fancybox lightbox has been replaced by colorbox", 9999999999999);
 	}
 
-	$.extend($.colorbox.settings, elgg.ui.lightbox.getSettings());
-	elgg.ui.lightbox.bind($(".elgg-lightbox"));
+	elgg.ui.lightbox.bind(".elgg-lightbox");
 
 	if (typeof $.fancybox === 'undefined') {
 		$.fancybox = {
@@ -71,26 +70,30 @@ function registerDeprecationError() {
 };
 
 /**
- * Bind colorbox lightbox to HTML
+ * Bind colorbox lightbox click to HTML
  *
- * @param {Object} $element jQuery object containing colorbox openers
+ * @param {Object} selector CSS selector matching colorbox openers
  * @param {Object} opts     Colorbox options. These are overridden by data-colorbox-opts options
  */
-elgg.ui.lightbox.bind = function ($element, opts) {
+elgg.ui.lightbox.bind = function (selector, opts) {
 	if (!$.isPlainObject(opts)) {
 		opts = {};
 	}
 
-	$element.live('click', function(e) {
+	// merge opts into defaults
+	opts = $.extend({}, elgg.ui.lightbox.getSettings(), opts);
+
+	$(document).on('click', selector, function (e) {
+		var $this = $(this),
+			dataOpts = $this.data('colorboxOpts');
 		// Q: why not use "colorbox"? A: https://github.com/jackmoore/colorbox/issues/435
-		var options = {};
-		var dataOpts = $element.data('colorboxOpts');
-		if ($.isPlainObject(dataOpts)) {
-			options = $.extend(opts, dataOpts);
+
+		if (!$.isPlainObject(dataOpts)) {
+			dataOpts = {};
 		}
 
-		options.href = this.href;
-		$.colorbox(options);
+		// merge data- options into opts
+		$.colorbox($.extend({href: $this.prop('href')}, opts, dataOpts));
 		e.preventDefault();
 	});
 };
@@ -109,4 +112,4 @@ function registerDeprecationError() {
 
 $js_path = elgg_get_config('path');
 $js_path = "{$js_path}vendors/jquery/colorbox/jquery.colorbox-min.js";
-readfile($js_path);
+readfile($js_path);