diff --git a/node_modules/mdl-ext/src/lightbox/_lightbox.scss b/node_modules/mdl-ext/src/lightbox/_lightbox.scss
new file mode 100644
index 0000000..721d181
--- /dev/null
+++ b/node_modules/mdl-ext/src/lightbox/_lightbox.scss
@@ -0,0 +1,141 @@
+@charset "UTF-8";
+
+/**
+ * Copyright 2016 Leif Olsen. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+// Use of this module requires the user to include variables from material-design-lite
+//@import "../../node_modules/material-design-lite/src/variables";
+//@import "../../node_modules/material-design-lite/src/mixins";
+@import "../variables";
+
+.mdlext-lightbox {
+  user-select: none;
+  cursor: default;
+  position: relative;
+  width: auto;
+  max-width: 100%;
+  margin: 0 auto;
+  border: $mdlext-lightbox-border;
+  border-radius: $mdlext-lightbox-border-radius;
+  background-color: $mdlext-lightbox-background-color;
+  box-sizing: border-box;
+  outline: 0;
+  display: block; // display: flex and IE11 has issues with reposition. Set display:block for now.
+
+  *,
+  *::before,
+  *::after,
+  input[type="search"] {
+    box-sizing: border-box;
+  }
+
+  .mdlext-lightbox__slider {
+    // Displays prevvious, current and next image while dragging
+    // Elements are created by lightbox component when dragging starts
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: flex;
+    justify-content: center;
+
+    .mdlext-lightbox__slider__slide {
+      flex-shrink: 0;
+      display: block;
+      text-align: left;
+      color: #7f7f7f;
+      background-size: cover;
+      background-position: center;
+      background-repeat: no-repeat;
+
+      //&:nth-child(1),
+      //&:nth-child(3) {
+      //  filter: blur(1px);
+      //}
+    }
+  }
+
+  figure {
+    margin: $mdlext-lightbox-figure-margin;
+    padding: $mdlext-lightbox-figure-padding;
+    position: relative;
+
+    img {
+      width: 100%;
+      max-width: 100%;
+      height: auto;
+      border: 0;
+      outline: 0;
+    }
+    figcaption {
+      @include typo-caption($colorContrast: false, $usePreferred: true);
+
+      display: block;
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      max-width: 100%;
+      height: auto;
+      max-height: 50%;
+      overflow: auto;
+      padding: 8px;
+      background-color: $mdlext-lightbox-figcaption-background-color;
+      transform-origin: bottom;
+      transform: scaleY(0);
+      transition: 0.2s ease-in-out;
+
+      &.mdlext-lightbox__show-figcaption {
+        transform: scaleY(1);
+      }
+      tbody {
+        th {
+          text-align: left;
+        }
+        th,
+        td {
+          vertical-align: text-top;
+        }
+      }
+    }
+  }
+  .mdl-card__menu {
+    color: #ffffff;
+    z-index: 1;
+  }
+  footer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background-color: $mdlext-lightbox-footer-background-color;
+
+    .mdl-card__supporting-text {
+      flex: 1;
+      overflow: hidden;
+      padding: 0;
+      height: $card-supporting-text-line-height;
+      width: 100%;
+    }
+    nav {
+      display: flex;
+    }
+  }
+
+  &.mdlext-lightbox--sticky-footer footer {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+  }
+}
diff --git a/node_modules/mdl-ext/src/lightbox/lightbox.js b/node_modules/mdl-ext/src/lightbox/lightbox.js
new file mode 100644
index 0000000..2e14463
--- /dev/null
+++ b/node_modules/mdl-ext/src/lightbox/lightbox.js
@@ -0,0 +1,359 @@
+/**
+ * @license
+ * Copyright 2016 Leif Olsen. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * This code is built with Google Material Design Lite,
+ * which is Licensed under the Apache License, Version 2.0
+ */
+
+
+/**
+ * Responsive Lightbox
+ */
+
+import fullThrottle from '../utils/full-throttle';
+import {
+  VK_ESC,
+  VK_SPACE,
+  VK_END,
+  VK_HOME,
+  VK_ARROW_LEFT,
+  VK_ARROW_UP,
+  VK_ARROW_RIGHT,
+  VK_ARROW_DOWN,
+  IS_UPGRADED
+} from '../utils/constants';
+
+(function() {
+  'use strict';
+
+  const LIGHTBOX = 'mdlext-lightbox';
+  const LIGHTBOX_SLIDER = 'mdlext-lightbox__slider';
+  const LIGHTBOX_SLIDER_SLIDE = 'mdlext-lightbox__slider__slide';
+  const STICKY_FOOTER = 'mdlext-lightbox--sticky-footer';
+  const BUTTON = 'mdl-button';
+
+  /**
+   * https://github.com/google/material-design-lite/issues/4205
+   * @constructor
+   * @param {Element} element The element that will be upgraded.
+   */
+  const MaterialExtLightbox = function MaterialExtLightbox(element) {
+    // Stores the element.
+    this.element_ = element;
+
+    // Initialize instance.
+    this.init();
+  };
+  window['MaterialExtLightbox'] = MaterialExtLightbox;
+
+
+  /**
+   * Handle keypress
+   * @param event
+   * @private
+   */
+  MaterialExtLightbox.prototype.keyDownHandler_ = function(event) {
+
+    if (event) {
+      if ( event.keyCode === VK_ESC || event.keyCode === VK_SPACE
+        || event.keyCode === VK_END || event.keyCode === VK_HOME
+        || event.keyCode === VK_ARROW_UP || event.keyCode === VK_ARROW_LEFT
+        || event.keyCode === VK_ARROW_DOWN || event.keyCode === VK_ARROW_RIGHT) {
+
+        if(event.keyCode !== VK_ESC) {
+          event.preventDefault();
+          event.stopPropagation();
+        }
+
+        let action = 'first';
+        if (event.keyCode === VK_END) {
+          action = 'last';
+        }
+        else if (event.keyCode === VK_ARROW_UP || event.keyCode === VK_ARROW_LEFT) {
+          action = 'prev';
+        }
+        else if (event.keyCode === VK_ARROW_DOWN || event.keyCode === VK_ARROW_RIGHT) {
+          action = 'next';
+        }
+        else if (event.keyCode === VK_SPACE) {
+          action = 'select';
+        }
+        else if (event.keyCode === VK_ESC) {
+          action = 'cancel';
+        }
+
+        dispatchAction_(action, this);
+      }
+    }
+  };
+
+  /**
+   * Handle button clicks
+   * @param event
+   * @private
+   */
+  MaterialExtLightbox.prototype.buttonClickHandler_ = function(event) {
+
+    if (event) {
+      event.preventDefault();
+      event.stopPropagation();
+
+      dispatchAction_(this.getAttribute('data-action') || '', this);
+
+      const n = this.closest(`.${LIGHTBOX}`);
+      if(n) {
+        n.focus();
+      }
+    }
+  };
+
+  /**
+   * Dispatches an action custom event
+   * @param action
+   * @param source
+   * @param target
+   * @private
+   */
+  const dispatchAction_ = (action, source, target = source) => {
+
+    target.dispatchEvent(new CustomEvent('action', {
+      bubbles: true,
+      cancelable: true,
+      detail: {
+        action: action || '',
+        source: source
+      }
+    }));
+  };
+
+  /**
+   * Reposition dialog if component parent element is "DIALOG"
+   * @param lightboxElement
+   * @private
+   */
+  const repositionDialog_ = lightboxElement => {
+    const footerHeight = (footer, isSticky) => isSticky && footer ? footer.offsetHeight : 0;
+
+    const reposition = (dialog, fh) => {
+      if (window.getComputedStyle(dialog).position === 'absolute') {
+        const scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
+        const topValue = scrollTop + (window.innerHeight - dialog.offsetHeight - fh) / 2;
+        dialog.style.top = `${Math.max(scrollTop, topValue)}px`;
+      }
+    };
+
+    const p = lightboxElement.parentNode;
+    const dialog = p && p.nodeName === 'DIALOG' ? p : null;
+
+    if(dialog && dialog.hasAttribute('open')) {
+      lightboxElement.style.width = 'auto';
+      lightboxElement.style.maxWidth = '100%';
+      const img = lightboxElement.querySelector('img');
+      if(img) {
+        lightboxElement.style.maxWidth = img.naturalWidth !== undefined ? `${img.naturalWidth}px` : `${img.width}px` || '100%';
+      }
+
+      const fh = footerHeight(lightboxElement.querySelector('footer'), lightboxElement.classList.contains(STICKY_FOOTER));
+      const vh = Math.max(document.documentElement.clientHeight, window.innerHeight || 0) - fh;
+      if (dialog.offsetHeight > vh) {
+        let n = 0;
+        while(dialog.offsetHeight > vh && ++n < 4) {
+          lightboxElement.style.width = `${lightboxElement.offsetWidth * vh / lightboxElement.offsetHeight}px`;
+        }
+      }
+      reposition(dialog, fh);
+    }
+  };
+
+  /**
+   * Handle image load
+   * @param event
+   * @private
+   */
+
+  MaterialExtLightbox.prototype.imgLoadHandler_ = function( /*event*/ ) {
+    repositionDialog_(this);
+  };
+
+
+  /**
+   * Handle image drag
+   * @param event
+   * @private
+     */
+  MaterialExtLightbox.prototype.imgDragHandler_ = function(event ) {
+
+    const setStyles = ( element, properties ) => {
+      //noinspection JSAnnotator
+      for(const [key, value] of Object.entries(properties)) {
+        element.style[key] = value;
+      }
+      // ... or:
+      //for (const key in properties) {
+      //  element.style[key] = properties[key];
+      //}
+    };
+
+    event.preventDefault();
+    //event.stopPropagation();
+
+    const x = event.clientX || (event.touches !== undefined ? event.touches[0].clientX : 0);
+
+    const img = this;
+    img.style.opacity = '0.2';
+
+    const slider = document.createElement('div');
+    slider.classList.add(LIGHTBOX_SLIDER);
+    setStyles(slider, {'width': `${img.offsetWidth}px`, 'height': `${img.offsetHeight}px`} );
+
+    let slide  = document.createElement('div');
+    slide.classList.add(LIGHTBOX_SLIDER_SLIDE);
+    slide.textContent = '>';
+    setStyles(slide, {
+      'width'           : `${img.offsetWidth}px`,
+      'height'          : `${img.offsetHeight}px`,
+      'line-height'     : `${img.offsetHeight}px`,
+      'font-size'       : `${img.offsetHeight/4}px`,
+      'text-align'      : 'right',
+      'background-image': `url("${img.getAttribute('data-img-url-prev') || ''}")`
+    });
+    slider.appendChild(slide);
+
+    slide  = document.createElement('div');
+    slide.classList.add(LIGHTBOX_SLIDER_SLIDE);
+    setStyles(slide, {
+      'width'           : `${img.offsetWidth}px`,
+      'height'          : `${img.offsetHeight}px`,
+      'background-image': `url("${img.src}")`
+    });
+    slider.appendChild(slide);
+
+    slide  = document.createElement('div');
+    slide.classList.add(LIGHTBOX_SLIDER_SLIDE);
+    slide.textContent = '<';
+    setStyles(slide, {
+      'width'           : `${img.offsetWidth}px`,
+      'height'          : `${img.offsetHeight}px`,
+      'line-height'     : `${img.offsetHeight}px`,
+      'font-size'       : `${img.offsetHeight/4}px`,
+      'text-align'      : 'left',
+      'background-image': `url("${img.getAttribute('data-img-url-next') || ''}")`
+    });
+    slider.appendChild(slide);
+
+    img.parentNode.appendChild(slider);
+
+
+    // drag handler
+    const drag = e => {
+      e.preventDefault();
+      const dx = (e.clientX || (e.touches !== undefined ? e.touches[0].clientX : 0)) - x; // TODO: maybe rewrite to improve performance
+
+      if(slider.offsetWidth - Math.abs(dx) > 19) {
+        slider.style.left = `${dx}px`;
+      }
+    };
+
+    // end drag handler
+    const endDrag = e => {
+      e.preventDefault();
+      //e.stopPropagation();
+
+      window.removeEventListener('mousemove', drag);
+      window.removeEventListener('touchmove', drag);
+      window.removeEventListener('mouseup', endDrag);
+      window.removeEventListener('touchend', endDrag);
+
+      const dx = slider.offsetLeft;
+      img.parentNode.removeChild(slider);
+      img.style.opacity = '1.0';
+
+      if(Math.abs(dx) > 19) {
+        dispatchAction_( (dx > 0 ? 'prev' : 'next') , img);
+      }
+    };
+
+    window.addEventListener('mousemove', drag);
+    window.addEventListener('touchmove', drag);
+    window.addEventListener('mouseup', endDrag);
+    window.addEventListener('touchend',endDrag);
+  };
+
+
+  /**
+   * Initialize component
+   */
+  MaterialExtLightbox.prototype.init = function() {
+
+    if (this.element_) {
+      // Do the init required for this component to work
+      this.element_.addEventListener('keydown', this.keyDownHandler_.bind(this.element_), true);
+
+      if(!Number.isInteger(this.element_.getAttribute('tabindex'))) {
+        this.element_.setAttribute('tabindex', 1);
+      }
+
+      [...this.element_.querySelectorAll(`.${BUTTON}`)].forEach( button =>
+        button.addEventListener('click', this.buttonClickHandler_.bind(button), false)
+      );
+
+      const figcaption = this.element_.querySelector('figcaption');
+      if(figcaption) {
+        figcaption.addEventListener('click', this.buttonClickHandler_.bind(figcaption), false);
+      }
+
+      const footer = this.element_.querySelector('footer');
+      if(footer) {
+        footer.addEventListener('click', this.buttonClickHandler_.bind(footer), false);
+      }
+
+      const img = this.element_.querySelector('img');
+      if(img) {
+        img.addEventListener('load', this.imgLoadHandler_.bind(this.element_), false);
+        img.addEventListener('click', e => e.preventDefault(), true);
+        img.addEventListener('mousedown', this.imgDragHandler_.bind(img), true);
+        img.addEventListener('touchstart', this.imgDragHandler_.bind(img), true);
+      }
+      window.addEventListener('resize', fullThrottle( () => repositionDialog_(this.element_) ));
+      window.addEventListener('orientationchange', () => repositionDialog_(this.element_));
+
+      // Set upgraded flag
+      this.element_.classList.add(IS_UPGRADED);
+    }
+  };
+
+  /*
+   * Downgrade component
+   * E.g remove listeners and clean up resources
+   *
+   * Nothing to downgrade
+   *
+  MaterialExtLightbox.prototype.mdlDowngrade_ = function() {
+  };
+  */
+
+  /**
+   * The component registers itself. It can assume componentHandler is available in the global scope.
+   */
+  /* jshint undef:false */
+  componentHandler.register({
+    constructor: MaterialExtLightbox,
+    classAsString: 'MaterialExtLightbox',
+    cssClass: 'mdlext-js-lightbox'
+  });
+
+})();
+
diff --git a/node_modules/mdl-ext/src/lightbox/readme.md b/node_modules/mdl-ext/src/lightbox/readme.md
new file mode 100644
index 0000000..5744920
--- /dev/null
+++ b/node_modules/mdl-ext/src/lightbox/readme.md
@@ -0,0 +1,322 @@
+# Lightbox
+
+![Lightbox](../../etc/lightbox.png)
+A responsive lightbox to be used in conjunction with e.g. a MDLEXT lightboard component.
+
+## Introduction
+The Material Design Lite Ext (MDLEXT) Lightbox displays an image filling the screen, and dimming out the rest of the web page.
+It acts as a modal dialog, using the `<dialog>` element as a container for the lightbox. The component uses 
+the [Material Design Lite Card component](http://www.getmdl.io/components/index.html#cards-section) to provide a layout for the lightbox.
+
+## How to use the Google Chrome Dialog polyfill 
+
+&nbsp;1. Install [Google Chrome Dialog polyfill](https://github.com/GoogleChrome/dialog-polyfill).
+```sh
+$ npm install --save dialog-polyfill
+```
+
+&nbsp;2. Use the polyfill in a static page.
+```html
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Material Design Lite Extensions</title>
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
+  <link rel="stylesheet" href="node_modules/dialog-polyfill/dialog-polyfill.css" />
+  <link rel="stylesheet" href="node_modules/material-design-lite/material.css" />
+  <link rel="stylesheet" href="node_modules/mdl-ext/lib/mdl-ext.min.css" />
+</head>
+<body>
+<div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer">
+  <main class="mdl-layout__content">
+  </main
+</div>
+<script type="text/javascript" src="node_modules/dialog-polyfill/dialog-polyfill.js" charset="utf-8"></script>
+<script type="text/javascript" src="node_modules/material-design-lite/material.min.js" charset="utf-8"></script>
+<script type="text/javascript" src="node_modules/mdl-ext/lib/mdl-ext.min.js" charset="utf-8"></script>
+</body>
+</html>
+```
+
+&nbsp;3. Use it in your (Webpack) build.
+
+&nbsp;3.1. Import `dialog-polyfill.css` in your main SASS file..
+```css
+@import '../node_modules/dialog-polyfill/dialog-polyfill.css';
+```
+
+&nbsp;3.2. Require `dialog-polyfill`.  
+```javascript
+const dialogPolyfill = require('dialog-polyfill/dialog-polyfill');
+```
+
+&nbsp;... or import the `dialog-polyfill`.  
+```javascript
+import { dialogPolyfill }  from 'dialog-polyfill/dialog-polyfill';
+```
+
+>Adjust path to `node_modules` (libraries) according to where your files are located. 
+>For more information about the dialog polyfill, refer to the [Google Chrome Dialog polyfill](https://github.com/GoogleChrome/dialog-polyfill) documentaion and the Material Design Lite [Dialog](http://www.getmdl.io/components/index.html#dialog-section) section.
+
+## To include a MDLEXT lightbox component
+&nbsp;1. Code a `<dialog>` element with `class="mdlext-dialog"` to display the lightbox as a modal dialog.
+```html
+<dialog class="mdlext-dialog">
+</dialog>
+```
+
+&nbsp;2. Code a `<div>` element with `class="mdlext-lightbox mdlext-js-lightbox mdl-card"` to hold the lightbox.
+```html
+<dialog class="mdlext-dialog">
+  <div class="mdlext-lightbox mdlext-js-lightbox mdl-card">
+  </div>
+</dialog>
+```
+
+&nbsp;3. Code a `<div>` element with `class="mdl-card__menu mdl-color-text--white mdl-typography--body-2-color-contrast"` to hold the close dialog button.
+```html
+<dialog class="mdlext-dialog">
+  <div class="mdlext-lightbox mdlext-js-lightbox mdl-card">
+    <div class="mdl-card__menu mdl-color-text--white mdl-typography--body-2-color-contrast">
+    </div>
+  </div>
+</dialog>
+```
+
+&nbsp;4. Code a `<button>` element with `data-action="close"` and `class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect"` to display the close button. Add an `<i>` element inside the `<button>` element to hold the close icon.
+```html
+<dialog class="mdlext-dialog">
+  <div class="mdlext-lightbox mdlext-js-lightbox mdl-card">
+    <div class="mdl-card__menu mdl-color-text--white mdl-typography--body-2-color-contrast">
+      <button data-action="close" class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect" title="Close">
+        <i class="material-icons">close</i>
+      </button>
+    </div>
+  </div>
+</dialog>
+```
+
+&nbsp;5. Code a `<figure>` element with `class="mdl-card__media"` to hold the image and the image description.
+```html
+<dialog class="mdlext-dialog">
+  <div class="mdlext-lightbox mdlext-js-lightbox mdl-card">
+    <div class="mdl-card__menu mdl-color-text--white mdl-typography--body-2-color-contrast">
+      <button data-action="close" class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect" title="Close">
+        <i class="material-icons">close</i>
+      </button>
+    </div>
+    <figure class="mdl-card__media">
+    </figure>
+  </div>
+</dialog>
+```
+
+&nbsp;5. Inside the `<figure>` element code an empty `<img>` element and an empty `<figcaption>` element to hold the image and the image description.
+```html
+<dialog class="mdlext-dialog">
+  <div class="mdlext-lightbox mdlext-js-lightbox mdl-card">
+    <div class="mdl-card__menu mdl-color-text--white mdl-typography--body-2-color-contrast">
+      <button data-action="close" class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect" title="Close">
+        <i class="material-icons">close</i>
+      </button>
+    </div>
+    <figure class="mdl-card__media">
+      <img src="" alt>
+      <figcaption></figcaption>
+    </figure>
+  </div>
+</dialog>
+```
+
+
+&nbsp;6. Code a `<footer>` element with `class="mdl-card__actions"` to hold the image title and navigation buttons.
+```html
+<dialog class="mdlext-dialog">
+  <div class="mdlext-lightbox mdlext-js-lightbox mdl-card">
+    <div class="mdl-card__menu mdl-color-text--white mdl-typography--body-2-color-contrast">
+      <button data-action="close" class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect" title="Close">
+        <i class="material-icons">close</i>
+      </button>
+    </div>
+    <figure class="mdl-card__media">
+      <img src="" alt>
+      <figcaption></figcaption>
+    </figure>
+    <footer class="mdl-card__actions">
+    </footer>    
+  </div>
+</dialog>
+```
+
+&nbsp;7. Code a `<div>` element with `class="mdl-card__supporting-text"` to hold the image title.
+```html
+<dialog class="mdlext-dialog">
+  <div class="mdlext-lightbox mdlext-js-lightbox mdl-card">
+    <div class="mdl-card__menu mdl-color-text--white mdl-typography--body-2-color-contrast">
+      <button data-action="close" class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect" title="Close">
+        <i class="material-icons">close</i>
+      </button>
+    </div>
+    <figure class="mdl-card__media">
+      <img src="" alt>
+      <figcaption></figcaption>
+    </figure>
+    <footer class="mdl-card__actions">
+      <div class="mdl-card__supporting-text">
+      </div>
+    </footer>    
+  </div>
+</dialog>
+```
+
+&nbsp;8. Code a `<nav>` element to hold the navigation buttons.
+```html
+<dialog class="mdlext-dialog">
+  <div class="mdlext-lightbox mdlext-js-lightbox mdl-card">
+    <div class="mdl-card__menu mdl-color-text--white mdl-typography--body-2-color-contrast">
+      <button data-action="close" class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect" title="Close">
+        <i class="material-icons">close</i>
+      </button>
+    </div>
+    <figure class="mdl-card__media">
+      <img src="" alt>
+      <figcaption></figcaption>
+    </figure>
+    <footer class="mdl-card__actions mdl-card--border">
+      <div class="mdl-card__supporting-text">
+      </div>
+      <nav>
+      </nav>      
+    </footer>    
+  </div>
+</dialog>
+```
+
+
+&nbsp;9. Add your navigation buttons with `class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect"` inside the `<nav>` element.
+```html
+<dialog class="mdlext-dialog">
+  <div class="mdlext-lightbox mdlext-js-lightbox mdl-card">
+    <div class="mdl-card__menu mdl-color-text--white mdl-typography--body-2-color-contrast">
+      <button data-action="close" class="mdl-button mdl-button--icon mdl-js-button" title="Close">
+        <i class="material-icons">close</i>
+      </button>
+    </div>
+    <figure class="mdl-card__media">
+      <img src="" alt>
+      <figcaption></figcaption>
+    </figure>
+    <footer class="mdl-card__actions mdl-card--border">
+      <div class="mdl-card__supporting-text">
+      </div>
+      <nav>
+        <button data-action="first" class="mdl-button mdl-button--icon mdl-js-button" title="First">
+          <i class="material-icons">first_page</i>
+        </button>
+        <button data-action="prev" class="mdl-button mdl-button--icon mdl-js-button" title="Previous">
+          <i class="material-icons">chevron_left</i>
+        </button>
+        <button data-action="next" class="mdl-button mdl-button--icon mdl-js-button" title="Next">
+          <i class="material-icons">chevron_right</i>
+        </button>
+        <button data-action="last" class="mdl-button mdl-button--icon mdl-js-button" title="Last">
+          <i class="material-icons">last_page</i>
+        </button>
+      </nav>      
+    </footer>    
+  </div>
+</dialog>
+```
+Add as many buttons as you like. To identify the button that trigger an custom event, you should assign each button a unique data-action attribute value. 
+The data-action attribute will be emitted as a part of the custom event triggered when a button is clicked.
+
+&nbsp;10. Add an image and open the dialog.
+
+```javascript
+var dialog = document.querySelector('dialog');
+
+// A dialog element MUST be a child of document.body!!
+if(dialog.parentNode.tagName !== 'BODY') {
+  document.body.appendChild(dialog);
+}
+
+if (!('showModal' in dialog)) {
+  dialogPolyfill.registerDialog(dialog);
+}
+var lightbox = dialog.querySelector('.mdlext-lightbox');
+var img = lightbox.querySelector('img'); 
+var supportingText = lightbox.querySelector('.mdl-card__supporting-text');
+var imageDetails = lightbox.querySelector('figcaption'); 
+
+img.setAttribute("src", 'wiew-from-my-window.jpg');
+img.setAttribute("alt", 'View from my window');
+img.setAttribute("title", 'View from my window');
+img.setAttribute('data-img-url-prev', 'some-image.jpg');
+img.setAttribute('data-img-url-next', 'some-other-image.jpg');
+supportingText.innerHTML = 'View from my window';
+imageDetails.innerHTML = 'Photo taken from my window yesterday morning'; 
+
+if(!dialog.open) {
+  dialog.showModal();
+}
+```
+
+### Examples
+* See: [snippets/carousel.html](./snippets/lightbox.html)
+* TRy out [the live demo](http://leifoolsen.github.io/mdl-ext/demo/lightbox.html)
+
+## Keyboard interaction
+The lightbox interacts with the following keyboard keys.
+
+*   `Left arrow` - Emits a custom event with action='prev'
+*   `Right arrow` - Emits a custom event with action='next'
+*   `Up arrow` - behaves the same as left arrow.
+*   `Down arrow` - behaves the same as right arrow.
+*   `End` - Emits a custom event with action='last'
+*   `Home` - Emits a custom event with action='first'
+*   `Space` - Emits a custom event with action='select'
+*   `Esc` - Emits a custom event with action='cancel'
+
+## Mouse / Touch interaction
+*   `Drag/Swipe left` - Emits a custom event with action='next'
+*   `Drag/Swipe right` - Emits a custom event with action='prev'
+
+## Events
+The lightbox emits a custom **action** event when a button contained in the lightbox is clicked, an images is dragged or swiped, 
+or if one of the keys `Arrow Left`, `Arrow Up`, `Arrow Right`, `Arrow Down`, `Home`, `End`, `Space` or `Esc` is pressed. 
+The event has a detail object with the following content:
+```
+{
+  action, // one of: 'first', 'prev', 'next', 'last', 'select', 'close', 'cancel' - 
+          // or any value assigned to a button action attribute (empty string if no action assigned) 
+  source  // the button instance that caused the event, or the lightbox element if a key triggered the event
+}
+```
+
+## Configuration options
+
+The MDLEXT CSS classes apply various predefined visual and behavioral enhancements to the lightbox.
+The table below lists the available classes and their effects.
+
+| MDLEXT class | Effect | Remarks |
+|--------------|--------|---------|
+| `mdlext-lightbox` | Defines a container as an MDLEXT lightbox component | Required on `<div>` element |
+| `mdlext-js-lightbox` | Assigns basic MDL behavior to lightbox | Required on `<div>` element |
+| `mdlext-lightbox__slider` | Displays previous, current and next image when dragging | Element added by component |
+| `mdlext-lightbox__slider__slide` | Holds an image to display when dragging | Element added by component |
+
+<!--
+| `mdlext-lightbox--sticky-footer` | Positions footer at bottom of screen | Optional on `mdlext-lightbox` element |
+-->
+
+| Attribute | Effect | Remarks |
+|-----------|--------|---------|
+| `data-img-url-prev` | Displays previous image when dragging | URL to previous image in a collection |
+| `data-img-url-next` | Displays next image when dragging | URL to next imagein a collection |
+
+
+## How to use the component programmatically
+The [tests](../../test/lightbox/lightbox.spec.js) and the [snippets/lightbox.html](./snippets/lightbox.html) 
+code provides examples on how to use the component programmatically.
+
diff --git a/node_modules/mdl-ext/src/lightbox/snippets/lightbox.html b/node_modules/mdl-ext/src/lightbox/snippets/lightbox.html
new file mode 100644
index 0000000..095da06
--- /dev/null
+++ b/node_modules/mdl-ext/src/lightbox/snippets/lightbox.html
@@ -0,0 +1,553 @@
+<p>A lightbox displays an image filling the screen, and dimming out the rest of the web page. It acts as a modal dialog
+  using the <code>&lt;dialog&gt;</code> element as a container for the lightbox.
+  <strong>Click on one of the images to open the lightbox. Browse images in the lightbox using arrow keys, clicking on
+    one of the navigation buttons, or by dragging or swiping the image.</strong>
+</p>
+
+<!--
+  This example uses the data-details attribute to feed data to the lightbox.
+  Use any data structure that suits you to feed the lightbox.
+  The a element holds reference to lightbox image
+ -->
+<ul id="lightboard-for-lightbox" class="mdlext-lightboard mdlext-js-lightboard mdl-js-ripple-effect mdl-js-ripple-effect--ignore-events">
+  <li class="mdlext-lightboard__slide" data-details="[
+    { 'name': 'Title',            'value': 'Northern goshawk with prey' },
+    { 'name': 'Copyright &copy;', 'value': 'Leif Olsen' },
+    { 'name': 'Camera',           'value': 'Nikon D800E' },
+    { 'name': 'Lens',             'value': 'Nikkor 300mm/4 PF' },
+    { 'name': 'Converter',        'value': 'TC14-II' },
+    { 'name': 'Focal length',     'value': '420mm' },
+    { 'name': 'Aperture',         'value': 'f/7.1' },
+    { 'name': 'Shutter speed',    'value': '1/400s' }]" >
+    <a href="./images/_D802141.jpg" class="mdlext-lightboard__slide__frame">
+      <figure>
+        <img src="./images/_D802141.jpg" title="Northern goshawk with prey"/>
+        <figcaption>_D802141.jpg</figcaption>
+      </figure>
+    </a>
+  </li>
+  <li class="mdlext-lightboard__slide" data-details="[
+    { 'name': 'Title',            'value': 'Northern goshawk with prey' },
+    { 'name': 'Copyright &copy;', 'value': 'Leif Olsen' },
+    { 'name': 'Camera',           'value': 'Nikon D800E' },
+    { 'name': 'Lens',             'value': 'Nikkor 300mm/4 PF' },
+    { 'name': 'Converter',        'value': 'TC14-II' },
+    { 'name': 'Focal length',     'value': '420mm' },
+    { 'name': 'Aperture',         'value': 'f/7.1' },
+    { 'name': 'Shutter speed',    'value': '1/400s' }]" >
+    <a href="./images/_D802143-2.jpg" class="mdlext-lightboard__slide__frame">
+      <figure>
+        <img src="./images/_D802143.jpg" title="Northern goshawk with prey"/>
+        <figcaption>_D802143.jpg</figcaption>
+      </figure>
+    </a>
+  </li>
+  <li class="mdlext-lightboard__slide" data-details="[
+    { 'name': 'Title',            'value': 'Whooper swans in flight' },
+    { 'name': 'Copyright &copy;', 'value': 'Leif Olsen' } ]">
+    <a href="./images/_D802591.jpg" class="mdlext-lightboard__slide__frame">
+      <figure>
+        <img src="./images/_D802591.jpg" title="Whooper swans in flight"/>
+        <figcaption>_D802591.jpg</figcaption>
+      </figure>
+    </a>
+  </li>
+  <li class="mdlext-lightboard__slide" data-details="[
+    { 'name': 'Title',            'value': 'European green woodpecker' },
+    { 'name': 'Copyright &copy;', 'value': 'Leif Olsen' } ]">
+    <a href="./images/_D804370-3.jpg" class="mdlext-lightboard__slide__frame">
+      <figure>
+        <img src="./images/_D804370-3.jpg" title="European green woodpecker"/>
+        <figcaption>_D804370-3.jpg</figcaption>
+      </figure>
+    </a>
+  </li>
+  <li class="mdlext-lightboard__slide" data-details="[
+    { 'name': 'Title',            'value': 'The bridge' },
+    { 'name': 'Copyright &copy;', 'value': 'Leif Olsen' } ]" >
+    <a href="./images/_D808689.jpg" class="mdlext-lightboard__slide__frame">
+      <figure>
+        <img src="./images/_D808689.jpg" title="The bridge"/>
+        <figcaption>_D808689.jpg</figcaption>
+      </figure>
+    </a>
+  </li>
+  <li class="mdlext-lightboard__slide" data-details="[
+    { 'name': 'Title',            'value': 'Landscape in blue pastel' },
+    { 'name': 'Copyright &copy;', 'value': 'Leif Olsen' } ]" >
+    <a href="./images/_D802181.jpg" class="mdlext-lightboard__slide__frame">
+      <figure>
+        <img src="./images/_D802181.jpg" title="Landscape in blue pastel"/>
+        <figcaption>_D802181.jpg</figcaption>
+      </figure>
+    </a>
+  </li>
+  <li class="mdlext-lightboard__slide" data-details="[
+    { 'name': 'Title',            'value': 'Hiking the mountains of Dovre' },
+    { 'name': 'Copyright &copy;', 'value': 'Leif Olsen' } ]" >
+    <a href="./images/_D800912.jpg" class="mdlext-lightboard__slide__frame">
+      <figure>
+        <img src="./images/_D800912.jpg" title="Hiking the mountains of Dovre"/>
+        <figcaption>_D800912.jpg</figcaption>
+      </figure>
+    </a>
+  </li>
+  <li class="mdlext-lightboard__slide" data-details="[
+    { 'name': 'Title',            'value': 'The Polar Express, end of Line. Ny Aalesund, Spitsbergen' },
+    { 'name': 'Copyright &copy;', 'value': 'Leif Olsen' } ]" >
+    <a href="./images/_D809453-_D809457-3.jpg" class="mdlext-lightboard__slide__frame">
+      <figure>
+        <img src="./images/_D809453-_D809457-4.jpg" title="The Polar Express, end of Line" />
+        <figcaption>_D809453-_D809457-4.jpg</figcaption>
+      </figure>
+    </a>
+  </li>
+  <li class="mdlext-lightboard__slide" data-details="[
+    { 'name': 'Title',            'value': 'Still got the blues' },
+    { 'name': 'Description',      'value': 'PULSE, Kilden Consert Hall, Kristiansand' },
+    { 'name': 'Copyright &copy;', 'value': 'Leif Olsen' } ]" >
+    <a href="./images/_DSC8214-2.jpg" class="mdlext-lightboard__slide__frame">
+      <figure>
+        <img src="./images/_DSC8214.jpg" title="Still got the blues"/>
+        <figcaption>_DSC8214.jpg</figcaption>
+      </figure>
+    </a>
+  </li>
+  <li class="mdlext-lightboard__slide" data-details="[
+    { 'name': 'Title',            'value': 'Flowers' },
+    { 'name': 'Copyright &copy;', 'value': 'Leif Olsen' } ]" >
+    <a href="./images/_D800017.jpg" class="mdlext-lightboard__slide__frame">
+      <figure>
+        <img src="./images/_D800017.jpg" />
+        <figcaption>_D800017.jpg</figcaption>
+      </figure>
+    </a>
+  </li>
+  <li class="mdlext-lightboard__slide" data-details="[
+    { 'name': 'Title',            'value': 'Red-breasted merganser' },
+    { 'name': 'Copyright &copy;', 'value': 'Leif Olsen' } ]" >
+    <a href="./images/_D800023.jpg" class="mdlext-lightboard__slide__frame">
+      <figure>
+        <img src="./images/_D800023.jpg" />
+        <figcaption>_D800023.jpg</figcaption>
+      </figure>
+    </a>
+  </li>
+  <li class="mdlext-lightboard__slide" data-details="[
+    { 'name': 'Title',            'value': 'Musk oxes, Dovre, Norway' },
+    { 'name': 'Copyright &copy;', 'value': 'Leif Olsen' } ]" >
+    <a href="./images/_D800851.jpg" class="mdlext-lightboard__slide__frame">
+      <figure>
+        <img src="./images/_D800851.jpg" />
+        <figcaption>_D800851.jpg</figcaption>
+      </figure>
+    </a>
+  </li>
+  <li class="mdlext-lightboard__slide" data-details="[
+    { 'name': 'Title',            'value': 'Arctic Fox, Svalbard, Norway' },
+    { 'name': 'Copyright &copy;', 'value': 'Leif Olsen' } ]" >
+    <a href="./images/_D800166-2.jpg" class="mdlext-lightboard__slide__frame">
+      <figure>
+        <img src="./images/_D800166.jpg" />
+        <figcaption>_D800166.jpg</figcaption>
+      </figure>
+    </a>
+  </li>
+
+  <li class="mdlext-lightboard__slide" data-details="[
+    { 'name': 'Title',            'value': 'Fly fishing the arctic waters, Svalbard, Norway' },
+    { 'name': 'Copyright &copy;', 'value': 'Leif Olsen' } ]" >
+    <a href="#" class="mdlext-lightboard__slide__frame">
+      <figure>
+        <img src="./images/_D800951.jpg" />
+        <figcaption>_D800951.jpg</figcaption>
+      </figure>
+    </a>
+  </li>
+  <li class="mdlext-lightboard__slide" data-details="[
+    { 'name': 'Title',            'value': 'Lady of the snows (Pulsatilla vernalis), Dovre, Norway' },
+    { 'name': 'Copyright &copy;', 'value': 'Leif Olsen' },
+    { 'name': 'Camera',           'value': 'Nikon D800E' },
+    { 'name': 'Lens',             'value': 'Nikkor 400mm/2.8GEDVR' },
+    { 'name': 'Converter',        'value': 'TC1.4II' },
+    { 'name': 'Focal length',     'value': '550mm' },
+    { 'name': 'Aperture',         'value': 'f/8' },
+    { 'name': 'Shutter speed',    'value': '1/200s' }
+     ]" >
+    <a href="#" class="mdlext-lightboard__slide__frame">
+      <figure>
+        <img src="./images/_D801188.jpg" />
+        <figcaption>_D801188.jpg</figcaption>
+      </figure>
+    </a>
+  </li>
+  <li class="mdlext-lightboard__slide" data-details="[
+    { 'name': 'Title',            'value': 'PULSE, Kilden Consert Hall, Kristiansand' },
+    { 'name': 'Copyright &copy;', 'value': 'Leif Olsen' } ]" >
+    <a href="#" class="mdlext-lightboard__slide__frame">
+      <figure>
+        <img src="./images/_D801205-2.jpg" />
+        <figcaption>_D801205-2.jpg</figcaption>
+      </figure>
+    </a>
+  </li>
+  <li class="mdlext-lightboard__slide" data-details="[
+    { 'name': 'Title',            'value': 'PULSE, Kilden Consert Hall, Kristiansand' },
+    { 'name': 'Copyright &copy;', 'value': 'Leif Olsen' } ]" >
+    <a href="#" class="mdlext-lightboard__slide__frame">
+      <figure>
+        <img src="./images/_D801274.jpg" />
+        <figcaption>_D801274.jpg</figcaption>
+      </figure>
+    </a>
+  </li>
+  <li class="mdlext-lightboard__slide" data-details="[
+    { 'name': 'Title',            'value': 'Peregrine falcon, Norway' },
+    { 'name': 'Copyright &copy;', 'value': 'Leif Olsen' } ]" >
+    <a href="#" class="mdlext-lightboard__slide__frame">
+      <figure>
+        <img src="./images/_D801392.jpg" />
+        <figcaption>_D801392.jpg</figcaption>
+      </figure>
+    </a>
+  </li>
+  <li class="mdlext-lightboard__slide" data-details="[
+    { 'name': 'Title',            'value': 'Peregrine falcon, Norway' },
+    { 'name': 'Copyright &copy;', 'value': 'Leif Olsen' },
+    { 'name': 'Camera',           'value': 'Nikon D800E' },
+    { 'name': 'Lens',             'value': 'Nikkor 400mm/2.8GEDVR' },
+    { 'name': 'Focal length',     'value': '400mm' },
+    { 'name': 'Aperture',         'value': 'f/2.8' },
+    { 'name': 'Shutter speed',    'value': '1/800s' } ]" >
+    <a href="#" class="mdlext-lightboard__slide__frame">
+      <figure>
+        <img src="./images/_D801436.jpg" />
+        <figcaption>_D801392.jpg</figcaption>
+      </figure>
+    </a>
+  </li>
+  <li class="mdlext-lightboard__slide" data-details="[
+    { 'name': 'Title',            'value': 'Mr. Per E Knudsen' },
+    { 'name': 'Copyright &copy;', 'value': 'Leif Olsen' } ]" >
+    <a href="#" class="mdlext-lightboard__slide__frame">
+      <figure>
+        <img src="./images/_D801952-4.jpg" />
+        <figcaption>_D801952-4.jpg</figcaption>
+      </figure>
+    </a>
+  </li>
+  <li class="mdlext-lightboard__slide" data-details="[
+    { 'name': 'Title',            'value': 'Black Woodpecker' },
+    { 'name': 'Copyright &copy;', 'value': 'Leif Olsen' } ]" >
+    <a href="#" class="mdlext-lightboard__slide__frame">
+      <figure>
+        <img src="./images/_D807603.jpg" />
+        <figcaption>_D807603.jpg</figcaption>
+      </figure>
+    </a>
+  </li>
+  <li class="mdlext-lightboard__slide" data-details="[
+    { 'name': 'Title',            'value': 'Goshina' },
+    { 'name': 'Copyright &copy;', 'value': 'Leif Olsen' } ]" >
+    <a href="#" class="mdlext-lightboard__slide__frame">
+      <figure>
+        <img src="./images/_D807689.jpg" />
+        <figcaption>_D807689.jpg</figcaption>
+      </figure>
+    </a>
+  </li>
+  <li class="mdlext-lightboard__slide" data-details="[
+    { 'name': 'Title',            'value': 'Goshina' },
+    { 'name': 'Copyright &copy;', 'value': 'Leif Olsen' } ]" >
+    <a href="#" class="mdlext-lightboard__slide__frame">
+      <figure>
+        <img src="./images/_D807558.jpg" />
+        <figcaption>_D807689.jpg</figcaption>
+      </figure>
+    </a>
+  </li>
+  <li class="mdlext-lightboard__slide" data-details="[
+    { 'name': 'Title',            'value': 'Svalbard Rock ptarmigan' },
+    { 'name': 'Copyright &copy;', 'value': 'Leif Olsen' }]" >
+    <a href="./images/_D800464.jpg" class="mdlext-lightboard__slide__frame">
+      <figure>
+        <img src="./images/_D800464.jpg" />
+        <figcaption>_D800464.jpg</figcaption>
+      </figure>
+    </a>
+  </li>
+  <li class="mdlext-lightboard__slide" data-details="[
+    { 'name': 'Title',            'value': 'Nice, France' },
+    { 'name': 'Copyright &copy;', 'value': 'Leif Olsen' } ]" >
+    <a href="./images/_DSC7535-2.jpg" class="mdlext-lightboard__slide__frame">
+      <figure>
+        <img src="./images/_DSC7535.jpg" />
+        <figcaption>_DSC7535.jpg</figcaption>
+      </figure>
+    </a>
+  </li>
+  <li class="mdlext-lightboard__slide" data-details="[
+    { 'name': 'Title',            'value': 'Cheetah, Bloemfontain, South Africa' },
+    { 'name': 'Copyright &copy;', 'value': 'Leif Olsen' } ]" >
+    <a href="#" class="mdlext-lightboard__slide__frame">
+      <figure>
+        <img src="./images/_D802478.jpg" />
+        <figcaption>_D802478.jpg</figcaption>
+      </figure>
+    </a>
+  </li>
+  <li class="mdlext-lightboard__slide" data-details="[
+    { 'name': 'Title',            'value': 'Red Squirrel' },
+    { 'name': 'Copyright &copy;', 'value': 'Leif Olsen' } ]" >
+    <a href="#" class="mdlext-lightboard__slide__frame">
+      <figure>
+        <img src="./images/_D800698.jpg" />
+        <figcaption>_D800698.jpg</figcaption>
+      </figure>
+    </a>
+  </li>
+  <li class="mdlext-lightboard__slide" data-details="[
+    { 'name': 'Title',            'value': 'Milky Way, Bloemfontain, South Africa' },
+    { 'name': 'Copyright &copy;', 'value': 'Leif Olsen' },
+    { 'name': 'Camera',           'value': 'Nikon D800E' },
+    { 'name': 'Lens',             'value': 'Nikkor 20mm/1.8' },
+    { 'name': 'Focal length',     'value': '20mm' },
+    { 'name': 'Aperture',         'value': 'f/2.0' },
+    { 'name': 'Shutter speed',    'value': '15s' },
+    { 'name': 'ISO',              'value': '1600' }]" >
+    <a href="#" class="mdlext-lightboard__slide__frame">
+      <figure>
+        <img src="./images/_D803118.jpg" />
+        <figcaption>_D803118.jpg</figcaption>
+      </figure>
+    </a>
+  </li>
+  <li class="mdlext-lightboard__slide" data-details="[
+    { 'name': 'Title',            'value': 'Winter Light, Senja, Norway' },
+    { 'name': 'Copyright &copy;', 'value': 'Leif Olsen' } ]" >
+    <a href="#" class="mdlext-lightboard__slide__frame">
+      <figure>
+        <img src="./images/_D803521.jpg" />
+        <figcaption>_D803521.jpg</figcaption>
+      </figure>
+    </a>
+  </li>
+  <li class="mdlext-lightboard__slide" data-details="[
+    { 'name': 'Title',            'value': 'Selfie with Aurora B :)' },
+    { 'name': 'Copyright &copy;', 'value': 'Leif Olsen' } ]" >
+    <a href="#" class="mdlext-lightboard__slide__frame">
+      <figure>
+        <img src="./images/_D803465-3.jpg" />
+        <figcaption>_D803465-3.jpg</figcaption>
+      </figure>
+    </a>
+  </li>
+  <li class="mdlext-lightboard__slide" data-details="[
+    { 'name': 'Title',            'value': 'Lista Lighthouse, Norway' },
+    { 'name': 'Copyright &copy;', 'value': 'Leif Olsen' },
+    { 'name': 'Camera',           'value': 'Nikon D800E' },
+    { 'name': 'Lens',             'value': 'Nikkor 16mm/2.8D Fisheye' },
+    { 'name': 'Focal length',     'value': '16mm' },
+    { 'name': 'Aperture',         'value': 'f/8' },
+    { 'name': 'Shutter speed',    'value': '1/20s' },
+    { 'name': 'ISO',              'value': '100' } ]" >
+    <a href="#" class="mdlext-lightboard__slide__frame">
+      <figure>
+        <img src="./images/_D806374.jpg" />
+        <figcaption>_D803465-3.jpg</figcaption>
+      </figure>
+    </a>
+  </li>
+  <li class="mdlext-lightboard__slide" data-details="[
+    { 'name': 'Title',            'value': 'Osprey' },
+    { 'name': 'Copyright &copy;', 'value': 'Leif Olsen' },
+    { 'name': 'Camera',           'value': 'Nikon D800E' },
+    { 'name': 'Lens',             'value': 'Nikkor 400mm/2.8GEDVR' },
+    { 'name': 'Converter',        'value': 'TC1.4II' },
+    { 'name': 'Focal length',     'value': '550mm' },
+    { 'name': 'Aperture',         'value': 'f/5.6' },
+    { 'name': 'Shutter speed',    'value': '1/400s' } ]" >
+    <a href="#" class="mdlext-lightboard__slide__frame">
+      <figure>
+        <img src="./images/_D805345-12.jpg" />
+        <figcaption>_D805345-12.jpg</figcaption>
+      </figure>
+    </a>
+  </li>
+</ul>
+
+<p class="mdl-typography--caption" style="margin-top: 32px;">
+  All images appearing in this page are the exclusive property of Leif Olsen and are protected under the United States
+  and International Copyright laws. The images may not be reproduced or manipulated without the written permission of
+  Leif Olsen. Use of any image as the basis for another photographic concept or illustration (digital, artist rendering
+  or alike) is a violation of the United States and International Copyright laws. All images are copyrighted &copy; Leif Olsen, 2016.
+</p>
+
+
+<!-- A dialog element MUST be a child of document.body!! -->
+<dialog id="lightbox-dialog" class="mdlext-dialog">
+
+  <div id="lightbox" class="mdlext-lightbox mdlext-js-lightbox mdl-card mdl-shadow--4dp">
+    <div class="mdl-card__menu mdl-color-text--white mdl-typography--body-2-color-contrast">
+      <button data-action="close" class="mdl-button mdl-button--icon mdl-js-button" title="Close">
+        <i class="material-icons">close</i>
+      </button>
+    </div>
+    <figure class="mdl-card__title">
+      <img src="" draggable="true" alt>
+      <figcaption data-action="select">Details</figcaption>
+    </figure>
+    <footer data-action="select" class="mdl-card__actions mdl-card--border">
+      <div class="mdl-card__supporting-text">
+        Image title
+      </div>
+      <nav>
+        <button data-action="first" class="mdl-button mdl-button--icon mdl-js-button" title="First">
+          <i class="material-icons">first_page</i>
+        </button>
+        <button data-action="prev" class="mdl-button mdl-button--icon mdl-js-button" title="Previous">
+          <i class="material-icons">chevron_left</i>
+        </button>
+        <button data-action="next" class="mdl-button mdl-button--icon mdl-js-button" title="Next">
+          <i class="material-icons">chevron_right</i>
+        </button>
+        <button data-action="last" class="mdl-button mdl-button--icon mdl-js-button" title="Last">
+          <i class="material-icons">last_page</i>
+        </button>
+        <button data-action="select" class="mdl-button mdl-button--icon mdl-js-button" title="Details">
+          <i class="material-icons">info_outline</i>
+        </button>
+      </nav>
+    </footer>
+  </div>
+</dialog>
+
+<script>
+  window.addEventListener('load', function() {
+    var dialog = document.querySelector('#lightbox-dialog');
+
+    // A dialog element MUST be a child of document.body!!
+    // In a SPA you should choose a more robust strategy than the simple if provided here
+    if(dialog.parentNode.tagName !== 'BODY') {
+      document.body.appendChild(dialog);
+    }
+
+    if (!('showModal' in dialog)) {
+      dialogPolyfill.registerDialog(dialog);
+    }
+
+    var currentSlide = null;
+    var lightboard = document.querySelector('#lightboard-for-lightbox');
+    var slides = lightboard.querySelectorAll('.mdlext-lightboard__slide');
+
+    lightboard.addEventListener('select', function(e) {
+      currentSlide = e.detail.source;
+      for (var i = 0, n = slides.length; i < n; i++) {
+        if(currentSlide ===  slides[i]) {
+          break;
+        }
+      }
+      var prevSlide = slides[ i > 0   ? i-1 : n-1 ];
+      var nextSlide = slides[ i < n-1 ? i+1 : 0];
+      showImage(currentSlide, prevSlide, nextSlide);
+    });
+
+    var lightbox = dialog.querySelector('.mdlext-lightbox');
+
+    lightbox.addEventListener('action', function(e) {
+      if(e.detail.action === 'close') {
+        dialog.close();
+      }
+      else if(e.detail.action === 'select') {
+        var figcaption = lightbox.querySelector('figure figcaption');
+        if(figcaption.classList.contains('mdlext-lightbox__show-figcaption')) {
+          figcaption.classList.remove('mdlext-lightbox__show-figcaption');
+        }
+        else {
+          figcaption.classList.add('mdlext-lightbox__show-figcaption');
+        }
+      }
+      else {
+        var i = 0;
+        var n = slides.length
+
+        if(e.detail.action === 'first') {
+          currentSlide = slides[0];
+        }
+        else if(e.detail.action === 'prev' || e.detail.action === 'next') {
+          for (var j = 0; j < n; j++) {
+            if(currentSlide ===  slides[j]) {
+              if(e.detail.action === 'prev') {
+                i = j > 0 ? j-1 : n-1;
+                currentSlide = slides[i];
+              }
+              else if(e.detail.action === 'next') {
+                i = j < n-1 ? j+1 : 0;
+                currentSlide = slides[i];
+              }
+              break;
+            }
+          }
+        }
+        else if(e.detail.action === 'last') {
+          i = slides.length-1;
+          currentSlide = slides[i];
+        }
+        var prevSlide = slides[ i > 0   ? i-1 : n-1 ];
+        var nextSlide = slides[ i < n-1 ? i+1 : 0];
+        showImage(currentSlide, prevSlide, nextSlide);
+      }
+    });
+
+    function showImage(slide, prevSlide, nextSlide) {
+
+      var slideAnchor = slide.querySelector('a');
+      var slideImg = slide.querySelector('img');
+      var img = dialog.querySelector('img');
+      var supportingText = dialog.querySelector('.mdl-card__supporting-text');
+      var imageDetails = dialog.querySelector('figcaption');
+      var href = slideAnchor.getAttribute('href');
+      href = href && href.indexOf('#') === 0 ? slideImg.getAttribute('src') : href;
+      img.setAttribute('src', href);
+      img.setAttribute('alt', slideImg.getAttribute('title') || '');
+      img.setAttribute('title', slideImg.getAttribute('title') || '');
+      supportingText.innerHTML = slideImg.getAttribute('title') || '';
+
+      // Lazy coder :)
+      slideAnchor = prevSlide.querySelector('a');
+      slideImg = prevSlide.querySelector('img');
+      href = slideAnchor.getAttribute('href');
+      href = href && href.indexOf('#') === 0 ? slideImg.getAttribute('src') : href;
+      img.setAttribute('data-img-url-prev', href);
+
+      slideAnchor = nextSlide.querySelector('a');
+      slideImg = nextSlide.querySelector('img');
+      href = slideAnchor.getAttribute('href');
+      href = href && href.indexOf('#') === 0 ? slideImg.getAttribute('src') : href;
+      img.setAttribute('data-img-url-next', href);
+
+
+      var detailsHtml  = '';
+      var detailsArray = JSON.parse(slide.getAttribute('data-details').replace(/'/g, '"'));
+
+      if(detailsArray != null) {
+        detailsHtml = '<table><tbody>';
+        for (var i = 0, n = detailsArray.length; i < n; i++) {
+          detailsHtml += '<tr><th>' + detailsArray[i].name + '</th><td>' + detailsArray[i].value + '</td></tr>';
+
+          if(!supportingText.innerHTML && detailsArray[i].name.toLowerCase() === 'title') {
+            supportingText.innerHTML = detailsArray[i].value;
+          }
+        }
+        detailsHtml += '</tbody></table>';
+      }
+
+      imageDetails.innerHTML = '';
+      imageDetails.insertAdjacentHTML('afterbegin', detailsHtml);
+
+      if(!dialog.open) {
+        dialog.showModal();
+      }
+    }
+  });
+</script>