-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathlightbox.html
71 lines (70 loc) · 3.24 KB
/
lightbox.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Lighbox: Vanilla JS and CSS animation</title>
<link rel="stylesheet" type="text/css" href="css/base.css">
<link rel="stylesheet" type="text/css" href="css/mvt-lightbox.min.css">
</head>
<body>
<section>
<h1>Lightbox: Vanilla JS and CSS animation</h1>
<p>
The lightbox is also keyboard accessible.
Use TAB key for focus on first thumbnail. Use arrow keys to navigate through the thumbnails. Hit enter to open the lightbox. Hit ESC to close the lightbox.
</p>
</section>
<section data-lightbox="mvt-lightbox">
<div class="mvt-thumbs-list" role="list">
<a href="#" role="listitem">
<img src="img/aramon-thumb.jpg" alt="">
</a>
<a href="#" role="listitem">
<img src="img/avond-montblanc-thumb.jpg" alt="">
</a>
<a href="#" role="listitem">
<img src="img/Kalgoorlie-old-mines-thumb.jpg" alt="">
</a>
<a href="#" role="listitem">
<img src="img/waterval-kloosterallerheiligen-thumb.jpg" alt="">
</a>
<a href="#" role="listitem">
<img src="img/wortels-thumb.jpg" alt="">
</a>
<a href="#" role="listitem">
<img src="img/domancy-uitzicht-thumb.jpg" alt="">
</a>
</div>
<div class="mvt-lightbox" data-show-id="">
<div class="mvt-img-list">
<img src="img/aramon.jpg" alt="">
<img src="img/avond-montblanc.jpg" alt="">
<img src="img/Kalgoorlie-old-mines.jpg" alt="">
<img src="img/waterval-kloosterallerheiligen.jpg" alt="">
<img src="img/wortels.jpg" alt="">
<img src="img/domancy-uitzicht.jpg" alt="">
</div>
<div class="mvt-btn-close">
<svg viewBox="0 0 45 45" xmlns="http://www.w3.org/2000/svg">
<title>Close</title>
<path d="M27.344,4.287 L23.531,0.474 L14,10.005 L4.469,0.474 L0.656,4.287 L10.187,13.818 L0.656,23.349 L4.469,27.162 L14,17.631 L23.531,27.162 L27.344,23.349 L17.813,13.818 L27.344,4.287 Z"></path>
</svg>
</div>
<div class="lightbox-nav-next">
<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
<title>Next</title>
<path d="M181.683 512.5L96.35 427.203l170.632-170.67L96.352 85.868 181.68.5 437.65 256.534 181.682 512.5z" />
</svg>
</div>
<div class="lightbox-nav-prev">
<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
<title>Previous</title>
<path d="M85.683,512.5 L0.35,427.203 L170.982,256.533 L0.352,85.868 L85.68,0.5 L341.65,256.534 L85.682,512.5 L85.683,512.5 Z" transform="translate(171.000000, 256.500000) scale(-1, 1) translate(-171.000000, -256.500000) "/>
</svg>
</div>
</div>
</section>
<script src="js/mvt-lightbox.min.js" type="text/javascript"></script>
<script src="js/base.min.js" type="text/javascript"></script>
</body>
</html>