A simple JavaScript Lightbox without dependencies

  1/**
  2 * Photo gallery in JavaScript
  3 *
  4 * Copyright 2024 Jochem Kossen
  5 *
  6 * Permission is hereby granted, free of charge, to any person obtaining a
  7 * copy ofthis software and associated documentation files (the “Software”),
  8 * to deal in the Software without restriction, including without limitation
  9 * the rights to use, copy, modify, merge, publish, distribute, sublicense,
 10 * and/or sell copies of the Software, and to permit persons to whom the
 11 * Software is furnished to do so, subject to the following conditions:
 12 *
 13 * The above copyright notice and this permission notice shall be included
 14 * in all copies or substantial portions of the Software.
 15 *
 16 * THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS
 17 * OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 18 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 19 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 20 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
 21 * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
 22 * IN THE SOFTWARE.
 23 *
 24 */
 25
 26/**
 27 * Main script loop
 28 */
 29const main = function () {
 30  const galleries = document.getElementsByClassName("gallery");
 31
 32  for (let i = 0; i < galleries.length; i++) {
 33    const gallery = galleries[i];
 34    const lightbox = createLightbox();
 35    if (gallery instanceof HTMLElement) {
 36      createGallery(gallery, lightbox);
 37    }
 38  }
 39};
 40
 41/**
 42 * Create a Lightbox instance
 43 *
 44 * @returns {object}
 45 */
 46const createLightbox = function () {
 47  const lightbox = document.createElement("div");
 48  const lightboxContent = document.createElement("div");
 49  const img = document.createElement("img");
 50  const closeLink = document.createElement("a");
 51  const prevLink = document.createElement("a");
 52  const nextLink = document.createElement("a");
 53
 54  /** @type {function} */
 55  let onPrev;
 56
 57  /** @type {function} */
 58  let onNext;
 59
 60  closeLink.href = "#";
 61  closeLink.innerHTML = "&times;";
 62
 63  prevLink.href = "#";
 64  prevLink.innerHTML = "&#10094;";
 65
 66  nextLink.href = "#";
 67  nextLink.innerHTML = "&#10095;";
 68
 69  lightbox.id = "lightbox";
 70  lightbox.className = "lightbox";
 71
 72  lightbox.appendChild(closeLink);
 73  lightboxContent.appendChild(prevLink);
 74  lightboxContent.appendChild(img);
 75  lightboxContent.appendChild(nextLink);
 76  lightbox.appendChild(lightboxContent);
 77
 78  /**
 79   * @param {function} fn
 80   */
 81  const setOnPrev = (fn) => (onPrev = fn);
 82
 83  /**
 84   * @param {function} fn
 85   */
 86  const setOnNext = (fn) => (onNext = fn);
 87
 88  /**
 89   * @param {string} uri
 90   */
 91  const show = function (uri) {
 92    setImage(uri);
 93    lightbox.style.display = "block";
 94  };
 95
 96  const hide = function () {
 97    lightbox.style.display = "none";
 98  };
 99
100  /**
101   * @param {string} uri
102   */
103  const setImage = function (uri) {
104    img.src = uri;
105  };
106
107  /**
108   * Make the buttons in the lightbox work
109   */
110  const enableLightboxButtons = function () {
111    closeLink.addEventListener("click", (event) => {
112      event.preventDefault();
113      hide();
114    });
115
116    prevLink.addEventListener("click", (event) => {
117      event.preventDefault();
118      onPrev && onPrev();
119    });
120
121    nextLink.addEventListener("click", (event) => {
122      event.preventDefault();
123      onNext && onNext();
124    });
125
126    window.addEventListener("keydown", (event) => {
127      if (lightbox.style.display !== "block") {
128        return;
129      }
130
131      switch (event.key) {
132        case "ArrowLeft":
133          onPrev && onPrev();
134          break;
135        case "ArrowRight":
136          onNext && onNext();
137          break;
138        case "Escape":
139        case "x":
140          hide();
141          break;
142      }
143    });
144  };
145
146  enableLightboxButtons();
147  document.body.appendChild(lightbox);
148
149  return { show, setOnPrev, setOnNext };
150};
151
152/**
153 * Create a Gallery instance
154 *
155 * @param {HTMLElement} element
156 * @param {object} lightbox
157 */
158const createGallery = function (element, lightbox) {
159  /** @type {Array.<HTMLElement>} */
160  const slides = [];
161
162  /** @type {number} */
163  let prevSlide = 0;
164
165  /** @type {number} */
166  let nextSlide = 1;
167
168  const showLightboxOnClick = function(thumbnail, nr) {
169    thumbnail.firstElementChild?.addEventListener("click", (event) => {
170      event.preventDefault();
171      showLightbox(nr);
172    });
173  }
174    
175  const findSlides = function () {
176    const thumbnails = element.getElementsByTagName("figure");
177    for (let i = 0; i < thumbnails.length; i++) {
178      showLightboxOnClick(thumbnails[i], i);
179      slides.push(thumbnails[i]);
180    }
181  };
182
183  /**
184   * @param {number} slideNr
185   */
186  const showLightbox = function (slideNr) {
187    prevSlide = slideNr <= 0 ? slides.length - 1 : slideNr - 1;
188    nextSlide = slideNr >= slides.length - 1 ? 0 : slideNr + 1;
189
190    const link = slides[slideNr].firstElementChild;
191
192    if (link instanceof HTMLAnchorElement) {
193      lightbox.show(link.href);
194    }
195  };
196
197  findSlides();
198
199  lightbox.setOnPrev(() => showLightbox(prevSlide));
200  lightbox.setOnNext(() => showLightbox(nextSlide));
201};
202
203/**
204 * Start up the galleries
205 */
206main();

 1<div class="gallery">
 2  <figure>
 3    <a href="jpg-1280/DSCF8660-1280.jpg">
 4      <img src="jpg-500/DSCF8660-500.jpg" alt="IJssel" />
 5    </a>
 6  </figure>
 7
 8  <figure>
 9    <a href="jpg-1280/DSCF8663-1280.jpg">
