A lightbox is an isolated container that pops up when you click something like an image or link.

They make it easier for visitors to view images at a larger size without being redirected to another page.

Lightboxes can be used on all pages, including galleries.

Go to https://fslightbox.com/javascript, and press download.

Unzip and upload the fslightbox.js file to your root folder.

On whichever page you want to use the lightbox, make sure this is included:

<script src="/fslightbox.js"></script>

You should put it towards the end, on the line above </body>.

Add a link that contains data-fslightbox="gallery" around the image:

<div class="img-container">
  <a data-fslightbox="gallery" href="/media/">
    <img src="/media/">
  </a>
</div>

The link should lead to the image you want to display in the lightbox. It can differ from the image that will be clicked on.

Once again, wrap images in links that contain data-fslightbox="gallery".

Here is an example with a two column page:

<div id="two-column">
  <div class="img-container">
    <a data-fslightbox="gallery" href="/media/">
      <img src="/media/">
    </a>
  </div>
  <div class="img-container">
    <a data-fslightbox="gallery" href="/media/">
      <img src="/media/">
    </a>
  </div>
</div>

Since gallery items are already links, all you have to do is add data-fslightbox="gallery" to each link, and then update the link to an image instead of a page.

fslightbox will look at all of the images on the page that share the same name in data-fslightbox, and group them together in one lightbox.

If you need multiple instances of fslightbox, just give them different names, ex.: gallery1, gallery2, gallery3.

This can be useful on a page with multiple comics. In this situation, you want the visitor to be able to cycle back to to the start of a comic when they finish reading it, as opposed to suddenly starting the next one.

A lightbox can have more files in it than are visible on the page.

For instance, you can display the cover of a comic, and when a visitor clicks on it, the lightbox will contain all of the comic's pages.

To do this, include the link that contains data-fslightbox="gallery", but don't put any images between the tags, like so:

<a data-fslightbox="gallery" href="/media/comic/cover.jpg">
  <img src="/media/comic/cover.jpg">
</a>
<a data-fslightbox="gallery" href="/media/comic/1.jpg"></a>
<a data-fslightbox="gallery" href="/media/comic/2.jpg"></a>
<a data-fslightbox="gallery" href="/media/comic/3.jpg"></a>

I suggest keeping comic images together in a folder within your media folder.

If adding multiple "hidden" files in a gallery page (ex.: if displaying multiple comics), wrap all files in an instance in a div, like so:

<!-- comic 1 -->
<div>
<a data-fslightbox="comic1" href="/media/comic1/cover.jpg">
  <img src="/media/comic1/cover.jpg">
</a>
<a data-fslightbox="comic1" href="/media/comic1/1.jpg"></a>
</div>

<!-- comic 2 -->
<div>
<a data-fslightbox="comic2" href="/media/comic2/cover.jpg">
  <img src="/media/comic2/cover.jpg">
</a>
<a data-fslightbox="comic2" href="/media/comic1/1.jpg"></a>
</div>

If you have programming questions, or want to continue learning about CSS/HTML, here are things you can do:

1. Watch Kevin Powell's Intro to HTML/CSS video series.
2. Use W3School's Introduction to HTML & CSS interactive series.
3. Look up or ask a question on Stack Overflow.

I've learned what I know from these resources. Kevin Powell's CSS Grid video tutorial was especially helpful for making the gallery.

Good luck!