docs: function() {
  			var self = this;
  			var content;
  
  			var modaal_image_markup = '';
  			var gallery_total;
  			
  			// If has group attribute
  			if ( self.$elem.is('[data-group]') || self.$elem.is('[rel]') ) {
  
  				// find gallery groups
  				var use_group = self.$elem.is('[data-group]');
  				var gallery_group = use_group ? self.$elem.attr('data-group') : self.$elem.attr('rel');
  				var gallery_group_items = use_group ? $('[data-group="' + gallery_group + '"]') : $('[rel="' + gallery_group + '"]');
  
  				// remove any previous active attribute to any in the group
  				gallery_group_items.removeAttr('data-gallery-active', 'is_active');
  				// add active attribute to the item clicked
  				self.$elem.attr('data-gallery-active', 'is_active');
  
  				// how many in the grouping are there (-1 to connect with each function starting with 0)
  				gallery_total = gallery_group_items.length - 1;
  
  				// prepare array for gallery data
  				var gallery = [];
  
  				// start preparing markup
  				modaal_image_markup = '<div class="modaal-gallery-item-wrap">';
  
  				// loop each grouping item and push it into our gallery array
  				gallery_group_items.each(function(i, item) {
  					// setup default content
  					var img_src = '';
  					var img_alt = '';
  					var img_description = '';
  					var img_active = false;
  					var img_src_error = false;
  
  					var data_modaal_desc = item.getAttribute('data-modaal-desc');
  					var data_item_active = item.getAttribute('data-gallery-active');
  
  					// if item has inline custom source, use that instead of href. Fall back to href if available.
  					if ( $(item).attr('data-modaal-content-source') ) {
  						img_src = $(item).attr('data-modaal-content-source');
  					} else if ( $(item).attr('href') ) {
  						img_src = $(item).attr('href');
  					} else if ( $(item).attr('src') ) {
  						img_src = $(item).attr('src');
  					} else {
  						img_src = 'trigger requires href or data-modaal-content-source attribute';
  						img_src_error = true;
  					}
  
  					// Does it have a modaal description
  					if ( data_modaal_desc != '' && data_modaal_desc !== null && data_modaal_desc !== undefined ) {
  						img_alt = data_modaal_desc;
  						img_description = '<div class="modaal-gallery-label"><span class="modaal-accessible-hide">Image ' + (i+1) + ' - </span>' + data_modaal_desc.replace(/</g, "&lt;").replace(/>/g, "&gt;") + '</div>'
  					} else {
  						img_description = '<div class="modaal-gallery-label"><span class="modaal-accessible-hide">Image ' + (i+1) + '</span></div>';
  					}
  
  					// is it the active item
  					if ( data_item_active ) {
  						img_active = true
  					}
  
  					// set new object for values we want
  					var gallery_item = {
  						'url': img_src,
  						'alt': img_alt,
  						'rawdesc': data_modaal_desc,
  						'desc': img_description,
  						'active': img_active,
  						'src_error': img_src_error
  					};
  
  					// push object into gallery array
  					gallery.push( gallery_item );
  				});
  
  				// now loop through all items in the gallery and build up the markup
  				for (var i = 0; i < gallery.length; i++) {
  					// Set default active class, then check if array item active is true and update string for class
  					var is_active = '';
  					var aria_label = gallery[i].rawdesc ? 'Image: ' + gallery[i].rawdesc : 'Image ' + i + ' no description';
  
  					if ( gallery[i].active ) {
  						is_active = ' ' + self.private_options.active_class;
  					}
  
  					// if gallery item has source error, output message rather than undefined image
  					var image_output = gallery[i].src_error ? gallery[i].url : '<img src="' + gallery[i].url + '" alt=" " style="width:100%">';
  
  					// for each item build up the markup
  					modaal_image_markup += '<div class="modaal-gallery-item gallery-item-' + i + is_active + '" aria-label="' + aria_label + '">' +
  						image_output + gallery[i].desc +
  					'</div>';
  				}
  
  				// Close off the markup for the gallery
  				modaal_image_markup += '</div>';
  
  				// Add next and previous buttons if outside
  				if (self.options.outer_controls != true) {
  					modaal_image_markup += self.scope.prev_btn + self.scope.next_btn;
  				}
  			} else {
  				// This is only a single gallery item so let's grab the necessary values
  
  				// define the source, check if content_source option exists, and use that or fall back to href.
  				var this_img_src;
  				var img_src_error = false;
  				if ( self.$elem.attr('data-modaal-content-source') ) {
  					this_img_src = self.$elem.attr('data-modaal-content-source');
  				} else if ( self.$elem.attr('href') ) {
  					this_img_src = self.$elem.attr('href');
  				} else if ( self.$elem.attr('src') ) {
  					this_img_src = self.$elem.attr('src');
  				} else {
  					this_img_src = 'trigger requires href or data-modaal-content-source attribute';
  					img_src_error = true;
  				}
  
  				var this_img_alt_txt = '';
  				var this_img_alt = '';
  				var aria_label = '';
  
  				if ( self.$elem.attr('data-modaal-desc') ) {
  					aria_label = self.$elem.attr('data-modaal-desc');
  					this_img_alt_txt = self.$elem.attr('data-modaal-desc');
  					this_img_alt = '<div class="modaal-gallery-label"><span class="modaal-accessible-hide">Image - </span>' + this_img_alt_txt.replace(/</g, "&lt;").replace(/>/g, "&gt;") + '</div>';
  				} else {
  					aria_label = "Image with no description";
  				}
  
  				// if image item has source error, output message rather than undefined image
  				var image_output = img_src_error ? this_img_src : '<img src="' + this_img_src + '" alt=" " style="width:100%">';
  
  				// build up the html
  				modaal_image_markup = '<div class="modaal-gallery-item is_active" aria-label="' + aria_label + '">' +
  					image_output + this_img_alt +
  				'</div>';
  			}
  
  			// Update content variable
  			content = modaal_image_markup;
  
  			// now push content into markup
  			self.build_modal(content);
  
  			// setup next & prev buttons
  			if ( $('.modaal-gallery-item.is_active').is('.gallery-item-0') ) {
  				$('.modaal-gallery-prev').hide();
  			}
  			if ( $('.modaal-gallery-item.is_active').is('.gallery-item-' + gallery_total) ) {
  				$('.modaal-gallery-next').hide();
  			}
  		}