10      <img src="jpg-500/DSCF8663-500.jpg" alt="IJssel" />
11    </a>
12  </figure>
13
14  <figure>
15    <a href="jpg-1280/DSCF8672-1280.jpg">
16      <img src="jpg-500/DSCF8672-500.jpg" alt="IJssel" />
17    </a>
18  </figure>
19</div>

 1div.gallery {
 2  display: flex;
 3  flex-wrap: wrap;
 4  gap: 1rem;
 5  justify-content: space-between;
 6  max-width: 1200px;
 7}
 8
 9div.gallery > figure {
10  flex: 27%;
11  margin: 0;
12  padding: 0;
13}
14
15div.gallery.two > figure {
16  flex: 47%;
17}
18
19.lightbox {
20  background-color: #000000ef;
21  color: #fafafa;
22  display: none;
23  font-size: 32px;
24  font-weight: 900;
25  height: 100%;
26  left: 0;
27  overflow: auto;
28  position: fixed;
29  top: 0;
30  width: 100%;
31  z-index: 1;
32}
33
34.lightbox a:link,
35.lightbox a:visited {
36  color: #ffffff;
37  text-align: center;
38  text-decoration: none;
39  width: 10%;
40}
41
42.lightbox > a:link,
43.lightbox > a:visited {
44  position: fixed;
45  right: 0px;
46  z-index: 2;
47}
48
49.lightbox > div {
50  align-items: center;
51  display: flex;
52  height: 100%;
53  justify-content: space-between;
54  width: 100%;
55}
56
57.lightbox img {
58  -webkit-animation: fadeIn 0.5s;
59  animation: fadeIn 0.5s;
60  max-height: 90%;
61  max-width: 80%;
62  width: auto;
63}
64/* Media queries */
65@media screen and (max-width: 800px) {
66  div.gallery > figure {
67    flex: 47%;
68  }
69}