Lightbox by Usecue

1<p>Lightbox is a solution that loads your <a href="grumpycat2.jpg">image</a> <a href="grumpycat.jpg">links</a>, your <a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ&amp;showinfo=0&amp;rel=0" target="_blank" rel="noopener">Youtube links</a> and your <a href="https://vimeo.com/132888648" target="_blank">Vimeo links</a> automatically in a minimalistic and responsive pseudo window/overlay. No adjustment to your code or your links is required.</p>
2
3<link rel="stylesheet" href="/demos/lightbox/lightbox.css" />
4<script src="/demos/lightbox/lightbox.js"></script>

 1/* the lightbox of lightbox.js: the image or video of a link on a dark overlay, that fades in
 2   and out. A dialog over the whole page, also while it fades out, after it has left the top layer */
 3#lightbox {
 4    position: fixed;
 5    inset: 0;
 6    z-index: 9999999;
 7    width: 100%;
 8    max-width: none;
 9    height: 100%;
10    max-height: none;
11    margin: 0;
12    padding: 0;
13    border: 0;
14    background: rgba(23, 31, 39, .95);
15    color: #fff;
16    font-family: sans-serif;
17    cursor: pointer;
18    -webkit-user-select: none;
19    user-select: none;
20    opacity: 0;
21    transition: opacity .3s ease-in-out, display .3s allow-discrete;
22}
23
24#lightbox[open] {
25    display: flex;
26    align-items: center;
27    justify-content: center;
28    opacity: 1;
29}
30
31@starting-style {
32    #lightbox[open] {
33        opacity: 0;
34    }
35}
36
37#lightbox::backdrop {
38    background: none;
39}
40
41/* at most 1200px */
42#lightbox img {
43    width: auto;
44    height: auto;
45    max-width: min(100%, 1200px);
46    max-height: min(100%, 1200px);
47}
48
49#lightbox iframe {
50    width: min(100%, 1200px);
51    max-height: 100%;
52    aspect-ratio: 16 / 9;
53    border: 0;
54    background: #000;
55}
56
57#lightbox #prev,
58#lightbox #next {
59    position: fixed;
60    top: 50%;
61    height: 50px;
62    margin-top: -25px;
63    padding: 0 15px;
64    font-size: 60px;
65    line-height: 36px;
66}
67
68#lightbox #prev {
69    left: 0;
70}
71
72#lightbox #next {
73    right: 0;
74}
75
76/* a white cross at the top right */
77#lightbox #close {
78    position: fixed;
79    top: 0;
80    right: 0;
81    width: 50px;
82    height: 50px;
83}
84
85#lightbox #close::before,
86#lightbox #close::after {
87    content: "";
88    position: absolute;
89    top: 22px;
90    left: 14px;
91    width: 23px;
92    height: 2px;
93    background: #fff;
94    transform: rotate(-45deg);
95}
96
97#lightbox #close::after {
98    transform: rotate(45deg);
99}

 1// Opens links to images, Youtube videos and Vimeo videos (also unlisted ones) in a lightbox: a modal
 2// dialog, so the page behind it is out of reach and Escape closes it. Links in the same paragraph or
 3// list form a gallery. Links with the class no-lightbox open normally.
 4document.addEventListener('DOMContentLoaded', function () {
 5    var lightbox = document.createElement('dialog');
 6    lightbox.id = 'lightbox';
 7    // the focus on the lightbox itself, not in a video, so the keys below work
 8    lightbox.autofocus = true;
 9    document.body.appendChild(lightbox);
10    var gallery = [];
11    var current = 0;
12
13    // the html of a link in the lightbox, or nothing for a link that opens normally
14    function content(link) {
15        var url = link.href;
16        var youtube = url.match(/(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?(?:.*&)?v=))([\w-]{11})/);
17        // vimeo.com/123, player.vimeo.com/video/123, vimeo.com/channels/name/123 and the like, for an
18        // unlisted video with its hash: vimeo.com/123/abc or player.vimeo.com/video/123?h=abc
19        var vimeo = url.match(/vimeo\.com\/(?:(?:.*\/)?videos?\/|channels\/[^\/]+\/)?(\d+)(?:\/(\w+)|.*[?&]h=(\w+))?/);
20        if (link.classList.contains('no-lightbox')) return '';
21        if (youtube) {
22            var start = url.match(/[?&](?:t|start)=(\d+)/);
23            var end = url.match(/[?&]end=(\d+)/);
24            return iframe('https://www.youtube.com/embed/' + youtube[1] + '?autoplay=1&rel=0' + (start ? '&start=' + start[1] : '') + (end ? '&end=' + end[1] : ''));
25        }
26        if (vimeo) {
27            var hash = vimeo[2] || vimeo[3];
28            return iframe('https://player.vimeo.com/video/' + vimeo[1] + '?autoplay=1&byline=0&title=0&portrait=0' + (hash ? '&h=' + hash : ''));
29        }
30        if (/\.(jpe?g|png|gif|webp)\b/i.test(url)) return '<img src="' + url + '" alt="">';
31        return '';
32    }
33
34    function iframe(src) {
35        return '<iframe src="' + src + '" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>';
36    }
37
38    function show(index) {
39        current = (index + gallery.length) % gallery.length;
40        lightbox.innerHTML = '<span id="close"></span>' + (gallery.length > 1 ? '<span id="prev">&lsaquo;</span><span id="next">&rsaquo;</span>' : '') + content(gallery[current]);
41        if (!lightbox.open) lightbox.showModal();
42    }
43
44    // a click on a link opens it, with the other links in its paragraph or list as the gallery. In
45    // browsers without dialogs links open normally
46    document.addEventListener('click', function (event) {
47        var link = event.target.closest('a[href]');
48        if (!link || !lightbox.showModal || !content(link)) return;
49        event.preventDefault();
50        gallery = Array.from((link.closest('p, ul, ol') || link.parentNode).querySelectorAll('a[href]')).filter(content);
51        show(gallery.indexOf(link));
52    });
53
54    // the arrows show the previous and next link, a click anywhere else closes the lightbox
55    lightbox.addEventListener('click', function (event) {
56        if (event.target.id == 'prev') show(current - 1);
57        else if (event.target.id == 'next') show(current + 1);
58        else lightbox.close();
59    });
60
61    // also after Escape: stops a video
62    lightbox.addEventListener('close', function () {
63        lightbox.innerHTML = '';
64    });
65
66    document.addEventListener('keydown', function (event) {
67        if (!lightbox.open || gallery.length < 2) return;
68        if (event.key == 'ArrowLeft') show(current - 1);
69        if (event.key == 'ArrowRight') show(current + 1);
70    });
71});