A Lightweight Lightbox Gallery Plugin

January 04, 2020 No comments jQuery Gallery Lightbox 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.

Jquery lighterbox

2. Plugin Overview

Library lighterbox
Author Adam Henson
Licence MIT Licence
Repository GitHub
Dependencies jQuery 1.11.1 or Latest version


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:

<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>
<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>

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.

{{ message }}

{{ 'Comments are closed.' | trans }}