We have to download the lightbox, we can download that from the link: https://github.com/lokesh/lightbox2/releases
Creating Structure: In this section, we will code only in HTML to create a normal HTML gallery.
- HTML Code:
Design Structure: In this section, we will add some CSS property to make image gallery attractive.
- CSS Code:
Final Solution: In this section you have to link the downloaded CSS and JS file into your code. You can simply link the downloaded file by unzipping the file. For the CSS file, use the <link> tag with href attribute for the address of CSS and for JS file use the <script> tag with src attribute for the code. At last we have to put data-lightbox=”mygallery” attribute inside the <a> tag. Next and previous button will automatically attached during JS file attachment.
- Final Code: