fslightbox pro tutorial

example gallery 1

code for example gallery 1


<style>

:root{
  /*used with fslightbox*/
  --background-color: white;
  --text-color: black;
  --link-color: gray;
  --link-hover-color: darkgray;
}

.fslightbox-container{
    font-family: monospace; /* or any other font */
}
    
#gallery{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(10px, 1.5vw, 1em);
  line-height: 0;
}

</style>

<div id="gallery">

  <a 
  data-fslightbox="gallery1" 
  data-thumb="/share/img1-thumb.jpg"
  data-caption="<h2>Caption 1</h2>" 
  href="/share/img1-full.jpg">
      <img src="/share/img1-thumb.jpg">
  </a>
  <a 
  data-fslightbox="gallery1" 
  data-thumb="https://info.maxbanshees.com/share/img2-thumb.jpg"
  data-caption="<h2>Caption 2</h2><p>Additional text.</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>" 
  href="/share/img2-full.jpg">
      <img src="/share/img2-thumb.jpg">
  </a>
  <a 
  data-fslightbox="gallery1"
  data-thumb="/share/img3-thumb.jpg"
  data-caption="<h2>Caption 3</h2><p>Additional text.</p><p>Line.</p><p>Line.</p><p>Line.</p><p>Line.</p></p><p>Line.</p><p>Line.</p><p>Line.</p><p>Line.</p>" 
  href="/share/img3-full.jpg">
      <img src="/share/img3-thumb.jpg">
  </a>

</div>

example gallery 2

i tried it out with a few images from your gallery, and it seems to be MOSTLY working... except [and this is unfortunately critical]... idk why the full images don't show up In the lightbox when i link them directly from your site. HOWEVER!!

i reuploaded the brides and crones image to my site and linked it to at Least make sure it wasn't a filesize issue... and it works when i do that! however. the rest still won't work on this preview... Perhaps they'll work on your site tho...

https://meirimerens.neocities.org/illustrations/covers/grace_cover.png

code for example gallery 2


<style>

:root{
  /*used with fslightbox*/
  --background-color: white;
  --text-color: black;
  --link-color: gray;
  --link-hover-color: darkgray;
}

.fslightbox-container{
    font-family: monospace; /* or any other font */
}

#gallery{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(10px, 1.5vw, 1em);
  line-height: 0;
}

</style>

<div id="gallery">

  <a 
  data-fslightbox="illus"
  data-thumb="https://meirimerens.neocities.org/illustrations/covers/bridesandcrones_cover.png"
  data-caption="<h2>Brides and Crones</h2>"
  href="https://info.maxbanshees.com/share/brides%20and%20crones.PNG">
    <img src="https://meirimerens.neocities.org/illustrations/covers/bridesandcrones_cover.png" alt="Brides and Crones">
  </a> <!-- make sure to update link from my site to yours!! -->
  
  <a 
  data-fslightbox="illus"
  data-thumb="https://meirimerens.neocities.org/illustrations/covers/birdsong_cover.png"
  data-caption="<h2>Birdsong</h2>"
  href="https://meirimerens.neocities.org/illustrations/pathologic/birdsong.PNG">
    <img src="https://meirimerens.neocities.org/illustrations/covers/birdsong_cover.png" alt="Birdsong">
  </a>
  
  <a 
  data-fslightbox="illus"
  data-thumb="https://meirimerens.neocities.org/illustrations/covers/shellandbone_cover.png"
  data-caption="<h2>Shell and Bone</h2>"
  href="https://meirimerens.neocities.org/illustrations/pathologic/shell%20and%20bone.PNG">
    <img src="https://meirimerens.neocities.org/illustrations/covers/shellandbone_cover.png" alt="Shell and Bone">
  </a>
  
  <a 
  data-fslightbox="illus"
  data-thumb="https://meirimerens.neocities.org/illustrations/covers/willowmellow_cover.png"
  data-caption="<h2>Willow Mellow</h2>"
  href="https://meirimerens.neocities.org/illustrations/pathologic/willow%20mellow.PNG">
    <img src="https://meirimerens.neocities.org/illustrations/covers/willowmellow_cover.png" alt="Willow Mellow">
  </a>
  
  <a 
  data-fslightbox="illus"
  data-thumb="https://meirimerens.neocities.org/illustrations/covers/grace_cover.png"
  data-caption="<h2>Gravekeeper</h2>"
  href="https://meirimerens.neocities.org/illustrations/pathologic/grace%20whole.PNG">
    <img src="https://meirimerens.neocities.org/illustrations/covers/grace_cover.png" alt="https://meirimerens.neocities.org/illustrations/covers/grace_cover.png">
  </a>
  
  <a 
  data-fslightbox="illus"
  data-thumb="https://meirimerens.neocities.org/illustrations/covers/pathoct05_cover.PNG"
  data-caption="<h2>Guests From The Past</h2>"
  href="https://meirimerens.neocities.org/illustrations/pathologic/pathoct05.PNG">
    <img src="https://meirimerens.neocities.org/illustrations/covers/pathoct05_cover.PNG" alt="Guests From The Past">
  </a>

