lightbox.html

<h5 class="mdlext-demo-header">Lightbox Component</h5>
<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>