Adding Lightbox on A ASP.net Powered Website

ASP.net doesn’t have many plugins like WordPress. So if you would like to add Lightbox-kind effect on your ASP.net 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.

Lightbox 2017 05 02 21 54 59 - Adding Lightbox on A ASP.net Powered Website

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="https://code.jquery.com/jquery-3.2.1.min.js" 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 *