</div>

1. download the script file, and place in the outermost folder of your website.

script file: fslightbox-mod.js [uses variables to match colors to rest of website]

2. put this bit of code in the line above </body>:


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

3. add this to your stylesheet at the top:


:root{
  /*used with fslightbox*/
  --background-color: white;
  --text-color: black;
  --link-color: gray;
  --link-hover-color: darkgray;
}

.fslightbox-container{
    font-family: [choose font];
}

note: if you put this in the stylesheet, it might take a while for your browser to read the new version of that file.

alternatively, you can add this to your page in the line underneath <body> [or any place between the start and end of the body section]


<style>
  :root{
    /*used with fslightbox*/
    --background-color: white;
    --text-color: black;
    --link-color: gray;
    --link-hover-color: darkgray;
  }
  
  .fslightbox-container{
    font-family: [choose font]; /* or any other font */
  }
</style>

you can use words, hex values, or rgba() values for the colors.

by default, .fslightbox-container uses arial and san serif. if your website doesn't use these fonts, you have to overwrite them so that they all match [shown in the part where it says "choose font".]

if you've set a specific fonts for titles in your css stylesheet already [ex.: for <h2>], they'll automatically be used for titles in fslightbox.

4. to your page, add code for images with a link around them:


<a
href="/img-full.jpg">
  <img src="/img-thumb.jpg">
</a>

the href information is on a separate line because it keeps stuff neat for the next step.

5. add the information that fslightbox needs to create a lightbox + gallery:


<a 
data-fslightbox="gallery"
data-thumb="/img-thumb.jpg"
data-caption="<h2>Title</h2><p>Text.</p>"
href="/img-full.jpg">
  <img src="/img-thumb.jpg">
</a>

what each of these lines do:

data-fslightbox: lets the script know to create a lightbox for this item. also groups it into a gallery with other items that have the same label [you can replace "gallery" with anything, and have multiple galleries on one page.]
data-thumb: image to use in the gallery carousel. you can see the carousel by pressing the grid icon on the top right. you also can delete this line, and fslightbox will automatically create a thumbnail based on the image in the href line.
data-caption: text that appears below the image. you can format the text with titles and italics and the like. you can also delete this line and nothing will show up in the caption section.
href: the image that shows up in the carousel.

you can replace the image that people would press on to open the lightbox with text [ex.: using a "view gallery →" label instead.]

you can also use nothing at all in that section. one reason you would do this is if you want to link to an image series or comic, but only want 1 thumbnail/label visible outside of the lightbox, ex.:

view gallery →


<p style="text-align:center;">
  <a 
  data-fslightbox="gallery2"
  data-thumb="/img-thumb.jpg"
  data-caption="<h2>Title</h2><p>Text.</p>"
  href="/img-full.jpg">
    <b>view gallery →</b>
  </a>
</p>

<a 
data-fslightbox="gallery2"
data-thumb="/share/img2-thumb.jpg"
data-caption="<h2>Hehe...</h2>"
href="/share/img2-full.jpg">
</a>

<a 
data-fslightbox="gallery2"
data-thumb="/share/img3-thumb.jpg"
href="/share/img3-full.jpg">
</a>