A Lightweight Lightbox Gallery Plugin

1. Introduction

lighterbox is a lightweight jQuery lightbox plugin that can be used to create a beautiful photo gallery for your website. The plugin fully supports all modern mobile and desktop browsers has a fully responsive design and come with many customization options.

2. Plugin Overview

Demo

3. How to install and use lighterbox jQuery plugin

Follow the below steps to install lighterbox jQuery plugin on your website.

1. Include the jQuery and reference lighterbox library right after it:

<!--jQuery-->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<!--lighterbox js-->
<script src="js/jquery.lighterbox.0.0.3.min.js"></script>

2. Create HTML structure with your gallery:

<a href="https://s3.amazonaws.com/hensonism-art/paul-gauguin/gaugin3.jpg" class="lighterbox">
    <img src="https://s3.amazonaws.com/hensonism-art/paul-gauguin/thumbs/gaugin3.jpg" />
    <h2 class="lighterbox-title">Painting by Paul Gaugin</h2>
    <span class="lighterbox-desc">Oil on Canvas</span>
</a>

4. Initialize the lighterbox plugin:

$(".lighterbox").lighterbox({ overlayColor : "white" });

5. Options:

• overlayColor : {string} "white" or "black" options set the theme. Default is white.
• overlayOpacity : {string or integer} Any valid css value.
• animateSpeed : {string or integer} Any valid css value.

4. Conclusion

In this article, we presented lighterbox jQuery plugin designed for photo galleries. The plugin should be useful for web designers, freelancers, photographers, and anyone show wants to present their work in a well-crafted way.