jekyll-theme-prettydocs 0.0.1

data/assets/plugins/lightbox/dist/ekko-lightbox.min.css

@@ -0,0 +1,6 @@
+/*!
+ * Lightbox for Bootstrap 3 by @ashleydw
+ * https://github.com/ashleydw/lightbox
+ *
+ * License: https://github.com/ashleydw/lightbox/blob/master/LICENSE
+ */.ekko-lightbox-container{position:relative}.ekko-lightbox-nav-overlay{position:absolute;top:0;left:0;z-index:100;width:100%;height:100%}.ekko-lightbox-nav-overlay a{z-index:100;display:block;width:49%;height:100%;font-size:30px;color:#fff;text-shadow:2px 2px 4px #000;opacity:0;filter:dropshadow(color=#000000,offx=2,offy=2);-webkit-transition:opacity .5s;-moz-transition:opacity .5s;-o-transition:opacity .5s;transition:opacity .5s}.ekko-lightbox-nav-overlay a:empty{width:49%}.ekko-lightbox a:hover{text-decoration:none;opacity:1}.ekko-lightbox .glyphicon-chevron-left{left:0;float:left;padding-left:15px;text-align:left}.ekko-lightbox .glyphicon-chevron-right{right:0;float:right;padding-right:15px;text-align:right}.ekko-lightbox .modal-footer{text-align:left}

data/assets/plugins/lightbox/dist/ekko-lightbox.min.js

@@ -0,0 +1,7 @@
+/*!
+ * Lightbox for Bootstrap 3 by @ashleydw
+ * https://github.com/ashleydw/lightbox
+ *
+ * License: https://github.com/ashleydw/lightbox/blob/master/LICENSE
+ */
+(function(){"use strict";var a,b;a=jQuery,b=function(b,c){var d,e,f,g=this;return this.options=a.extend({title:null,footer:null,remote:null},a.fn.ekkoLightbox.defaults,c||{}),this.$element=a(b),d="",this.modal_id=this.options.modal_id?this.options.modal_id:"ekkoLightbox-"+Math.floor(1e3*Math.random()+1),f='<div class="modal-header"'+(this.options.title||this.options.always_show_close?"":' style="display:none"')+'><button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button><h4 class="modal-title">'+(this.options.title||"&nbsp;")+"</h4></div>",e='<div class="modal-footer"'+(this.options.footer?"":' style="display:none"')+">"+this.options.footer+"</div>",a(document.body).append('<div id="'+this.modal_id+'" class="ekko-lightbox modal fade" tabindex="-1"><div class="modal-dialog"><div class="modal-content">'+f+'<div class="modal-body"><div class="ekko-lightbox-container"><div></div></div></div>'+e+"</div></div></div>"),this.modal=a("#"+this.modal_id),this.modal_dialog=this.modal.find(".modal-dialog").first(),this.modal_content=this.modal.find(".modal-content").first(),this.modal_body=this.modal.find(".modal-body").first(),this.lightbox_container=this.modal_body.find(".ekko-lightbox-container").first(),this.lightbox_body=this.lightbox_container.find("> div:first-child").first(),this.showLoading(),this.modal_arrows=null,this.border={top:parseFloat(this.modal_dialog.css("border-top-width"))+parseFloat(this.modal_content.css("border-top-width"))+parseFloat(this.modal_body.css("border-top-width")),right:parseFloat(this.modal_dialog.css("border-right-width"))+parseFloat(this.modal_content.css("border-right-width"))+parseFloat(this.modal_body.css("border-right-width")),bottom:parseFloat(this.modal_dialog.css("border-bottom-width"))+parseFloat(this.modal_content.css("border-bottom-width"))+parseFloat(this.modal_body.css("border-bottom-width")),left:parseFloat(this.modal_dialog.css("border-left-width"))+parseFloat(this.modal_content.css("border-left-width"))+parseFloat(this.modal_body.css("border-left-width"))},this.padding={top:parseFloat(this.modal_dialog.css("padding-top"))+parseFloat(this.modal_content.css("padding-top"))+parseFloat(this.modal_body.css("padding-top")),right:parseFloat(this.modal_dialog.css("padding-right"))+parseFloat(this.modal_content.css("padding-right"))+parseFloat(this.modal_body.css("padding-right")),bottom:parseFloat(this.modal_dialog.css("padding-bottom"))+parseFloat(this.modal_content.css("padding-bottom"))+parseFloat(this.modal_body.css("padding-bottom")),left:parseFloat(this.modal_dialog.css("padding-left"))+parseFloat(this.modal_content.css("padding-left"))+parseFloat(this.modal_body.css("padding-left"))},this.modal.on("show.bs.modal",this.options.onShow.bind(this)).on("shown.bs.modal",function(){return g.modal_shown(),g.options.onShown.call(g)}).on("hide.bs.modal",this.options.onHide.bind(this)).on("hidden.bs.modal",function(){return g.gallery&&a(document).off("keydown.ekkoLightbox"),g.modal.remove(),g.options.onHidden.call(g)}).modal("show",c),this.modal},b.prototype={modal_shown:function(){var b,c=this;return this.options.remote?(this.gallery=this.$element.data("gallery"),this.gallery&&("document.body"===this.options.gallery_parent_selector||""===this.options.gallery_parent_selector?this.gallery_items=a(document.body).find('*[data-toggle="lightbox"][data-gallery="'+this.gallery+'"]'):this.gallery_items=this.$element.parents(this.options.gallery_parent_selector).first().find('*[data-toggle="lightbox"][data-gallery="'+this.gallery+'"]'),this.gallery_index=this.gallery_items.index(this.$element),a(document).on("keydown.ekkoLightbox",this.navigate.bind(this)),this.options.directional_arrows&&this.gallery_items.length>1&&(this.lightbox_container.append('<div class="ekko-lightbox-nav-overlay"><a href="#" class="'+this.strip_stops(this.options.left_arrow_class)+'"></a><a href="#" class="'+this.strip_stops(this.options.right_arrow_class)+'"></a></div>'),this.modal_arrows=this.lightbox_container.find("div.ekko-lightbox-nav-overlay").first(),this.lightbox_container.find("a"+this.strip_spaces(this.options.left_arrow_class)).on("click",function(a){return a.preventDefault(),c.navigate_left()}),this.lightbox_container.find("a"+this.strip_spaces(this.options.right_arrow_class)).on("click",function(a){return a.preventDefault(),c.navigate_right()}))),this.options.type?"image"===this.options.type?this.preloadImage(this.options.remote,!0):"youtube"===this.options.type&&(b=this.getYoutubeId(this.options.remote))?this.showYoutubeVideo(b):"vimeo"===this.options.type?this.showVimeoVideo(this.options.remote):"instagram"===this.options.type?this.showInstagramVideo(this.options.remote):"url"===this.options.type?this.loadRemoteContent(this.options.remote):"video"===this.options.type?this.showVideoIframe(this.options.remote):this.error('Could not detect remote target type. Force the type using data-type="image|youtube|vimeo|instagram|url|video"'):this.detectRemoteType(this.options.remote)):this.error("No remote target given")},strip_stops:function(a){return a.replace(/\./g,"")},strip_spaces:function(a){return a.replace(/\s/g,"")},isImage:function(a){return a.match(/(^data:image\/.*,)|(\.(jp(e|g|eg)|gif|png|bmp|webp|svg)((\?|#).*)?$)/i)},isSwf:function(a){return a.match(/\.(swf)((\?|#).*)?$/i)},getYoutubeId:function(a){var b;return b=a.match(/^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/),b&&11===b[2].length?b[2]:!1},getVimeoId:function(a){return a.indexOf("vimeo")>0?a:!1},getInstagramId:function(a){return a.indexOf("instagram")>0?a:!1},navigate:function(a){if(a=a||window.event,39===a.keyCode||37===a.keyCode){if(39===a.keyCode)return this.navigate_right();if(37===a.keyCode)return this.navigate_left()}},navigateTo:function(b){var c,d;return 0>b||b>this.gallery_items.length-1?this:(this.showLoading(),this.gallery_index=b,this.$element=a(this.gallery_items.get(this.gallery_index)),this.updateTitleAndFooter(),d=this.$element.attr("data-remote")||this.$element.attr("href"),this.detectRemoteType(d,this.$element.attr("data-type")||!1),this.gallery_index+1<this.gallery_items.length&&(c=a(this.gallery_items.get(this.gallery_index+1),!1),d=c.attr("data-remote")||c.attr("href"),"image"===c.attr("data-type")||this.isImage(d))?this.preloadImage(d,!1):void 0)},navigate_left:function(){return 1!==this.gallery_items.length?(0===this.gallery_index?this.gallery_index=this.gallery_items.length-1:this.gallery_index--,this.options.onNavigate.call(this,"left",this.gallery_index),this.navigateTo(this.gallery_index)):void 0},navigate_right:function(){return 1!==this.gallery_items.length?(this.gallery_index===this.gallery_items.length-1?this.gallery_index=0:this.gallery_index++,this.options.onNavigate.call(this,"right",this.gallery_index),this.navigateTo(this.gallery_index)):void 0},detectRemoteType:function(a,b){var c;return b=b||!1,"image"===b||this.isImage(a)?(this.options.type="image",this.preloadImage(a,!0)):"youtube"===b||(c=this.getYoutubeId(a))?(this.options.type="youtube",this.showYoutubeVideo(c)):"vimeo"===b||(c=this.getVimeoId(a))?(this.options.type="vimeo",this.showVimeoVideo(c)):"instagram"===b||(c=this.getInstagramId(a))?(this.options.type="instagram",this.showInstagramVideo(c)):"video"===b?(this.options.type="video",this.showVideoIframe(c)):(this.options.type="url",this.loadRemoteContent(a))},updateTitleAndFooter:function(){var a,b,c,d;return c=this.modal_content.find(".modal-header"),b=this.modal_content.find(".modal-footer"),d=this.$element.data("title")||"",a=this.$element.data("footer")||"",d||this.options.always_show_close?c.css("display","").find(".modal-title").html(d||"&nbsp;"):c.css("display","none"),a?b.css("display","").html(a):b.css("display","none"),this},showLoading:function(){return this.lightbox_body.html('<div class="modal-loading">'+this.options.loadingMessage+"</div>"),this},showYoutubeVideo:function(a){var b,c;return c=this.checkDimensions(this.$element.data("width")||560),b=c/(560/315),this.showVideoIframe("//www.youtube.com/embed/"+a+"?badge=0&autoplay=1&html5=1",c,b)},showVimeoVideo:function(a){var b,c;return c=this.checkDimensions(this.$element.data("width")||560),b=c/(500/281),this.showVideoIframe(a+"?autoplay=1",c,b)},showInstagramVideo:function(a){var b,c;return c=this.checkDimensions(this.$element.data("width")||612),this.resize(c),b=c+80,this.lightbox_body.html('<iframe width="'+c+'" height="'+b+'" src="'+this.addTrailingSlash(a)+'embed/" frameborder="0" allowfullscreen></iframe>'),this.options.onContentLoaded.call(this),this.modal_arrows?this.modal_arrows.css("display","none"):void 0},showVideoIframe:function(a,b,c){return c=c||b,this.resize(b),this.lightbox_body.html('<div class="embed-responsive embed-responsive-16by9"><iframe width="'+b+'" height="'+c+'" src="'+a+'" frameborder="0" allowfullscreen class="embed-responsive-item"></iframe></div>'),this.options.onContentLoaded.call(this),this.modal_arrows&&this.modal_arrows.css("display","none"),this},loadRemoteContent:function(b){var c,d,e=this;return d=this.$element.data("width")||560,this.resize(d),c=this.$element.data("disableExternalCheck")||!1,c||this.isExternal(b)?(this.lightbox_body.html('<iframe width="'+d+'" height="'+d+'" src="'+b+'" frameborder="0" allowfullscreen></iframe>'),this.options.onContentLoaded.call(this)):this.lightbox_body.load(b,a.proxy(function(){return e.$element.trigger("loaded.bs.modal")})),this.modal_arrows&&this.modal_arrows.css("display","none"),this},isExternal:function(a){var b;return b=a.match(/^([^:\/?#]+:)?(?:\/\/([^\/?#]*))?([^?#]+)?(\?[^#]*)?(#.*)?/),"string"==typeof b[1]&&b[1].length>0&&b[1].toLowerCase()!==location.protocol?!0:"string"==typeof b[2]&&b[2].length>0&&b[2].replace(new RegExp(":("+{"http:":80,"https:":443}[location.protocol]+")?$"),"")!==location.host?!0:!1},error:function(a){return this.lightbox_body.html(a),this},preloadImage:function(b,c){var d,e=this;return d=new Image,(null==c||c===!0)&&(d.onload=function(){var b;return b=a("<img />"),b.attr("src",d.src),b.addClass("img-responsive"),e.lightbox_body.html(b),e.modal_arrows&&e.modal_arrows.css("display","block"),b.load(function(){return e.resize(d.width),e.options.onContentLoaded.call(e)})},d.onerror=function(){return e.error("Failed to load image: "+b)}),d.src=b,d},resize:function(b){var c;return c=b+this.border.left+this.padding.left+this.padding.right+this.border.right,this.modal_dialog.css("width","auto").css("max-width",c),this.lightbox_container.find("a").css("line-height",function(){return a(this).parent().height()+"px"}),this},checkDimensions:function(a){var b,c;return c=a+this.border.left+this.padding.left+this.padding.right+this.border.right,b=document.body.clientWidth,c>b&&(a=this.modal_body.width()),a},close:function(){return this.modal.modal("hide")},addTrailingSlash:function(a){return"/"!==a.substr(-1)&&(a+="/"),a}},a.fn.ekkoLightbox=function(c){return this.each(function(){var d;return d=a(this),c=a.extend({remote:d.attr("data-remote")||d.attr("href"),gallery_parent_selector:d.attr("data-parent"),type:d.attr("data-type")},c,d.data()),new b(this,c),this})},a.fn.ekkoLightbox.defaults={gallery_parent_selector:"document.body",left_arrow_class:".glyphicon .glyphicon-chevron-left",right_arrow_class:".glyphicon .glyphicon-chevron-right",directional_arrows:!0,type:null,always_show_close:!0,loadingMessage:"Loading...",onShow:function(){},onShown:function(){},onHide:function(){},onHidden:function(){},onNavigate:function(){},onContentLoaded:function(){}}}).call(this);

data/assets/plugins/lightbox/ekko-lightbox.coffee

@@ -0,0 +1,353 @@
+###
+Lightbox for Bootstrap 3 by @ashleydw
+https://github.com/ashleydw/lightbox
+
+License: https://github.com/ashleydw/lightbox/blob/master/LICENSE
+###
+"use strict";
+
+$ = jQuery
+
+EkkoLightbox = ( element, options ) ->
+
+	@options = $.extend({
+		title : null
+		footer : null
+		remote : null
+	}, $.fn.ekkoLightbox.defaults, options || {})
+
+	@$element = $(element)
+	content = ''
+
+	@modal_id = if @options.modal_id then @options.modal_id else 'ekkoLightbox-' + Math.floor((Math.random() * 1000) + 1)
+	header = '<div class="modal-header"'+(if @options.title or @options.always_show_close then '' else ' style="display:none"')+'><button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button><h4 class="modal-title">' + (@options.title || "&nbsp;") + '</h4></div>'
+	footer = '<div class="modal-footer"'+(if @options.footer then '' else ' style="display:none"')+'>' + @options.footer + '</div>'
+	$(document.body).append '<div id="' + @modal_id + '" class="ekko-lightbox modal fade" tabindex="-1"><div class="modal-dialog"><div class="modal-content">' + header + '<div class="modal-body"><div class="ekko-lightbox-container"><div></div></div></div>' + footer + '</div></div></div>'
+
+	@modal = $ '#' + @modal_id
+	@modal_dialog = @modal.find('.modal-dialog').first()
+	@modal_content = @modal.find('.modal-content').first()
+	@modal_body = @modal.find('.modal-body').first()
+
+	@lightbox_container = @modal_body.find('.ekko-lightbox-container').first()
+	@lightbox_body = @lightbox_container.find('> div:first-child').first()
+
+	@showLoading()
+	@modal_arrows = null
+
+	@border = {
+		top: parseFloat(@modal_dialog.css('border-top-width')) + parseFloat(@modal_content.css('border-top-width')) + parseFloat(@modal_body.css('border-top-width'))
+		right: parseFloat(@modal_dialog.css('border-right-width')) + parseFloat(@modal_content.css('border-right-width')) + parseFloat(@modal_body.css('border-right-width'))
+		bottom: parseFloat(@modal_dialog.css('border-bottom-width')) + parseFloat(@modal_content.css('border-bottom-width')) + parseFloat(@modal_body.css('border-bottom-width'))
+		left: parseFloat(@modal_dialog.css('border-left-width')) + parseFloat(@modal_content.css('border-left-width')) + parseFloat(@modal_body.css('border-left-width'))
+	}
+
+	@padding = {
+		top: parseFloat(@modal_dialog.css('padding-top')) + parseFloat(@modal_content.css('padding-top')) + parseFloat(@modal_body.css('padding-top'))
+		right: parseFloat(@modal_dialog.css('padding-right')) + parseFloat(@modal_content.css('padding-right')) + parseFloat(@modal_body.css('padding-right'))
+		bottom: parseFloat(@modal_dialog.css('padding-bottom')) + parseFloat(@modal_content.css('padding-bottom')) + parseFloat(@modal_body.css('padding-bottom'))
+		left: parseFloat(@modal_dialog.css('padding-left')) + parseFloat(@modal_content.css('padding-left')) + parseFloat(@modal_body.css('padding-left'))
+	}
+
+	@modal
+	.on('show.bs.modal', @options.onShow.bind(@))
+	.on 'shown.bs.modal', =>
+		@modal_shown()
+		@options.onShown.call(@)
+	.on('hide.bs.modal', @options.onHide.bind(@))
+	.on 'hidden.bs.modal', =>
+		if @gallery
+			$(document).off 'keydown.ekkoLightbox'
+		@modal.remove()
+		@options.onHidden.call(@)
+	.modal 'show', options
+
+	@modal
+
+EkkoLightbox.prototype = {
+	modal_shown: ->
+		# when the modal first loads
+		if !@options.remote
+			@error 'No remote target given'
+		else
+
+			@gallery = @$element.data('gallery')
+			if @gallery
+				# parents('document.body') fails for some reason, so do this manually
+				if this.options.gallery_parent_selector == 'document.body' || this.options.gallery_parent_selector == ''
+					@gallery_items = $(document.body).find('*[data-toggle="lightbox"][data-gallery="' + @gallery + '"]')
+				else
+					@gallery_items = @$element.parents(this.options.gallery_parent_selector).first().find('*[data-toggle="lightbox"][data-gallery="' + @gallery + '"]')
+				@gallery_index = @gallery_items.index(@$element)
+				$(document).on 'keydown.ekkoLightbox', @navigate.bind(@)
+
+				# add the directional arrows to the modal
+				if @options.directional_arrows && @gallery_items.length > 1
+					@lightbox_container.append('<div class="ekko-lightbox-nav-overlay"><a href="#" class="'+@strip_stops(@options.left_arrow_class)+'"></a><a href="#" class="'+@strip_stops(@options.right_arrow_class)+'"></a></div>')
+					@modal_arrows = @lightbox_container.find('div.ekko-lightbox-nav-overlay').first()
+					@lightbox_container.find('a'+@strip_spaces(@options.left_arrow_class)).on 'click', (event) =>
+						event.preventDefault()
+						do @navigate_left
+					@lightbox_container.find('a'+@strip_spaces(@options.right_arrow_class)).on 'click', (event) =>
+						event.preventDefault()
+						do @navigate_right
+
+			if @options.type
+				if @options.type == 'image'
+					@preloadImage(@options.remote, true)
+				else if @options.type == 'youtube' && video_id = @getYoutubeId(@options.remote)
+					@showYoutubeVideo(video_id)
+				else if @options.type == 'vimeo'
+					@showVimeoVideo(@options.remote)
+				else if @options.type == 'instagram'
+					@showInstagramVideo(@options.remote);
+				else if @options.type == 'url'
+					@loadRemoteContent(@options.remote);
+				else if @options.type == 'video'
+					@showVideoIframe(@options.remote)
+				else
+					@error "Could not detect remote target type. Force the type using data-type=\"image|youtube|vimeo|instagram|url|video\""
+
+			else
+				@detectRemoteType(@options.remote)
+
+	strip_stops: (str) ->
+		str.replace(/\./g, '')
+
+	strip_spaces: (str) ->
+		str.replace(/\s/g, '')
+
+	isImage: (str) ->
+		str.match(/(^data:image\/.*,)|(\.(jp(e|g|eg)|gif|png|bmp|webp|svg)((\?|#).*)?$)/i)
+
+	isSwf: (str) ->
+		str.match(/\.(swf)((\?|#).*)?$/i)
+
+	getYoutubeId: (str) ->
+		match = str.match(/^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/);
+		if match && match[2].length == 11 then match[2] else false
+
+	getVimeoId: (str) ->
+		if str.indexOf('vimeo') > 0 then str else false
+
+	getInstagramId: (str) ->
+		if str.indexOf('instagram') > 0 then str else false
+
+	navigate : ( event ) ->
+
+		event = event || window.event;
+		if event.keyCode == 39 || event.keyCode == 37
+			if event.keyCode == 39
+				do @navigate_right
+			else if event.keyCode == 37
+				do @navigate_left
+
+	navigateTo: (index) ->
+
+		return @ if index < 0 or index > @gallery_items.length-1
+
+		@showLoading()
+
+		@gallery_index = index
+
+		@$element = $(@gallery_items.get(@gallery_index))
+		@updateTitleAndFooter()
+
+		src = @$element.attr('data-remote') || @$element.attr('href')
+		@detectRemoteType(src, @$element.attr('data-type') || false)
+
+		if @gallery_index + 1 < @gallery_items.length
+			next = $(@gallery_items.get(@gallery_index + 1), false)
+			src = next.attr('data-remote') || next.attr('href')
+			if next.attr('data-type') == 'image' || @isImage(src)
+				@preloadImage(src, false)
+
+
+	navigate_left: ->
+
+		if @gallery_items.length == 1 then return
+		if @gallery_index == 0 then @gallery_index = @gallery_items.length-1 else @gallery_index-- #circular
+
+		@options.onNavigate.call(@, 'left', @gallery_index)
+		@navigateTo(@gallery_index)
+
+	navigate_right: ->
+
+		if @gallery_items.length == 1 then return
+		if @gallery_index == @gallery_items.length-1 then @gallery_index = 0 else @gallery_index++ #circular
+
+		@options.onNavigate.call(@, 'right', @gallery_index)
+		@navigateTo(@gallery_index)
+
+	detectRemoteType: (src, type) ->
+
+		type = type || false
+
+		if type == 'image' || @isImage(src)
+			@options.type = 'image'
+			@preloadImage(src, true)
+
+		else if type == 'youtube' || video_id = @getYoutubeId(src)
+			@options.type = 'youtube'
+			@showYoutubeVideo(video_id)
+
+		else if type == 'vimeo' || video_id = @getVimeoId(src)
+			@options.type = 'vimeo'
+			@showVimeoVideo(video_id)
+
+		else if type == 'instagram' || video_id = @getInstagramId(src)
+			@options.type = 'instagram'
+			@showInstagramVideo(video_id)
+
+		else if type == 'video'
+			@options.type = 'video'
+			@showVideoIframe(video_id)
+
+		else
+			@options.type = 'url'
+			@loadRemoteContent(src)
+
+	updateTitleAndFooter: ->
+		header = @modal_content.find('.modal-header')
+		footer = @modal_content.find('.modal-footer')
+		title = @$element.data('title') || ""
+		caption = @$element.data('footer') || ""
+
+		if title or @options.always_show_close then header.css('display', '').find('.modal-title').html(title || "&nbsp;") else header.css('display', 'none')
+		if caption then footer.css('display', '').html(caption) else footer.css('display', 'none')
+		@
+
+	showLoading : ->
+		@lightbox_body.html '<div class="modal-loading">'+@options.loadingMessage+'</div>'
+		@
+
+	showYoutubeVideo : (id) ->
+		width = @checkDimensions( @$element.data('width') || 560 )
+		height = width / ( 560/315 ) # aspect ratio
+		@showVideoIframe('//www.youtube.com/embed/' + id + '?badge=0&autoplay=1&html5=1', width, height)
+
+	showVimeoVideo : (id) ->
+		width = @checkDimensions( @$element.data('width') || 560 )
+		height = width / ( 500/281 ) # aspect ratio
+		@showVideoIframe(id + '?autoplay=1', width, height)
+
+	showInstagramVideo : (id) ->
+		# instagram load their content into iframe's so this can be put straight into the element
+		width = @checkDimensions @$element.data('width') || 612
+		@resize width
+		height = width + 80
+		@lightbox_body.html '<iframe width="'+width+'" height="'+height+'" src="' + @addTrailingSlash(id) + 'embed/" frameborder="0" allowfullscreen></iframe>'
+		@options.onContentLoaded.call(@)
+		@modal_arrows.css 'display', 'none' if @modal_arrows #hide the arrows when showing video
+
+	showVideoIframe: (url, width, height) -> # should be used for videos only. for remote content use loadRemoteContent (data-type=url)
+		height = height || width # default to square
+		@resize width
+		@lightbox_body.html '<div class="embed-responsive embed-responsive-16by9"><iframe width="' + width + '" height="' + height + '" src="' + url + '" frameborder="0" allowfullscreen class="embed-responsive-item"></iframe></div>'
+		@options.onContentLoaded.call(@)
+		@modal_arrows.css 'display', 'none' if @modal_arrows #hide the arrows when showing video
+		@
+
+	loadRemoteContent : (url) ->
+		width = @$element.data('width') || 560
+		@resize width
+
+		disableExternalCheck = @$element.data('disableExternalCheck') || false
+
+		# external urls are loading into an iframe
+		if !disableExternalCheck && !@isExternal(url)
+			@lightbox_body.load url, $.proxy =>
+		  		@$element.trigger('loaded.bs.modal')
+
+		else
+			@lightbox_body.html '<iframe width="'+width+'" height="'+width+'" src="' + url + '" frameborder="0" allowfullscreen></iframe>'
+			@options.onContentLoaded.call(@)
+
+		@modal_arrows.css 'display', 'none' if @modal_arrows #hide the arrows when remote content
+		@
+
+	isExternal : (url) ->
+		match = url.match(/^([^:\/?#]+:)?(?:\/\/([^\/?#]*))?([^?#]+)?(\?[^#]*)?(#.*)?/);
+		return true if typeof match[1] == "string" && match[1].length > 0 && match[1].toLowerCase() != location.protocol
+		return true if typeof match[2] == "string" && match[2].length > 0 && match[2].replace(new RegExp(":("+{"http:":80,"https:":443}[location.protocol]+")?$"), "") != location.host
+		false
+
+	error : ( message ) ->
+		@lightbox_body.html message
+		@
+
+	preloadImage : ( src, onLoadShowImage) ->
+
+		img = new Image()
+		if !onLoadShowImage? || onLoadShowImage == true
+			img.onload = =>
+				image = $('<img />')
+				image.attr('src', img.src)
+				image.addClass('img-responsive')
+				@lightbox_body.html image
+				@modal_arrows.css 'display', 'block' if @modal_arrows
+				image.load =>
+					@resize img.width
+					@options.onContentLoaded.call(@)
+			img.onerror = =>
+				@error 'Failed to load image: ' + src
+
+		img.src = src
+		img
+
+	resize : ( width ) ->
+		#resize the dialog based on the width given, and adjust the directional arrow padding
+		width_total = width + @border.left + @padding.left + @padding.right + @border.right
+		@modal_dialog.css('width', 'auto') .css('max-width', width_total);
+
+		@lightbox_container.find('a').css 'line-height', ->
+			$(@).parent().height() + 'px'
+		@
+
+	checkDimensions: (width) ->
+		#check that the width given can be displayed, if not return the maximum size that can be
+
+		width_total = width + @border.left + @padding.left + @padding.right + @border.right
+		body_width = document.body.clientWidth
+
+		if width_total > body_width
+			width = @modal_body.width()
+
+		width
+
+	close : ->
+		@modal.modal('hide');
+
+	addTrailingSlash: (url) ->
+		if url.substr(-1) != '/'
+			url += '/'
+		url
+}
+
+$.fn.ekkoLightbox = ( options ) ->
+	@each ->
+
+		$this = $(this)
+		options = $.extend({
+			remote : $this.attr('data-remote') || $this.attr('href')
+			gallery_parent_selector : $this.attr('data-parent')
+			type : $this.attr('data-type')
+		}, options, $this.data())
+		new EkkoLightbox(@, options)
+		@
+
+$.fn.ekkoLightbox.defaults = {
+	gallery_parent_selector: 'document.body'
+	left_arrow_class: '.glyphicon .glyphicon-chevron-left' #include class . here - they are stripped out later
+	right_arrow_class: '.glyphicon .glyphicon-chevron-right' #include class . here - they are stripped out later
+	directional_arrows: true #display the left / right arrows or not
+	type: null #force the lightbox into image / youtube mode. if null, or not image|youtube|vimeo; detect it
+	always_show_close: true #always show the close button, even if there is no title
+	loadingMessage: 'Loading...',
+	onShow : ->
+	onShown : ->
+	onHide : ->
+	onHidden : ->
+	onNavigate : ->
+	onContentLoaded : ->
+}

data/assets/plugins/lightbox/ekko-lightbox.less

@@ -0,0 +1,64 @@
+/*!
+ * Lightbox for Bootstrap 3 by @ashleydw
+ * https://github.com/ashleydw/lightbox
+ *
+ * License: https://github.com/ashleydw/lightbox/blob/master/LICENSE
+ */
+
+.ekko-lightbox {
+  &-container {
+    position:relative;
+  }
+
+  &-nav-overlay {
+    z-index:100;
+    position: absolute;
+    top:0;
+    left:0;
+    width:100%;
+    height:100%;
+
+    a {
+      opacity: 0;
+      -webkit-transition: opacity 0.5s;
+      -moz-transition: opacity 0.5s;
+      -o-transition: opacity 0.5s;
+      transition: opacity 0.5s;
+      color:#fff;
+      font-size:30px;
+      height: 100%;
+      width:49%;
+      display:block;
+      text-shadow: 2px 2px 4px #000;
+      filter: dropshadow(color=#000, offx=2, offy=2);
+      z-index:100;
+
+      &:empty {
+        width:49%;
+      }
+    }
+  }
+
+  a:hover {
+    opacity: 1;
+    text-decoration: none;
+  }
+
+  .glyphicon-chevron-left {
+    padding-left:15px;
+    float:left;
+    left:0;
+    text-align: left;
+  }
+
+  .glyphicon-chevron-right {
+    padding-right:15px;
+    float:right;
+    right:0;
+    text-align: right;
+  }
+
+  .modal-footer {
+    text-align: left;
+  }
+}

data/assets/plugins/lightbox/examples/index.html

@@ -0,0 +1,559 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Bootstrap 3 Lightbox</title>
+
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+        <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
+        <link href="../dist/ekko-lightbox.css" rel="stylesheet">
+
+        <style type="text/css">
+            /* i like padding - you can ignore this css. see the actual css / less files in the repository for styling the gallery navigation */
+            div.row > div > div.row {
+                margin-bottom: 15px;
+            }
+
+            body {
+                padding-bottom: 50px;
+            }
+
+            div.top-header {
+                margin-bottom:100px;
+            }
+
+            h3.page-header {
+                margin-top: 50px;
+            }
+
+            figure {
+                position: relative;
+            }
+
+            figure figcaption {
+                font-size: 22px;
+                color: #fff;
+                text-decoration: none;
+                bottom: 10px;
+                right: 20px;
+                position: absolute;
+                background-color: #000;
+            }
+			code {
+				white-space: pre-wrap;       /* css-3 */
+				white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
+				white-space: -pre-wrap;      /* Opera 4-6 */
+				white-space: -o-pre-wrap;    /* Opera 7 */
+				word-wrap: break-word;       /* Internet Explorer 5.5+ */
+			}
+        </style>
+    </head>
+    <body>
+        <div class="container">
+            <div class="row">
+                <div class="col-md-10 col-md-offset-1">
+
+                    <div class="top-header">
+                        <h1 class="page-header">Lightbox for Bootstrap 3</h1>
+                        <p class="lead">Utilizes Bootstraps modal plugin to implement a lightbox gallery - <a href="https://github.com/ashleydw/lightbox">GitHub</a></p>
+						<div class="text-center">
+							<iframe src="http://ghbtns.com/github-btn.html?user=ashleydw&repo=lightbox&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="100	" height="20"></iframe>
+							<iframe src="http://ghbtns.com/github-btn.html?user=ashleydw&repo=lightbox&type=fork&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="100" height="20"></iframe>
+							<iframe src="http://ghbtns.com/github-btn.html?user=ashleydw&repo=lightbox&type=follow&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="160" height="20"></iframe>
+						</div>
+                    </div>
+
+                    <div class="top-header">
+                        <h2>Usage</h2>
+                        <h3>Via data attributes</h3>
+                        <pre>&lt;a href=&quot;someurl&quot; data-toggle=&quot;lightbox&quot;&gt;Launch modal&lt;/a&gt;</pre>
+                        <h3>Via Javascript</h3>
+                        <pre>&lt;a href=&quot;someurl&quot; id=&quot;mylink&quot;&gt;Open lightbox&lt;/a&gt;<br/>$(&#39;#mylink&#39;).ekkoLightbox(options);</pre>
+                    </div>
+
+                    <div class="top-header">
+                        <h2>Implementation</h2>
+                        <p>Obviously, you need the modal component that comes with Bootstrap, and jQuery. The delegate function used on this page is:</p>
+<code style="white-space: pre-wrap">$(document).delegate('*[data-toggle="lightbox"]', 'click', function(event) {
+    event.preventDefault();
+    $(this).ekkoLightbox();
+});</code>
+						<br /><br />
+						<p>If you plan on having galleries, be sure to include the LESS / CSS files.</p>
+                    </div>
+
+                    <div class="top-header">
+                        <h2>Options</h2>
+                        <p>Options are passed down to the modal object so you can also use any of the <a href="http://getbootstrap.com/javascript/#modals-usage">original modal options</a>.</p>
+						<p>Pass the options to the calling function as an object, or set defaults using <code>$.fn.ekkoLightbox.defaults</code> (excluding modal default options, notable: title, footer, remote)</p>
+						<div class="table-responsive">
+							<table class="table table-bordered">
+								<thead>
+								<tr>
+									<th>Name</th>
+									<th>type</th>
+									<th>default</th>
+									<th>description</th>
+									<th>data-*</th>
+								</tr>
+								</thead>
+								<tbody>
+									<tr>
+										<td>remote</td>
+										<td>string</td>
+										<td></td>
+										<td>If you can't/don't want to set the href property of an element</td>
+										<td><code>data-remote="http://www...."</code></td>
+									</tr>
+									<tr>
+										<td>gallery</td>
+										<td>string</td>
+										<td></td>
+										<td>For grouping elements</td>
+										<td><code>data-gallery="galleryname"</code></td>
+									</tr>
+									<tr>
+										<td>gallery_parent_selector</td>
+										<td>string</td>
+										<td><code>document.body</code></td>
+										<td>If you have multiple galleries per page, this will restrict the gallery items to the parent that matches this selector.</td>
+										<td><code>data-parent="any valid selector"</code></td>
+									</tr>
+									<tr>
+										<td>left_arrow_class</td>
+										<td>string</td>
+										<td><code>.glyphicon .glyphicon-chevron-left</code></td>
+										<td>The css classes to give to the left arrow</td>
+										<td></td>
+									</tr>
+									<tr>
+										<td>right_arrow_class</td>
+										<td>string</td>
+										<td><code>.glyphicon .glyphicon-chevron-right</code></td>
+										<td>The css classes to give to the right arrow</td>
+										<td></td>
+									</tr>
+									<tr>
+										<td>type</td>
+										<td>string</td>
+										<td></td>
+										<td>Force the lightbox into image/YouTube mode.</td>
+										<td><code>data-type="(image|youtube|vimeo)"</code></td>
+									</tr>
+									<tr>
+										<td>width (videos only; height is calculated by ratio)</td>
+										<td>integer</td>
+										<td></td>
+										<td>Force the width</td>
+										<td><code>data-width="[0-9]+"</code></td>
+									</tr>
+									<tr>
+										<td>always_show_close</td>
+										<td>boolean</td>
+										<td><code>true</code></td>
+										<td>Always show the close button, even if no title is present</td>
+										<td></td>
+									</tr>
+									<tr>
+										<td>onNavigate</td>
+										<td>callable</td>
+										<td><code>false</code></td>
+										<td>Function call when navigate right or left. First argument is the direction</td>
+										<td></td>
+									</tr>
+									<tr>
+										<td>loadingMessage</td>
+										<td>string</td>
+										<td><code>Loading...</code></td>
+										<td>Message injected for loading</td>
+										<td></td>
+									</tr>
+								</tbody>
+							</table>
+                    	</div>
+                    </div>
+
+					<h1 class="page-header">Themes</h1>
+					<p>Some quick themes to show how customisation is possible.</p>
+					<ul>
+						<li><a href="dark.html">Dark, full screen</a></li>
+						<li><a href="nyan.html">Nyan</a></li>
+					</ul>
+
+
+                    <h1 class="page-header">Examples</h1>
+                    <p>Images from Instagrams <a href="http://blog.instagram.com/post/58570728864/twoi92">"The Week on Instagram | 92"</a></p>
+                    <ul>
+                        <li><a href="#single-image">Example #1: Single Image</a></li>
+                        <li><a href="#image-gallery">Example #2: Gallery of Images</a></li>
+                        <li><a href="#single-youtube">Example #3: Single YouTube & Vimeo Video. Forced width</a></li>
+                        <li><a href="#youtube-gallery">Example #4: Gallery of YouTube / Vimeo Videos</a></li>
+                        <li><a href="#mixed-gallery">Example #5: Mixed gallery</a></li>
+                        <li><a href="#programatically-call">Example #6: Programatically call</a></li>
+                        <li><a href="#data-remote">Example #7: Via <code>data-remote</code></a></li>
+                        <li><a href="#different-sizes">Example #8: Gallery of different sized images</a></li>
+                        <li><a href="#too-large">Example #9: Images too wide for display</a></li>
+                        <li><a href="#wrappers">Example #11: Column wrappers</a></li>
+                        <li><a href="#global-galleries">Example #12: Global galleries</a></li>
+                        <li><a href="#check-is-image">Example #13: No-extension images / presume everything is an image</a></li>
+                        <li><a href="#on-navigate">Example #14: On navigate event example</a></li>
+                        <li><a href="#hidden-elements">Example #15: Hidden elements</a></li>
+                        <li><a href="#remote-content">Example #16: Remote content</a></li>
+                        <li><a href="#navigateTo">Example #17: navigateTo</a></li>
+                    </ul>
+
+                    <h3 class="page-header" id="single-image">Example #1: Single Image</h3>
+                    <p>Note: uses modal plugin title option via <code>data-title</code>, and the custom footer tag using <code>data-footer</code></p>
+                    <div class="row">
+                        <div class="col-sm-offset-4 col-sm-3">
+                            <a href="http://41.media.tumblr.com/f37ac708134914c471073e4c0b47328d/tumblr_mrn3dc10Wa1r1thfzo8_1280.jpg" data-toggle="lightbox" data-title="A random title" data-footer="A custom footer text">
+                                <img src="//41.media.tumblr.com/f37ac708134914c471073e4c0b47328d/tumblr_mrn3dc10Wa1r1thfzo8_1280.jpg" class="img-responsive">
+                            </a>
+                        </div>
+                    </div>
+
+                    <h3 class="page-header" id="image-gallery">Example #2: Gallery of Images</h3>
+                    <p>By default, gallery images must be wrapped in a tag (probably <code>&lt;div&gt;</code>) - which doesn't have the class <code>.row</code>. This is so you can create columns/rows.</p>
+                    <p>A custom selector for the parent can be used, see <a href="#wrappers">example #11</a>. Note how the final image is not in the gallery intentionally.</p>
+                    <div class="row">
+                        <div class="col-md-offset-2 col-md-8">
+                            <div class="row">
+                                <a href="http://41.media.tumblr.com/f37ac708134914c471073e4c0b47328d/tumblr_mrn3dc10Wa1r1thfzo8_1280.jpg" data-toggle="lightbox" data-gallery="multiimages" data-title="People walking down stairs" class="col-sm-4">
+                                    <img src="//41.media.tumblr.com/f37ac708134914c471073e4c0b47328d/tumblr_mrn3dc10Wa1r1thfzo8_1280.jpg" class="img-responsive">
+                                </a>
+                                <a href="http://41.media.tumblr.com/838b44224e39c30cd43490deb11b919d/tumblr_mrn3dc10Wa1r1thfzo1_1280.jpg" data-toggle="lightbox" data-gallery="multiimages" data-title="Man getting wet" class="col-sm-4">
+                                    <img src="//41.media.tumblr.com/838b44224e39c30cd43490deb11b919d/tumblr_mrn3dc10Wa1r1thfzo1_1280.jpg" class="img-responsive">
+                                </a>
+                                <a href="http://41.media.tumblr.com/e06a3513b0b36843f54bee99aeac689a/tumblr_mrn3dc10Wa1r1thfzo2_1280.jpg" data-toggle="lightbox" data-gallery="multiimages" data-title="Someone lost their dress" class="col-sm-4">
+                                    <img src="//41.media.tumblr.com/e06a3513b0b36843f54bee99aeac689a/tumblr_mrn3dc10Wa1r1thfzo2_1280.jpg" class="img-responsive">
+                                </a>
+                            </div>
+                            <div class="row">
+                                <a href="http://41.media.tumblr.com/9d3e6a9c89a856a2ad0be3ab4ca598b2/tumblr_mrn3dc10Wa1r1thfzo4_1280.jpg" data-toggle="lightbox" data-gallery="multiimages" data-footer="Big ass waterfall- using footer instead of title" class="col-sm-4">
+                                    <img src="//41.media.tumblr.com/9d3e6a9c89a856a2ad0be3ab4ca598b2/tumblr_mrn3dc10Wa1r1thfzo4_1280.jpg" class="img-responsive">
+                                </a>
+                                <a href="http://41.media.tumblr.com/9d3e6a9c89a856a2ad0be3ab4ca598b2/tumblr_mrn3dc10Wa1r1thfzo4_1280.jpg" data-toggle="lightbox" data-gallery="multiimages" data-title="Cool bottle" data-footer="Now fill it with whiskey" class="col-sm-4">
+                                    <img src="//41.media.tumblr.com/9d3e6a9c89a856a2ad0be3ab4ca598b2/tumblr_mrn3dc10Wa1r1thfzo4_1280.jpg" class="img-responsive">
+                                </a>
+                                <a href="http://36.media.tumblr.com/de356cd6570d7c26e73979467f296f67/tumblr_mrn3dc10Wa1r1thfzo6_1280.jpg" data-toggle="lightbox" class="col-sm-4">
+                                    <img src="//36.media.tumblr.com/de356cd6570d7c26e73979467f296f67/tumblr_mrn3dc10Wa1r1thfzo6_1280.jpg" class="img-responsive">
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+
+                    <h3 class="page-header" id="single-youtube">Example #3: Single YouTube / Vimeo Video</h3>
+                    <h4>YouTube</h4>
+                    <p>You can use various YouTube URL formats, the regex used is: <code>/^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/</code></p>
+                    <p><a href="http://www.youtube.com/watch?v=k6mFF3VmVAs" data-toggle="lightbox">Ghostpoet - Cash and Carry Me Home</a></p>
+                    <p><a href="http://youtu.be/b0jqPvpn3sY" data-toggle="lightbox">Tame Impala - Elephant (using youtu.be link)</a></p>
+                    <br />
+                    <h4>Vimeo</h4>
+                    <p>You cannot embed Vimeo videos using the standard url (ie http://vimeo.com/80629469); you must link to the embed source (ie player.vimeo.com/video/80629469). This will mean your link url - if the JavaScript fails, will open the full screen player (try opening the first link below in a new tab); the solution to this is to set the lightbox source directly - the second link below does this.</p>
+                    <p><a href="http://player.vimeo.com/video/80629469" data-toggle="lightbox">City Lights - from Colin Rich (using embed link)</a></p>
+                    <p><a href="http://vimeo.com/80629469" data-remote="http://player.vimeo.com/video/80629469" data-toggle="lightbox">City Lights - from Colin Rich</a> (with reccommended <code>data-remote</code> setting)</p>
+                    <br />
+                    <h4>Instagram</h4>
+                    <p></p>
+                    <p><a href="http://instagram.com/p/pZfG1fPfuX/" data-toggle="lightbox" data-title="Plug for our new service">GOtags.co.uk</a></p>
+                    <p>This also works with photos: <a href="https://instagram.com/p/0wbypvPfmQ/" data-toggle="lightbox">GOtags.co.uk</a></p>
+                    <br />
+                    <h4>Forcing width</h4>
+                    <p>Set the width of the video</p>
+                    <p><a href="http://www.youtube.com/watch?v=k6mFF3VmVAs" data-toggle="lightbox">Ghostpoet - Cash and Carry Me Home (standard)</a></p>
+                    <p><a href="http://www.youtube.com/watch?v=k6mFF3VmVAs" data-toggle="lightbox" data-width="640">Ghostpoet - Cash and Carry Me Home (640 x 360)</a></p>
+                    <p><a href="http://www.youtube.com/watch?v=k6mFF3VmVAs" data-toggle="lightbox" data-width="1280">Ghostpoet - Cash and Carry Me Home (1280 x 780)</a></p>
+
+                    <h3 class="page-header" id="youtube-gallery">Example #4: Gallery of YouTube Videos</h3>
+                    <div class="row">
+                        <div class="col-md-offset-1 col-md-10">
+                            <div class="row">
+                                <a href="http://www.youtube.com/watch?v=k6mFF3VmVAs" data-toggle="lightbox" data-gallery="youtubevideos" class="col-sm-4">
+                                    <img src="//i1.ytimg.com/vi/yP11r5n5RNg/mqdefault.jpg" class="img-responsive">
+                                </a>
+                                <a href="http://youtu.be/iQ4D273C7Ac" data-toggle="lightbox" data-gallery="youtubevideos" class="col-sm-4">
+                                    <img src="//i1.ytimg.com/vi/iQ4D273C7Ac/mqdefault.jpg" class="img-responsive">
+                                </a>
+                                <a href="//www.youtube.com/embed/b0jqPvpn3sY" data-toggle="lightbox" data-gallery="youtubevideos" class="col-sm-4">
+                                    <img src="//i1.ytimg.com/vi/b0jqPvpn3sY/mqdefault.jpg" class="img-responsive">
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+
+                    <h3 class="page-header" id="mixed-gallery">Example #5: Mixed gallery</h3>
+                    <div class="row">
+                        <div class="col-md-offset-1 col-md-10">
+                            <div class="row">
+                                <a href="http://www.youtube.com/watch?v=k6mFF3VmVAs" data-toggle="lightbox" data-gallery="mixedgallery" class="col-sm-4">
+                                    <img src="//i1.ytimg.com/vi/yP11r5n5RNg/mqdefault.jpg" class="img-responsive">
+                                </a>
+                                <a href="http://41.media.tumblr.com/9d3e6a9c89a856a2ad0be3ab4ca598b2/tumblr_mrn3dc10Wa1r1thfzo4_1280.jpg" data-toggle="lightbox" data-gallery="mixedgallery" class="col-sm-4">
+                                    <img src="//41.media.tumblr.com/9d3e6a9c89a856a2ad0be3ab4ca598b2/tumblr_mrn3dc10Wa1r1thfzo4_1280.jpg" class="img-responsive">
+                                </a>
+                                <a href="http://vimeo.com/80629469" data-remote="http://player.vimeo.com/video/80629469" data-toggle="lightbox" data-gallery="mixedgallery" class="col-sm-4">
+                                    <img src="//b.vimeocdn.com/ts/458/070/458070637_200.jpg" class="img-responsive">
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+
+                    <h3 class="page-header" id="programatically-call">Example #6: Programatically call</h3>
+                    <p>These two examples are opened via the JavaScript at the bottom of the source.</p>
+                    <div class="row">
+                        <div class="col-md-offset-1 col-md-10">
+                            <div class="row">
+                                <a href="http://41.media.tumblr.com/838b44224e39c30cd43490deb11b919d/tumblr_mrn3dc10Wa1r1thfzo1_1280.jpg" id="open-image" class="col-sm-4">
+                                    <img src="//41.media.tumblr.com/838b44224e39c30cd43490deb11b919d/tumblr_mrn3dc10Wa1r1thfzo1_1280.jpg" class="img-responsive">
+                                </a>
+                                <a href="http://youtu.be/iQ4D273C7Ac" id="open-youtube" class="col-sm-4">
+                                    <img src="//i1.ytimg.com/vi/iQ4D273C7Ac/mqdefault.jpg" class="img-responsive">
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+
+                    <h3 class="page-header" id="data-remote">Example #7: Via <code>data-remote</code></h3>
+                    <div class="row">
+                        <div class="col-md-offset-1 col-md-10">
+                            <div class="row">
+                                <img src="//41.media.tumblr.com/9d3e6a9c89a856a2ad0be3ab4ca598b2/tumblr_mrn3dc10Wa1r1thfzo4_1280.jpg" data-toggle="lightbox" data-remote="http://41.media.tumblr.com/9d3e6a9c89a856a2ad0be3ab4ca598b2/tumblr_mrn3dc10Wa1r1thfzo4_1280.jpg" class="img-responsive col-sm-4">
+                                <img src="//i1.ytimg.com/vi/b0jqPvpn3sY/mqdefault.jpg" data-toggle="lightbox" data-remote="//www.youtube.com/embed/b0jqPvpn3sY" class="img-responsive col-sm-4">
+                            </div>
+                        </div>
+                    </div>
+
+                    <h3 class="page-header" id="different-sizes">Example #8: Gallery of different sized images</h3>
+                    <div class="row">
+                        <div class="col-md-offset-1 col-md-10">
+                            <div class="row">
+                                <a href="https://lh5.googleusercontent.com/-jl_I19YyRVM/T0oJ3PCKZuI/AAAAAAAARRs/-gfmn1LxMJ8/s1280/tilt%2520shift%2520baseball.jpg" data-toggle="lightbox" data-gallery="imagesizes" class="col-sm-3">
+                                    <img src="//lh5.googleusercontent.com/-jl_I19YyRVM/T0oJ3PCKZuI/AAAAAAAARRs/-gfmn1LxMJ8/s128/tilt%20shift%20baseball.jpg" class="img-responsive">
+                                </a>
+                                <a href="https://lh4.googleusercontent.com/-lB-KDQlhdAE/T0oJGy0-UOI/AAAAAAAAQyw/K-1hc5M7EQM/s800/IMG_1193%2520-%2520original.jpg" data-toggle="lightbox" data-gallery="imagesizes" class="col-sm-3">
+                                    <img src="//lh4.googleusercontent.com/-lB-KDQlhdAE/T0oJGy0-UOI/AAAAAAAAQyw/K-1hc5M7EQM/s128/IMG_1193%20-%20original.jpg" class="img-responsive">
+                                </a>
+                                <a href="https://lh5.googleusercontent.com/-cfT_8CMK26k/T0oJMAxOl2I/AAAAAAAAQzI/TaDocinT6So/s912/P1010046%2520-%2520original.jpg" data-toggle="lightbox" data-gallery="imagesizes" class="col-sm-3">
+                                    <img src="//lh5.googleusercontent.com/-cfT_8CMK26k/T0oJMAxOl2I/AAAAAAAAQzI/TaDocinT6So/s128/P1010046%20-%20original.jpg" class="img-responsive">
+                                </a>
+                                <a href="https://lh3.googleusercontent.com/-kgMllZrb20s/T0oJD2nFklI/AAAAAAAAQyg/pnMfqLAGNJs/s1024/IMG_0736%2520-%2520original.jpg" data-toggle="lightbox" data-gallery="imagesizes" class="col-sm-3">
+                                    <img src="//lh3.googleusercontent.com/-kgMllZrb20s/T0oJD2nFklI/AAAAAAAAQyg/pnMfqLAGNJs/s128/IMG_0736%20-%20original.jpg" class="img-responsive">
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+
+                    <h3 class="page-header" id="too-large">Example #9: Images too wide for display</h3>
+                    <p>All examples on this page are this example. Too high images don't count, scrolling works fine with the original modal.</p>
+
+                    <h3 class="page-header" id="semantic">Example #10: Semantic code</h3>
+                    <p>So you want to use <code>&lt;figure&gt;</code></p>
+                    <div class="row">
+                        <a href="http://25.media.tumblr.com/de356cd6570d7c26e73979467f296f67/tumblr_mrn3dc10Wa1r1thfzo6_1280.jpg" class="col-sm-3" data-toggle="lightbox">
+                            <figure>
+                                <img src="//25.media.tumblr.com/de356cd6570d7c26e73979467f296f67/tumblr_mrn3dc10Wa1r1thfzo6_400.jpg" class="img-responsive" alt="">
+                                <figcaption>@gregfoster</figcaption>
+                            </figure>
+                        </a>
+                    </div>
+
+                    <h3 class="page-header" id="wrappers">Example #11: Column wrappers</h3>
+                    <p>This shows that the images do not need to be columns as per the other examples. Use <code>data-parent</code> on the gallery item, or set it via the options.</p>
+                    <div class="row wrapper-parent">
+                        <div class="col-sm-3">
+                            <a href="http://www.youtube.com/watch?v=k6mFF3VmVAs" data-toggle="lightbox" data-gallery="columnwrappers" data-parent=".wrapper-parent">
+                                <img src="//i1.ytimg.com/vi/yP11r5n5RNg/mqdefault.jpg" class="img-responsive">
+                            </a>
+                        </div>
+                        <div class="col-sm-3">
+                            <a href="http://41.media.tumblr.com/9d3e6a9c89a856a2ad0be3ab4ca598b2/tumblr_mrn3dc10Wa1r1thfzo4_1280.jpg" data-toggle="lightbox" data-gallery="columnwrappers" data-parent=".wrapper-parent">
+                                <img src="//41.media.tumblr.com/9d3e6a9c89a856a2ad0be3ab4ca598b2/tumblr_mrn3dc10Wa1r1thfzo4_1280.jpg" class="img-responsive">
+                            </a>
+                        </div>
+                        <div class="col-sm-3">
+                            <a href="//www.youtube.com/embed/b0jqPvpn3sY" data-toggle="lightbox" data-gallery="columnwrappers" data-parent=".wrapper-parent">
+                                <img src="//i1.ytimg.com/vi/b0jqPvpn3sY/mqdefault.jpg" class="img-responsive">
+                            </a>
+                        </div>
+                    </div>
+
+                    <h3 class="page-header" id="global-galleries">Example #12: Global galleries</h3>
+                    <p>If you're gallery images have different parents you may wish to have all images with the same gallery tag to open regardless of their parent. To do this, set <code>data-parent</code> to the highest element you know of - on this page it is the <code>div.container</code>.</p>
+                    <p>You can also leave the <code>data-parent</code> attribute empty, and it will default to <code>document.body</code>. This example uses a combination of the two.</p>
+                    <div class="row">
+                        <div class="col-sm-4">
+                            <a href="http://25.media.tumblr.com/de356cd6570d7c26e73979467f296f67/tumblr_mrn3dc10Wa1r1thfzo6_1280.jpg" data-gallery="global-gallery" data-parent="" data-toggle="lightbox">
+                                <figure>
+                                    <img src="//25.media.tumblr.com/de356cd6570d7c26e73979467f296f67/tumblr_mrn3dc10Wa1r1thfzo6_400.jpg" class="img-responsive" alt="">
+                                    <figcaption>@gregfoster</figcaption>
+                                </figure>
+                            </a>
+                        </div>
+                        <div class="col-sm-4">
+                            <a href="http://41.media.tumblr.com/9d3e6a9c89a856a2ad0be3ab4ca598b2/tumblr_mrn3dc10Wa1r1thfzo4_1280.jpg" data-toggle="lightbox" data-gallery="global-gallery" data-parent="">
+                                <img src="//41.media.tumblr.com/9d3e6a9c89a856a2ad0be3ab4ca598b2/tumblr_mrn3dc10Wa1r1thfzo4_1280.jpg" class="img-responsive">
+                            </a>
+                        </div>
+                        <div class="col-sm-4">
+                            <a href="https://lh4.googleusercontent.com/-lB-KDQlhdAE/T0oJGy0-UOI/AAAAAAAAQyw/K-1hc5M7EQM/s800/IMG_1193%2520-%2520original.jpg" data-toggle="lightbox"  data-gallery="global-gallery" data-parent=".container">
+                                <img src="//lh4.googleusercontent.com/-lB-KDQlhdAE/T0oJGy0-UOI/AAAAAAAAQyw/K-1hc5M7EQM/s800/IMG_1193%2520-%2520original.jpg" class="img-responsive">
+                            </a>
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col-sm-4">
+                        </div>
+                        <div class="col-sm-4">
+                            <a href="https://lh5.googleusercontent.com/-jl_I19YyRVM/T0oJ3PCKZuI/AAAAAAAARRs/-gfmn1LxMJ8/s1280/tilt%2520shift%2520baseball.jpg" data-toggle="lightbox"  data-gallery="global-gallery" data-parent=".container">
+                                <img src="//lh5.googleusercontent.com/-jl_I19YyRVM/T0oJ3PCKZuI/AAAAAAAARRs/-gfmn1LxMJ8/s1280/tilt%2520shift%2520baseball.jpg" class="img-responsive">
+                            </a>
+                        </div>
+                        <div class="col-sm-4">
+                            <a href="//www.youtube.com/embed/b0jqPvpn3sY" data-toggle="lightbox" data-gallery="global-gallery" data-parent="">
+                                <img src="//i1.ytimg.com/vi/b0jqPvpn3sY/mqdefault.jpg" class="img-responsive">
+                            </a>
+                        </div>
+                    </div>
+
+                    <h3 class="page-header" id="check-is-image">Example #13: No-extension images / presume everything is an image</h3>
+                    <p>If the images you are linking to have no extension, the lightbox cannot detect that is an image; therefore you need to tell the lightbox what <code>data-type</code> it is.</p>
+                    <p><a href="http://nla.gov.au/nla.pic-an22199070-gd600n" data-title="Force image display" data-footer="The remote of this modal has no extension: http://nla.gov.au/nla.pic-an22199070-gd600n" data-toggle="lightbox" data-type="image">Click here for an image, but with no extension.</a></p>
+                    <p><a href="http://nla.gov.au/nla.pic-an22199070-gd600n" data-toggle="lightbox">This link is missing the type attribute, and will not work.</a></p>
+                    <p><a href="http://www.youtube.com/watch?v=b0jqPvpn3sY" data-toggle="lightbox" data-type="image">This link is linking to a YouTube video, but forcing an image.</a></p>
+
+                    <h3 class="page-header" id="on-navigate">Example #14: On navigate event example</h3>
+                    <p>The argument given is the direction of navigation. Open your developer console and use any gallery example.</p>
+
+                    <h3 class="page-header" id="hidden-elements">Example #15: Hidden elements</h3>
+                    <p>Facebook style, only show a few images but have a large gallery</p>
+					<div class="row">
+                        <div class="col-md-offset-2 col-md-8">
+                            <div class="row">
+                                <a href="http://41.media.tumblr.com/f37ac708134914c471073e4c0b47328d/tumblr_mrn3dc10Wa1r1thfzo8_1280.jpg" data-toggle="lightbox" data-gallery="hiddenimages" data-title="People walking down stairs" class="col-sm-4">
+                                    <img src="//41.media.tumblr.com/f37ac708134914c471073e4c0b47328d/tumblr_mrn3dc10Wa1r1thfzo8_1280.jpg" class="img-responsive">
+                                </a>
+                                <a href="http://41.media.tumblr.com/838b44224e39c30cd43490deb11b919d/tumblr_mrn3dc10Wa1r1thfzo1_1280.jpg" data-toggle="lightbox" data-gallery="hiddenimages" data-title="Man getting wet" class="col-sm-4">
+                                    <img src="//41.media.tumblr.com/838b44224e39c30cd43490deb11b919d/tumblr_mrn3dc10Wa1r1thfzo1_1280.jpg" class="img-responsive">
+                                </a>
+                                <a href="http://41.media.tumblr.com/e06a3513b0b36843f54bee99aeac689a/tumblr_mrn3dc10Wa1r1thfzo2_1280.jpg" data-toggle="lightbox" data-gallery="hiddenimages" data-title="Someone lost their dress" class="col-sm-4">
+                                    <img src="//41.media.tumblr.com/e06a3513b0b36843f54bee99aeac689a/tumblr_mrn3dc10Wa1r1thfzo2_1280.jpg" class="img-responsive">
+                                </a>
+								<!-- elements not showing, use data-remote -->
+								<div data-toggle="lightbox" data-gallery="hiddenimages" data-remote="http://41.media.tumblr.com/9d3e6a9c89a856a2ad0be3ab4ca598b2/tumblr_mrn3dc10Wa1r1thfzo4_1280.jpg" data-title="Hidden item 1"></div>
+								<div data-toggle="lightbox" data-gallery="hiddenimages" data-remote="//www.youtube.com/embed/b0jqPvpn3sY" data-title="Hidden item 2"></div>
+								<div data-toggle="lightbox" data-gallery="hiddenimages" data-remote="http://41.media.tumblr.com/9d3e6a9c89a856a2ad0be3ab4ca598b2/tumblr_mrn3dc10Wa1r1thfzo4_1280.jpg" data-title="Hidden item 3"></div>
+								<div data-toggle="lightbox" data-gallery="hiddenimages" data-remote="http://41.media.tumblr.com/9d3e6a9c89a856a2ad0be3ab4ca598b2/tumblr_mrn3dc10Wa1r1thfzo4_1280.jpg" data-title="Hidden item 4"></div>
+								<div data-toggle="lightbox" data-gallery="hiddenimages" data-remote="http://36.media.tumblr.com/de356cd6570d7c26e73979467f296f67/tumblr_mrn3dc10Wa1r1thfzo6_1280.jpg" data-title="Hidden item 5"></div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <h3 class="page-header" id="remote-content">Example #16: Remote content</h3>
+                    <p>The Bootstrap modal originally allowed for remote loading, but this is to be removed in v4; this functionality demonstrates the work around.</p>
+					<p>Given a URL, that is not an image or video (including unforced types [see example 13]), load the content using jQuery load(). An image and video is given below as proof gallery.</p>
+					<div class="row">
+                        <div class="col-md-offset-1 col-md-10">
+                            <div class="row">
+                                <p class="col-sm-3"><a href="./remote/page1.html" data-title="Page 1" data-toggle="lightbox" data-parent="" data-gallery="remoteload">Open up local Page 1</a></p>
+                                <a href="http://41.media.tumblr.com/9d3e6a9c89a856a2ad0be3ab4ca598b2/tumblr_mrn3dc10Wa1r1thfzo4_1280.jpg" data-parent="" data-toggle="lightbox" data-gallery="remoteload" class="col-sm-3">
+                                    <img src="//41.media.tumblr.com/9d3e6a9c89a856a2ad0be3ab4ca598b2/tumblr_mrn3dc10Wa1r1thfzo4_1280.jpg" class="img-responsive">
+                                </a>
+								<p class="col-sm-3"><a href="./remote/page2.html" data-title="Page 2" data-toggle="lightbox" data-parent="" data-gallery="remoteload">Open up local Page 2</a></p>
+                                <a href="http://vimeo.com/80629469" data-remote="http://player.vimeo.com/video/80629469" data-toggle="lightbox" data-parent="" data-gallery="remoteload" class="col-sm-3">
+                                    <img src="//b.vimeocdn.com/ts/458/070/458070637_200.jpg" class="img-responsive">
+                                </a>
+                            </div>
+                            <div class="row">
+                                <p class="col-sm-3"><a href="http://news.bbc.co.uk" data-title="BBC News - not responsive" data-toggle="lightbox" data-parent="" data-gallery="remoteload">Open up BBC news</a></p>
+                                <a href="http://vimeo.com/80629469" data-remote="http://player.vimeo.com/video/80629469" data-toggle="lightbox" data-parent="" data-gallery="remoteload" class="col-sm-3">
+                                    <img src="//b.vimeocdn.com/ts/458/070/458070637_200.jpg" class="img-responsive">
+                                </a>
+								<p class="col-sm-3"><a href="http://getbootstrap.com" data-title="Bootstrap - Responsive" data-toggle="lightbox" data-parent="" data-gallery="remoteload">Open up Bootstrap</a></p>
+                                <a href="http://41.media.tumblr.com/9d3e6a9c89a856a2ad0be3ab4ca598b2/tumblr_mrn3dc10Wa1r1thfzo4_1280.jpg" data-toggle="lightbox" data-parent="" data-gallery="remoteload" class="col-sm-3">
+                                    <img src="//41.media.tumblr.com/9d3e6a9c89a856a2ad0be3ab4ca598b2/tumblr_mrn3dc10Wa1r1thfzo4_1280.jpg" class="img-responsive">
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+
+                    <h3 class="page-header" id="navigateTo">Example #17: navigateTo</h3>
+					<p>Must be setup programatically to run the setup (view the source of this page)</p>
+					<div class="row">
+                        <div class="col-md-offset-2 col-md-8">
+                            <div class="row">
+                                <a href="http://41.media.tumblr.com/f37ac708134914c471073e4c0b47328d/tumblr_mrn3dc10Wa1r1thfzo8_1280.jpg" data-toggle="lightbox" data-gallery="navigateTo" data-footer="Click <a href='#'>here</a> to jump to image 3" class="col-sm-4">
+                                    <img src="//41.media.tumblr.com/f37ac708134914c471073e4c0b47328d/tumblr_mrn3dc10Wa1r1thfzo8_1280.jpg" class="img-responsive">
+                                </a>
+                                <a href="http://41.media.tumblr.com/838b44224e39c30cd43490deb11b919d/tumblr_mrn3dc10Wa1r1thfzo1_1280.jpg" data-toggle="lightbox" data-gallery="navigateTo" class="col-sm-4">
+                                    <img src="//41.media.tumblr.com/838b44224e39c30cd43490deb11b919d/tumblr_mrn3dc10Wa1r1thfzo1_1280.jpg" class="img-responsive">
+                                </a>
+                                <a href="http://41.media.tumblr.com/e06a3513b0b36843f54bee99aeac689a/tumblr_mrn3dc10Wa1r1thfzo2_1280.jpg" data-toggle="lightbox" data-gallery="navigateTo" class="col-sm-4">
+                                    <img src="//41.media.tumblr.com/e06a3513b0b36843f54bee99aeac689a/tumblr_mrn3dc10Wa1r1thfzo2_1280.jpg" class="img-responsive">
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+
+                </div>
+            </div>
+        </div>
+
+        <script src="//code.jquery.com/jquery.js"></script>
+        <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
+        <script src="../dist/ekko-lightbox.js"></script>
+
+        <script type="text/javascript">
+            $(document).ready(function ($) {
+                // delegate calls to data-toggle="lightbox"
+                $(document).delegate('*[data-toggle="lightbox"]:not([data-gallery="navigateTo"])', 'click', function(event) {
+                    event.preventDefault();
+                    return $(this).ekkoLightbox({
+                        onShown: function() {
+                            if (window.console) {
+                                return console.log('Checking our the events huh?');
+                            }
+                        },
+						onNavigate: function(direction, itemIndex) {
+                            if (window.console) {
+                                return console.log('Navigating '+direction+'. Current item: '+itemIndex);
+                            }
+						}
+                    });
+                });
+
+                //Programatically call
+                $('#open-image').click(function (e) {
+                    e.preventDefault();
+                    $(this).ekkoLightbox();
+                });
+                $('#open-youtube').click(function (e) {
+                    e.preventDefault();
+                    $(this).ekkoLightbox();
+                });
+
+				// navigateTo
+                $(document).delegate('*[data-gallery="navigateTo"]', 'click', function(event) {
+                    event.preventDefault();
+
+                    var lb;
+                    return $(this).ekkoLightbox({
+                        onShown: function() {
+
+                            lb = this;
+
+							$(lb.modal_content).on('click', '.modal-footer a', function(e) {
+
+								e.preventDefault();
+								lb.navigateTo(2);
+
+							});
+
+                        }
+                    });
+                });
+
+
+            });
+        </script>
+    </body>
+</html>