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>