
picla is a simple-to-use jQuery plugin which automatically generates customizable captions on your images from the alt
attribute.
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:
2018-06-17
- v0.8.2
2016-07-03
This awesome jQuery plugin is developed by ArunMichaelDsouza. For more Advanced Usages, please check the demo page or visit the official website.
- Publication date: 17.06.2018
- Source