Easy & Customizable Image Caption Plugin With jQuery - picla

picla is a simple-to-use jQuery plugin which automatically generates customizable captions on your images from the alt attribute.

Installation:

# NPM
$ npm install picla --save

How to use it:

1. Just include the jQuery picla plugin after jQuery library and we're ready to go.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="build/picla.min.js"></script>

2. Add the required CSS class 'picla' to your img tag and specify the caption class using data-label-class attribute.

<img src="1.jpg" 
     alt="Thomas Lefebvre" 
     class="picla" 
     data-label-class="caption">

3. Let's start to style the caption in the CSS.

.caption {
  background-color: rgba(0,0,0,.75);
  color: #fff;
  padding: 10px;
  text-align: center;
}

4. Add the slideUp or fadeIn animation to the image captions when hovering.

<img src="1.jpg" 
     alt="Thomas Lefebvre" 
     class="picla" 
     data-label-slideUp="2s"
     data-label-class="caption">

<img src="2.jpg" 
     alt="Thomas Lefebvre" 
     class="picla" 
     data-label-fadeIn
     data-label-class="caption">

Changelog:

2020-06-28

• v0.8.10

2019-07-09

• v0.8.9: added module version

2019-06-14

• v0.8.8: Security vulnerabilities fixed

2018-04-24

• v0.8.7

2018-04-12

• v0.8.5

2018-06-17

• v0.8.2

2016-07-03

• JS update

---

This awesome jQuery plugin is developed by ArunMichaelDsouza. For more Advanced Usages, please check the demo page or visit the official website.