| <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> |