LightBox Implementation: Step-by-Step Guide

The steps to use LightBox are as follows:

  1. I need one option
<script src="path/to/lightbox.min.js"></script>
<link rel="stylesheet" href="path/to/lightbox.min.css">

Make sure the path is correct and place the code above inside either the tag or the tag.

  1. Create an HTML structure in your HTML file that includes images, for example:
<a href="path/to/image.jpg" data-lightbox="image-1">
  <img src="path/to/thumbnail.jpg">
</a>

In the above code, the href attribute points to the path of the original image, the data-lightbox attribute defines a unique identifier for the image so that LightBox can display the corresponding image based on that identifier. The src attribute inside the img tag points to the path of the thumbnail.