Project import generated by Copybara.
GitOrigin-RevId: 63746295f1a5ab5a619056791995793d65529e62
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><dialog></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 ©', '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 ©', '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 ©', '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 ©', '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 ©', '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 ©', '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 ©', '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 ©', '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 ©', '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 ©', '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 ©', '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 ©', '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 ©', '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 ©', '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 ©', '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 ©', '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 ©', '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 ©', '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 ©', '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 ©', '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 ©', '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 ©', '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 ©', '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 ©', '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 ©', '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 ©', '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 ©', '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 ©', '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 ©', '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 ©', '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 ©', '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 ©', '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 © 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>