Adding Lightbox on A Powered Website doesn’t have many plugins like WordPress. So if you would like to add Lightbox-kind effect on your powered website, you will need to do it manually.

Here is how you can do it.

1. Go to this Lightbox site and click Download button to download the script package.

2. Extract the package and save both css and js folder into your website. For example, I created a separate folder called source and saved both folders in it.

3. Add the following three lines at the top of the page in <head> tag.

    <script src="" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
    <script src="/source/js/lightbox.js"></script>
    <link href="/source/css/lightbox.css" rel="stylesheet" />

4. Update the link by adding rel="lightbox" and title for image caption. For example,

<a href="images/image-1.jpg" rel="lightbox" title="my caption"><img src='images/image-1.jpg'/></a>

That’s about it, as simple as like that.

Leave a Reply

Your email address will not be published. Required fields are marked *