blob: 095da06884e8cf467d55c47e2cf915138f3376f8 [file] [log] [blame]
Copybara botbe50d492023-11-30 00:16:42 +01001<p>A lightbox displays an image filling the screen, and dimming out the rest of the web page. It acts as a modal dialog
2 using the <code>&lt;dialog&gt;</code> element as a container for the lightbox.
3 <strong>Click on one of the images to open the lightbox. Browse images in the lightbox using arrow keys, clicking on
4 one of the navigation buttons, or by dragging or swiping the image.</strong>
5</p>
6
7<!--
8 This example uses the data-details attribute to feed data to the lightbox.
9 Use any data structure that suits you to feed the lightbox.
10 The a element holds reference to lightbox image
11 -->
12<ul id="lightboard-for-lightbox" class="mdlext-lightboard mdlext-js-lightboard mdl-js-ripple-effect mdl-js-ripple-effect--ignore-events">
13 <li class="mdlext-lightboard__slide" data-details="[
14 { 'name': 'Title', 'value': 'Northern goshawk with prey' },
15 { 'name': 'Copyright &copy;', 'value': 'Leif Olsen' },
16 { 'name': 'Camera', 'value': 'Nikon D800E' },
17 { 'name': 'Lens', 'value': 'Nikkor 300mm/4 PF' },
18 { 'name': 'Converter', 'value': 'TC14-II' },
19 { 'name': 'Focal length', 'value': '420mm' },
20 { 'name': 'Aperture', 'value': 'f/7.1' },
21 { 'name': 'Shutter speed', 'value': '1/400s' }]" >
22 <a href="./images/_D802141.jpg" class="mdlext-lightboard__slide__frame">
23 <figure>
24 <img src="./images/_D802141.jpg" title="Northern goshawk with prey"/>
25 <figcaption>_D802141.jpg</figcaption>
26 </figure>
27 </a>
28 </li>
29 <li class="mdlext-lightboard__slide" data-details="[
30 { 'name': 'Title', 'value': 'Northern goshawk with prey' },
31 { 'name': 'Copyright &copy;', 'value': 'Leif Olsen' },
32 { 'name': 'Camera', 'value': 'Nikon D800E' },
33 { 'name': 'Lens', 'value': 'Nikkor 300mm/4 PF' },
34 { 'name': 'Converter', 'value': 'TC14-II' },
35 { 'name': 'Focal length', 'value': '420mm' },
36 { 'name': 'Aperture', 'value': 'f/7.1' },
37 { 'name': 'Shutter speed', 'value': '1/400s' }]" >
38 <a href="./images/_D802143-2.jpg" class="mdlext-lightboard__slide__frame">
39 <figure>
40 <img src="./images/_D802143.jpg" title="Northern goshawk with prey"/>
41 <figcaption>_D802143.jpg</figcaption>
42 </figure>
43 </a>
44 </li>
45 <li class="mdlext-lightboard__slide" data-details="[
46 { 'name': 'Title', 'value': 'Whooper swans in flight' },
47 { 'name': 'Copyright &copy;', 'value': 'Leif Olsen' } ]">
48 <a href="./images/_D802591.jpg" class="mdlext-lightboard__slide__frame">
49 <figure>
50 <img src="./images/_D802591.jpg" title="Whooper swans in flight"/>
51 <figcaption>_D802591.jpg</figcaption>
52 </figure>
53 </a>
54 </li>
55 <li class="mdlext-lightboard__slide" data-details="[
56 { 'name': 'Title', 'value': 'European green woodpecker' },
57 { 'name': 'Copyright &copy;', 'value': 'Leif Olsen' } ]">
58 <a href="./images/_D804370-3.jpg" class="mdlext-lightboard__slide__frame">
59 <figure>
60 <img src="./images/_D804370-3.jpg" title="European green woodpecker"/>
61 <figcaption>_D804370-3.jpg</figcaption>
62 </figure>
63 </a>
64 </li>
65 <li class="mdlext-lightboard__slide" data-details="[
66 { 'name': 'Title', 'value': 'The bridge' },
67 { 'name': 'Copyright &copy;', 'value': 'Leif Olsen' } ]" >
68 <a href="./images/_D808689.jpg" class="mdlext-lightboard__slide__frame">
69 <figure>
70 <img src="./images/_D808689.jpg" title="The bridge"/>
71 <figcaption>_D808689.jpg</figcaption>
72 </figure>
73 </a>
74 </li>
75 <li class="mdlext-lightboard__slide" data-details="[
76 { 'name': 'Title', 'value': 'Landscape in blue pastel' },
77 { 'name': 'Copyright &copy;', 'value': 'Leif Olsen' } ]" >
78 <a href="./images/_D802181.jpg" class="mdlext-lightboard__slide__frame">
79 <figure>
80 <img src="./images/_D802181.jpg" title="Landscape in blue pastel"/>
81 <figcaption>_D802181.jpg</figcaption>
82 </figure>
83 </a>
84 </li>
85 <li class="mdlext-lightboard__slide" data-details="[
86 { 'name': 'Title', 'value': 'Hiking the mountains of Dovre' },
87 { 'name': 'Copyright &copy;', 'value': 'Leif Olsen' } ]" >
88 <a href="./images/_D800912.jpg" class="mdlext-lightboard__slide__frame">
89 <figure>
90 <img src="./images/_D800912.jpg" title="Hiking the mountains of Dovre"/>
91 <figcaption>_D800912.jpg</figcaption>
92 </figure>
93 </a>
94 </li>
95 <li class="mdlext-lightboard__slide" data-details="[
96 { 'name': 'Title', 'value': 'The Polar Express, end of Line. Ny Aalesund, Spitsbergen' },
97 { 'name': 'Copyright &copy;', 'value': 'Leif Olsen' } ]" >
98 <a href="./images/_D809453-_D809457-3.jpg" class="mdlext-lightboard__slide__frame">
99 <figure>
100 <img src="./images/_D809453-_D809457-4.jpg" title="The Polar Express, end of Line" />
101 <figcaption>_D809453-_D809457-4.jpg</figcaption>
102 </figure>
103 </a>
104 </li>
105 <li class="mdlext-lightboard__slide" data-details="[
106 { 'name': 'Title', 'value': 'Still got the blues' },
107 { 'name': 'Description', 'value': 'PULSE, Kilden Consert Hall, Kristiansand' },
108 { 'name': 'Copyright &copy;', 'value': 'Leif Olsen' } ]" >
109 <a href="./images/_DSC8214-2.jpg" class="mdlext-lightboard__slide__frame">
110 <figure>
111 <img src="./images/_DSC8214.jpg" title="Still got the blues"/>
112 <figcaption>_DSC8214.jpg</figcaption>
113 </figure>
114 </a>
115 </li>
116 <li class="mdlext-lightboard__slide" data-details="[
117 { 'name': 'Title', 'value': 'Flowers' },
118 { 'name': 'Copyright &copy;', 'value': 'Leif Olsen' } ]" >
119 <a href="./images/_D800017.jpg" class="mdlext-lightboard__slide__frame">
120 <figure>
121 <img src="./images/_D800017.jpg" />
122 <figcaption>_D800017.jpg</figcaption>
123 </figure>
124 </a>
125 </li>
126 <li class="mdlext-lightboard__slide" data-details="[
127 { 'name': 'Title', 'value': 'Red-breasted merganser' },
128 { 'name': 'Copyright &copy;', 'value': 'Leif Olsen' } ]" >
129 <a href="./images/_D800023.jpg" class="mdlext-lightboard__slide__frame">
130 <figure>
131 <img src="./images/_D800023.jpg" />
132 <figcaption>_D800023.jpg</figcaption>
133 </figure>
134 </a>
135 </li>
136 <li class="mdlext-lightboard__slide" data-details="[
137 { 'name': 'Title', 'value': 'Musk oxes, Dovre, Norway' },
138 { 'name': 'Copyright &copy;', 'value': 'Leif Olsen' } ]" >
139 <a href="./images/_D800851.jpg" class="mdlext-lightboard__slide__frame">
140 <figure>
141 <img src="./images/_D800851.jpg" />
142 <figcaption>_D800851.jpg</figcaption>
143 </figure>
144 </a>
145 </li>
146 <li class="mdlext-lightboard__slide" data-details="[
147 { 'name': 'Title', 'value': 'Arctic Fox, Svalbard, Norway' },
148 { 'name': 'Copyright &copy;', 'value': 'Leif Olsen' } ]" >
149 <a href="./images/_D800166-2.jpg" class="mdlext-lightboard__slide__frame">
150 <figure>
151 <img src="./images/_D800166.jpg" />
152 <figcaption>_D800166.jpg</figcaption>
153 </figure>
154 </a>
155 </li>
156
157 <li class="mdlext-lightboard__slide" data-details="[
158 { 'name': 'Title', 'value': 'Fly fishing the arctic waters, Svalbard, Norway' },
159 { 'name': 'Copyright &copy;', 'value': 'Leif Olsen' } ]" >
160 <a href="#" class="mdlext-lightboard__slide__frame">
161 <figure>
162 <img src="./images/_D800951.jpg" />
163 <figcaption>_D800951.jpg</figcaption>
164 </figure>
165 </a>
166 </li>
167 <li class="mdlext-lightboard__slide" data-details="[
168 { 'name': 'Title', 'value': 'Lady of the snows (Pulsatilla vernalis), Dovre, Norway' },
169 { 'name': 'Copyright &copy;', 'value': 'Leif Olsen' },
170 { 'name': 'Camera', 'value': 'Nikon D800E' },
171 { 'name': 'Lens', 'value': 'Nikkor 400mm/2.8GEDVR' },
172 { 'name': 'Converter', 'value': 'TC1.4II' },
173 { 'name': 'Focal length', 'value': '550mm' },
174 { 'name': 'Aperture', 'value': 'f/8' },
175 { 'name': 'Shutter speed', 'value': '1/200s' }
176 ]" >
177 <a href="#" class="mdlext-lightboard__slide__frame">
178 <figure>
179 <img src="./images/_D801188.jpg" />
180 <figcaption>_D801188.jpg</figcaption>
181 </figure>
182 </a>
183 </li>
184 <li class="mdlext-lightboard__slide" data-details="[
185 { 'name': 'Title', 'value': 'PULSE, Kilden Consert Hall, Kristiansand' },
186 { 'name': 'Copyright &copy;', 'value': 'Leif Olsen' } ]" >
187 <a href="#" class="mdlext-lightboard__slide__frame">
188 <figure>
189 <img src="./images/_D801205-2.jpg" />
190 <figcaption>_D801205-2.jpg</figcaption>
191 </figure>
192 </a>
193 </li>
194 <li class="mdlext-lightboard__slide" data-details="[
195 { 'name': 'Title', 'value': 'PULSE, Kilden Consert Hall, Kristiansand' },
196 { 'name': 'Copyright &copy;', 'value': 'Leif Olsen' } ]" >
197 <a href="#" class="mdlext-lightboard__slide__frame">
198 <figure>
199 <img src="./images/_D801274.jpg" />
200 <figcaption>_D801274.jpg</figcaption>
201 </figure>
202 </a>
203 </li>
204 <li class="mdlext-lightboard__slide" data-details="[
205 { 'name': 'Title', 'value': 'Peregrine falcon, Norway' },
206 { 'name': 'Copyright &copy;', 'value': 'Leif Olsen' } ]" >
207 <a href="#" class="mdlext-lightboard__slide__frame">
208 <figure>
209 <img src="./images/_D801392.jpg" />
210 <figcaption>_D801392.jpg</figcaption>
211 </figure>
212 </a>
213 </li>
214 <li class="mdlext-lightboard__slide" data-details="[
215 { 'name': 'Title', 'value': 'Peregrine falcon, Norway' },
216 { 'name': 'Copyright &copy;', 'value': 'Leif Olsen' },
217 { 'name': 'Camera', 'value': 'Nikon D800E' },
218 { 'name': 'Lens', 'value': 'Nikkor 400mm/2.8GEDVR' },
219 { 'name': 'Focal length', 'value': '400mm' },
220 { 'name': 'Aperture', 'value': 'f/2.8' },
221 { 'name': 'Shutter speed', 'value': '1/800s' } ]" >
222 <a href="#" class="mdlext-lightboard__slide__frame">
223 <figure>
224 <img src="./images/_D801436.jpg" />
225 <figcaption>_D801392.jpg</figcaption>
226 </figure>
227 </a>
228 </li>
229 <li class="mdlext-lightboard__slide" data-details="[
230 { 'name': 'Title', 'value': 'Mr. Per E Knudsen' },
231 { 'name': 'Copyright &copy;', 'value': 'Leif Olsen' } ]" >
232 <a href="#" class="mdlext-lightboard__slide__frame">
233 <figure>
234 <img src="./images/_D801952-4.jpg" />
235 <figcaption>_D801952-4.jpg</figcaption>
236 </figure>
237 </a>
238 </li>
239 <li class="mdlext-lightboard__slide" data-details="[
240 { 'name': 'Title', 'value': 'Black Woodpecker' },
241 { 'name': 'Copyright &copy;', 'value': 'Leif Olsen' } ]" >
242 <a href="#" class="mdlext-lightboard__slide__frame">
243 <figure>
244 <img src="./images/_D807603.jpg" />
245 <figcaption>_D807603.jpg</figcaption>
246 </figure>
247 </a>
248 </li>
249 <li class="mdlext-lightboard__slide" data-details="[
250 { 'name': 'Title', 'value': 'Goshina' },
251 { 'name': 'Copyright &copy;', 'value': 'Leif Olsen' } ]" >
252 <a href="#" class="mdlext-lightboard__slide__frame">
253 <figure>
254 <img src="./images/_D807689.jpg" />
255 <figcaption>_D807689.jpg</figcaption>
256 </figure>
257 </a>
258 </li>
259 <li class="mdlext-lightboard__slide" data-details="[
260 { 'name': 'Title', 'value': 'Goshina' },
261 { 'name': 'Copyright &copy;', 'value': 'Leif Olsen' } ]" >
262 <a href="#" class="mdlext-lightboard__slide__frame">
263 <figure>
264 <img src="./images/_D807558.jpg" />
265 <figcaption>_D807689.jpg</figcaption>
266 </figure>
267 </a>
268 </li>
269 <li class="mdlext-lightboard__slide" data-details="[
270 { 'name': 'Title', 'value': 'Svalbard Rock ptarmigan' },
271 { 'name': 'Copyright &copy;', 'value': 'Leif Olsen' }]" >
272 <a href="./images/_D800464.jpg" class="mdlext-lightboard__slide__frame">
273 <figure>
274 <img src="./images/_D800464.jpg" />
275 <figcaption>_D800464.jpg</figcaption>
276 </figure>
277 </a>
278 </li>
279 <li class="mdlext-lightboard__slide" data-details="[
280 { 'name': 'Title', 'value': 'Nice, France' },
281 { 'name': 'Copyright &copy;', 'value': 'Leif Olsen' } ]" >
282 <a href="./images/_DSC7535-2.jpg" class="mdlext-lightboard__slide__frame">
283 <figure>
284 <img src="./images/_DSC7535.jpg" />
285 <figcaption>_DSC7535.jpg</figcaption>
286 </figure>
287 </a>
288 </li>
289 <li class="mdlext-lightboard__slide" data-details="[
290 { 'name': 'Title', 'value': 'Cheetah, Bloemfontain, South Africa' },
291 { 'name': 'Copyright &copy;', 'value': 'Leif Olsen' } ]" >
292 <a href="#" class="mdlext-lightboard__slide__frame">
293 <figure>
294 <img src="./images/_D802478.jpg" />
295 <figcaption>_D802478.jpg</figcaption>
296 </figure>
297 </a>
298 </li>
299 <li class="mdlext-lightboard__slide" data-details="[
300 { 'name': 'Title', 'value': 'Red Squirrel' },
301 { 'name': 'Copyright &copy;', 'value': 'Leif Olsen' } ]" >
302 <a href="#" class="mdlext-lightboard__slide__frame">
303 <figure>
304 <img src="./images/_D800698.jpg" />
305 <figcaption>_D800698.jpg</figcaption>
306 </figure>
307 </a>
308 </li>
309 <li class="mdlext-lightboard__slide" data-details="[
310 { 'name': 'Title', 'value': 'Milky Way, Bloemfontain, South Africa' },
311 { 'name': 'Copyright &copy;', 'value': 'Leif Olsen' },
312 { 'name': 'Camera', 'value': 'Nikon D800E' },
313 { 'name': 'Lens', 'value': 'Nikkor 20mm/1.8' },
314 { 'name': 'Focal length', 'value': '20mm' },
315 { 'name': 'Aperture', 'value': 'f/2.0' },
316 { 'name': 'Shutter speed', 'value': '15s' },
317 { 'name': 'ISO', 'value': '1600' }]" >
318 <a href="#" class="mdlext-lightboard__slide__frame">
319 <figure>
320 <img src="./images/_D803118.jpg" />
321 <figcaption>_D803118.jpg</figcaption>
322 </figure>
323 </a>
324 </li>
325 <li class="mdlext-lightboard__slide" data-details="[
326 { 'name': 'Title', 'value': 'Winter Light, Senja, Norway' },
327 { 'name': 'Copyright &copy;', 'value': 'Leif Olsen' } ]" >
328 <a href="#" class="mdlext-lightboard__slide__frame">
329 <figure>
330 <img src="./images/_D803521.jpg" />
331 <figcaption>_D803521.jpg</figcaption>
332 </figure>
333 </a>
334 </li>
335 <li class="mdlext-lightboard__slide" data-details="[
336 { 'name': 'Title', 'value': 'Selfie with Aurora B :)' },
337 { 'name': 'Copyright &copy;', 'value': 'Leif Olsen' } ]" >
338 <a href="#" class="mdlext-lightboard__slide__frame">
339 <figure>
340 <img src="./images/_D803465-3.jpg" />
341 <figcaption>_D803465-3.jpg</figcaption>
342 </figure>
343 </a>
344 </li>
345 <li class="mdlext-lightboard__slide" data-details="[
346 { 'name': 'Title', 'value': 'Lista Lighthouse, Norway' },
347 { 'name': 'Copyright &copy;', 'value': 'Leif Olsen' },
348 { 'name': 'Camera', 'value': 'Nikon D800E' },
349 { 'name': 'Lens', 'value': 'Nikkor 16mm/2.8D Fisheye' },
350 { 'name': 'Focal length', 'value': '16mm' },
351 { 'name': 'Aperture', 'value': 'f/8' },
352 { 'name': 'Shutter speed', 'value': '1/20s' },
353 { 'name': 'ISO', 'value': '100' } ]" >
354 <a href="#" class="mdlext-lightboard__slide__frame">
355 <figure>
356 <img src="./images/_D806374.jpg" />
357 <figcaption>_D803465-3.jpg</figcaption>
358 </figure>
359 </a>
360 </li>
361 <li class="mdlext-lightboard__slide" data-details="[
362 { 'name': 'Title', 'value': 'Osprey' },
363 { 'name': 'Copyright &copy;', 'value': 'Leif Olsen' },
364 { 'name': 'Camera', 'value': 'Nikon D800E' },
365 { 'name': 'Lens', 'value': 'Nikkor 400mm/2.8GEDVR' },
366 { 'name': 'Converter', 'value': 'TC1.4II' },
367 { 'name': 'Focal length', 'value': '550mm' },
368 { 'name': 'Aperture', 'value': 'f/5.6' },
369 { 'name': 'Shutter speed', 'value': '1/400s' } ]" >
370 <a href="#" class="mdlext-lightboard__slide__frame">
371 <figure>
372 <img src="./images/_D805345-12.jpg" />
373 <figcaption>_D805345-12.jpg</figcaption>
374 </figure>
375 </a>
376 </li>
377</ul>
378
379<p class="mdl-typography--caption" style="margin-top: 32px;">
380 All images appearing in this page are the exclusive property of Leif Olsen and are protected under the United States
381 and International Copyright laws. The images may not be reproduced or manipulated without the written permission of
382 Leif Olsen. Use of any image as the basis for another photographic concept or illustration (digital, artist rendering
383 or alike) is a violation of the United States and International Copyright laws. All images are copyrighted &copy; Leif Olsen, 2016.
384</p>
385
386
387<!-- A dialog element MUST be a child of document.body!! -->
388<dialog id="lightbox-dialog" class="mdlext-dialog">
389
390 <div id="lightbox" class="mdlext-lightbox mdlext-js-lightbox mdl-card mdl-shadow--4dp">
391 <div class="mdl-card__menu mdl-color-text--white mdl-typography--body-2-color-contrast">
392 <button data-action="close" class="mdl-button mdl-button--icon mdl-js-button" title="Close">
393 <i class="material-icons">close</i>
394 </button>
395 </div>
396 <figure class="mdl-card__title">
397 <img src="" draggable="true" alt>
398 <figcaption data-action="select">Details</figcaption>
399 </figure>
400 <footer data-action="select" class="mdl-card__actions mdl-card--border">
401 <div class="mdl-card__supporting-text">
402 Image title
403 </div>
404 <nav>
405 <button data-action="first" class="mdl-button mdl-button--icon mdl-js-button" title="First">
406 <i class="material-icons">first_page</i>
407 </button>
408 <button data-action="prev" class="mdl-button mdl-button--icon mdl-js-button" title="Previous">
409 <i class="material-icons">chevron_left</i>
410 </button>
411 <button data-action="next" class="mdl-button mdl-button--icon mdl-js-button" title="Next">
412 <i class="material-icons">chevron_right</i>
413 </button>
414 <button data-action="last" class="mdl-button mdl-button--icon mdl-js-button" title="Last">
415 <i class="material-icons">last_page</i>
416 </button>
417 <button data-action="select" class="mdl-button mdl-button--icon mdl-js-button" title="Details">
418 <i class="material-icons">info_outline</i>
419 </button>
420 </nav>
421 </footer>
422 </div>
423</dialog>
424
425<script>
426 window.addEventListener('load', function() {
427 var dialog = document.querySelector('#lightbox-dialog');
428
429 // A dialog element MUST be a child of document.body!!
430 // In a SPA you should choose a more robust strategy than the simple if provided here
431 if(dialog.parentNode.tagName !== 'BODY') {
432 document.body.appendChild(dialog);
433 }
434
435 if (!('showModal' in dialog)) {
436 dialogPolyfill.registerDialog(dialog);
437 }
438
439 var currentSlide = null;
440 var lightboard = document.querySelector('#lightboard-for-lightbox');
441 var slides = lightboard.querySelectorAll('.mdlext-lightboard__slide');
442
443 lightboard.addEventListener('select', function(e) {
444 currentSlide = e.detail.source;
445 for (var i = 0, n = slides.length; i < n; i++) {
446 if(currentSlide === slides[i]) {
447 break;
448 }
449 }
450 var prevSlide = slides[ i > 0 ? i-1 : n-1 ];
451 var nextSlide = slides[ i < n-1 ? i+1 : 0];
452 showImage(currentSlide, prevSlide, nextSlide);
453 });
454
455 var lightbox = dialog.querySelector('.mdlext-lightbox');
456
457 lightbox.addEventListener('action', function(e) {
458 if(e.detail.action === 'close') {
459 dialog.close();
460 }
461 else if(e.detail.action === 'select') {
462 var figcaption = lightbox.querySelector('figure figcaption');
463 if(figcaption.classList.contains('mdlext-lightbox__show-figcaption')) {
464 figcaption.classList.remove('mdlext-lightbox__show-figcaption');
465 }
466 else {
467 figcaption.classList.add('mdlext-lightbox__show-figcaption');
468 }
469 }
470 else {
471 var i = 0;
472 var n = slides.length
473
474 if(e.detail.action === 'first') {
475 currentSlide = slides[0];
476 }
477 else if(e.detail.action === 'prev' || e.detail.action === 'next') {
478 for (var j = 0; j < n; j++) {
479 if(currentSlide === slides[j]) {
480 if(e.detail.action === 'prev') {
481 i = j > 0 ? j-1 : n-1;
482 currentSlide = slides[i];
483 }
484 else if(e.detail.action === 'next') {
485 i = j < n-1 ? j+1 : 0;
486 currentSlide = slides[i];
487 }
488 break;
489 }
490 }
491 }
492 else if(e.detail.action === 'last') {
493 i = slides.length-1;
494 currentSlide = slides[i];
495 }
496 var prevSlide = slides[ i > 0 ? i-1 : n-1 ];
497 var nextSlide = slides[ i < n-1 ? i+1 : 0];
498 showImage(currentSlide, prevSlide, nextSlide);
499 }
500 });
501
502 function showImage(slide, prevSlide, nextSlide) {
503
504 var slideAnchor = slide.querySelector('a');
505 var slideImg = slide.querySelector('img');
506 var img = dialog.querySelector('img');
507 var supportingText = dialog.querySelector('.mdl-card__supporting-text');
508 var imageDetails = dialog.querySelector('figcaption');
509 var href = slideAnchor.getAttribute('href');
510 href = href && href.indexOf('#') === 0 ? slideImg.getAttribute('src') : href;
511 img.setAttribute('src', href);
512 img.setAttribute('alt', slideImg.getAttribute('title') || '');
513 img.setAttribute('title', slideImg.getAttribute('title') || '');
514 supportingText.innerHTML = slideImg.getAttribute('title') || '';
515
516 // Lazy coder :)
517 slideAnchor = prevSlide.querySelector('a');
518 slideImg = prevSlide.querySelector('img');
519 href = slideAnchor.getAttribute('href');
520 href = href && href.indexOf('#') === 0 ? slideImg.getAttribute('src') : href;
521 img.setAttribute('data-img-url-prev', href);
522
523 slideAnchor = nextSlide.querySelector('a');
524 slideImg = nextSlide.querySelector('img');
525 href = slideAnchor.getAttribute('href');
526 href = href && href.indexOf('#') === 0 ? slideImg.getAttribute('src') : href;
527 img.setAttribute('data-img-url-next', href);
528
529
530 var detailsHtml = '';
531 var detailsArray = JSON.parse(slide.getAttribute('data-details').replace(/'/g, '"'));
532
533 if(detailsArray != null) {
534 detailsHtml = '<table><tbody>';
535 for (var i = 0, n = detailsArray.length; i < n; i++) {
536 detailsHtml += '<tr><th>' + detailsArray[i].name + '</th><td>' + detailsArray[i].value + '</td></tr>';
537
538 if(!supportingText.innerHTML && detailsArray[i].name.toLowerCase() === 'title') {
539 supportingText.innerHTML = detailsArray[i].value;
540 }
541 }
542 detailsHtml += '</tbody></table>';
543 }
544
545 imageDetails.innerHTML = '';
546 imageDetails.insertAdjacentHTML('afterbegin', detailsHtml);
547
548 if(!dialog.open) {
549 dialog.showModal();
550 }
551 }
552 });
553</script>